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 Test Link - https://www.test.salman2301.com/alert-web-component 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!

Check the tag of post #public or #backend If it's public Create a public .js file in your Wix account Name it as a "template.js" copy the main code function fullName(firstName, lastName){ return firstName + ' ' + lastName } and past it on template.js Final Public file //in template.js export function fullName(firstName, lastName){ return firstName + ' ' + lastName } Now you can reuse this function in any page Just by importing the module name import { fullName } from 'public/template'; // general import syntax import { moduleName } from 'public/filename.js'; Let say we have 2 input element with first name and last name After a button click We will show the full name in a text Final Page code //Importing module from template js file import { fullName } from 'public/template' $w.onReady(()=>{ $w('#btn').onClick(()=>{ let firstName = $w('#inFirstName').value; let lastName = $w('#inLastName').value; //Calling the module $w('#textDisplayFullName').text = fullName(firstName, lastName); }) }); - inFirstName - id of an input element - inLastName - id of an input element - textDisplayFullName - id of text element - btn - id of a button element

Send a template email to a client using sendgrid npm and Wix code under 20 lines of code. https://salman2301.wixsite.com/npmsendgrid Requirements 1. Sendgrid account i) Sendgrid Sign up for sendgrid account > select "transactional" option under "Templates" Click on the "Create Template" button on top right. Type the name, Click the "Save" button. Click "Add version" select "Design Editor" and Select "Continue" Design the email using Drag and Drop options To create a variable you need to use two open and close brackets {{name}} One of helpful thing is we can test the email using test Data. To do this goto Preview mode in the email editor then click on the "Show Test Data" Copy the template id under "Transactional Template" Get the API KEY on setting > API Keys Click on the Create API Key and get the KEY ii) Wix code Create a form. (No code required) Check this video how to create a form submission using dataset in Wix code I have created a Database "form" which then i am going to use ""hook" hook - hook will trigger the backend code based on the changes in the Database like insert, update, etc. To create a hook select the Database the on the top right select "Add hook" then add "After Insert" So, everytime if the data is inserted in the DB the code will be triggered on the "event.js" backend code Before adding the code in the backend Install the Npm Click on the plus icon on the backend side bar and select "Install Node Package" And search and install "@sendgrid/mail" npm To know more about the npm click here Open the "event.js" backend now and paste the code import sgMail from '@sendgrid/mail'; export function Form_afterInsert(item, context) { sgMail.setApiKey('<API KEY>') const msg = { to: item.email, from : 'salmanhammed77@gmail.com', templateId: '<TEMPLATE ID>', dynamic_template_data: { name: item.title, email: item.email, detail: item.detail, }, }; sgMail.send(msg); } Replace the <API KEY> , <TEMPLATE ID> and the variable on the dynamic_template_data Test the live site