Hello everyone, I am a huge fan of the custom element, I build multiple custom element in the past using js, svelte ( JS Framework ), Stencil JS (Custom element compiler). All my examples code are in Github. Anyway, I am here to show an Alert component that build using Svelte. Svelte JS is a compiler to build SPA(Single Page Application) other words Website. We can also use it to build custom element The code is Open source with MIT license
https://github.com/Salman2301/wix-alert-component Example Site: https://www.test.salman2301.com/alert-web-component
How to Install
Easy way is to use Custom elment in Wix site is by using with Wix Block. It provide some level of IDE support.
Click on this link. Follow the step to Install the Wix Block on any Wix site.
Drag and Drop the Widget or Wix Block.
Change the element Id to widgetAlert via the properties panel.
Drag and Drop a Custom element under Add Element/Embed/Custom Element and change the Id to CustomAlert via properties panel.
Click on the Custom element and select Change source.
Select Server URL paste this URL https://cdn.jsdelivr.net/gh/salman2301/wix-alert-component@master/dist/index.js
Set the Tag Name to alerts-component
Add the following code in the page sections.
// page code.js
$w.onReady(function () {
// This step is needed to let the Wix Block select the Custom element
$w('#widgetAlert').setCustomElement($w('#CustomAlert'));
// This will show Warning Alert
$w('#widgetAlert').alert("This is a warning message." )
});
Note: for the alert method, You can pass a string or object
// using string
$w('#widgetAlert').alert("This is a alert message." )
Is same as this
// using object
$w('#widgetAlert').alert({ message: "This is a alert message." })
You can also pass more options like title, type of alert, wait time, style using the object method
Checkout below attribute new alert
$w('#widgetAlert').alert({ title: "Hello", message: "Welcome to the site." })
If you are not comfortable with Wix Block. You can just directly copy and paste the code in the public JS file To learn more check the Github Doc https://github.com/Salman2301/wix-alert-component
Hi, I'm having an error with the link to install Wix Block, it opens the Wix Market with the message: "You’re Invited to Try. To check out this app, add it to your Wix site." And a button "Add to site". When I click it and select my website, it throws me an error: "Seems That Something Is Wrong. The redirect url doesn't match the one defined in your app configuration. Double check that it starts with https." Any guesses?