Wix Alert Web App

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!!" )

Prerequisite

1) Add a Custom element

2) Add the Alert wix block to the site

3) Use code to trigger the app :

Note :

Demo Code snippet :

Protip :

Links

{Salman}