This post is to demo, how to add a alert at the side of the screen?
Prerequisite
This only work in domain connected premium wix site
To test the app live goto https://www.test.salman2301.com/alert-web-component Check the video to quick demo
For now the alert can only be trigger via code
You can trigger the alert, in just few lines.
Three steps
1) Add a Custom element
2) Add the Alert wix block to the site
3) Use code to trigger the app
1) Add a Custom element
1. Click on the add icon
2. Select Embed
3. Drag and Drop Custom element

Setup custom element
Click on the Custom element
Select Choose Source
Select Server URL for "Add your script file with:"
Copy and paste the below URL for Server URL https://cdn.jsdelivr.net/gh/salman2301/wix-alert-component@master/dist/index.js
Copy and paste "alerts-component" Tag Name
Change the Custom element id to "CustomAlert"

2) Add the Alert wix block to the site
1) Click on this link -> http://wix.to/QcCAC7M
2) It will redirect to select the website to add, Select the site (see image below)
3) Select "I Understand" checkbox and click on "Confirm and Install"(see image below)
4) Now you can add from (+) > my Widget > "alertBySalman2301"(see image below)
5) Once the element is added to the page, Change the element ID to "widgetAlert" from propert panel



3) Use code to trigger the app :
We Use code to trigger the alert
to show a default alert
// show alert
$w('#widgetAlert').alert("Your Alert message here!" )
If you want to customise it, you can pass the Object {} instead of string
//alert option, see below for more options
let alertOption = {
title: "Form failed",
message: "Form didn't submit please try again"
}
// pass the alert options
$w('#widgetAlert').alert(alertOption);
Available Alert options, not only message is required property
{
// required field, message display in the alert
message : "Alert message!.",
// set color of alert based on success
type:"success", // "error" | "info" | "warn"|"success"
// if it's false, user need to click on the close button
autoClose : true,
// you can also use any word e.g: "ACTION"| "Yes"|"No"
closeLabel : "X",
// wait for 8 sec before autoClose, if it's set to true
wait : 8,
// custom css style
style:"",
// callback function trigger on autoClose or button click
onClose: function(){},
// callback function trigger on button click
onAction: function(){},
// brandColor set any hex, rgb color, refeclt the border
brandColor:"#4BB543",
// redirect url on title or message clicked!
knowMoreUrl: "https://salman2301.com"
}
You can goto the below URL to test the app https://www.test.salman2301.com/alert-web-component
// You can either pass string or object
// you can call any of the following property to show the alert
// if you want to customise it, set more time or call for action
// instead of string pass the object with the configuration
$w('#widgetAlert').alert("your alert message");
$w('#widgetAlert').alertError("your alert message");
$w('#widgetAlert').alertWarn("your alert message");
$w('#widgetAlert').alertInfo("your alert message");
$w('#widgetAlert').alertSuccess("your alert message");
Note :
to Use Alert up you need to select and set the custom element Just add this line to set the custom element on page ready
$w('#widgetAlert').setCustomElement($w('#CustomAlert'));
Demo Code snippet :
Let's show an warning on button click
// wait for page ready
$w.onReady(function () {
// connect the web component with wix block
$w('#widgetAlert').setCustomElement($w('#CustomAlert'));
// add a button
$w('#button2').onClick(()=>{
// show alert warning with message on click
$w('#widgetAlert').alertWarn("Warning button is clicked!!" )
});
});
So, with just two line of code you can show the alert message
Protip :
If you are gonna use the alert app in multiple pages
Right click the web component and select show on all page switch
Also do the same for the Custom element.
Now on the site page, connect the wix block and site element
// wait for page ready
$w.onReady(function () {
// connect the web component with wix block
$w('#widgetAlert').setCustomElement($w('#CustomAlert'));
});
and on any page code call call the method ( alert | alertError | alertWarn | alertSuccess ) with the string or object
$w('#widgetAlert').alert("Alert message here!!" )
Links
Github Link - https://github.com/Salman2301/wix-alert-component
Custom element - https://www.wix.com/corvid/reference/$w.CustomElement.html
That's it, if you encounter any issue feel free to message me
via salmanhammed77@gmail.com
Happy Coding!
Any help ?
Hi. I'm unable to get the onAction event to run the function.
$w("#cealerts").setAttribute("newalert",JSON.stringify({title: "Confirm Buy Order", message: "Click button to confirm.", type: "info", closeLabel: "Confirm", onAction: handleAction}))
function handleAction(e) { /* e => {reason : reason, message: message,id: id} */ console.log(e.message) }
The alert opens, but when I click the 'Confirm' button, the handleAction function does not trigger.
Please help haha.
Apart from that I like it !
Wow this is great