Example Description
Custom Elements allow you to embed a Web Component in a page. In this example, we demonstrate sending information from the page to the Custom Element and from the Custom Element to the page.
Note that custom elements only work fully on premium sites with a connected domain.
How We Built It
Page Elements
We split the HOME page into 2 sections.
The top section contains regular Wix elements. It has 2 text elements: one is used as a label and the other is used to display information passed to the page from the Custom Element. This section also contains a button used to send a message to the Custom Element.
The bottom section contains a Custom Element. Inside the element we use CSS, and JavaScript to create 2 text elements and a button. One text element is used as a label and the other is used to display information passed to the Custom Element from the page. The button used is used to send a message to the page.
Page Code
We added 2 event handlers to the HOME page.
The first event handler runs when the button to send messages from the page to the Custom Element is clicked. It uses the Wix `setAttribute()` function to send the message.
The second event handler runs when a message is received from the Custom Element. It populates the received message into the text element with the ID `message`.
Custom Element Code
The Custom Element's code can be found in the Public section of the Velo Sidebar.
The code begins with some functions that create HTML elements that will be added to the Custom Element.
Next there is a function that creates the styles for the HTML elements.
Finally, there is a class that defines the Custom Element itself. Inside the class, there is code for adding HTML elements to the Custom Element, including code for sending a message to the page when the button is clicked. There is also code for handling messages sent from the page.
Related Examples
Did this help?
|
Thanks for your feedback!
![Service Page](https://static.wixstatic.com/media/f0504e_67537d9588364e598beef5e56f5a29c3~mv2.jpg/v1/fill/w_79,h_52,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/Image%20placeholder.jpg)
Service Page
Create a custom service page with related products for sale.
![Intermediate.png](https://static.wixstatic.com/media/12d367_3e4cb40eaf29447896e3ccdc94a766e5~mv2.png/v1/fill/w_10,h_9,al_c,q_85,blur_3,enc_avif,quality_auto/Intermediate.png)
Intermediate
![Limit the number of bookings per contact in a week with ECOM Validations SPI](https://static.wixstatic.com/media/623f25_69dac0fe163c4868a2db4d3ff8f19d30~mv2.png)
Limit the number of bookings per contact in a week with ECOM Validations SPI
Limit each site member’s bookings to no more than three per week.
![Intermediate.png](https://static.wixstatic.com/media/12d367_3e4cb40eaf29447896e3ccdc94a766e5~mv2.png/v1/fill/w_10,h_9,al_c,q_85,blur_3,enc_avif,quality_auto/Intermediate.png)
Intermediate
![Service List](https://static.wixstatic.com/media/f0504e_9298b13d6897424697aaee188fe8a1af~mv2.jpg/v1/fill/w_79,h_52,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/Image%20placeholder.jpg)
Service List
Filter a list of services and view the next available slot.
![Intermediate.png](https://static.wixstatic.com/media/12d367_3e4cb40eaf29447896e3ccdc94a766e5~mv2.png/v1/fill/w_10,h_9,al_c,q_85,blur_3,enc_avif,quality_auto/Intermediate.png)
Intermediate
![Round Robin appointment scheduling](https://static.wixstatic.com/media/623f25_92363429cbfc473a93ac78e3b6ff1e98~mv2.png)
Round Robin appointment scheduling
Allow bookings with no staff selection, creating Round Robin scheduling - evenly spread the bookings among staff members
![Intermediate.png](https://static.wixstatic.com/media/12d367_3e4cb40eaf29447896e3ccdc94a766e5~mv2.png/v1/fill/w_10,h_9,al_c,q_85,blur_3,enc_avif,quality_auto/Intermediate.png)
Advanced
![Replace Bookings Calendar page](https://static.wixstatic.com/media/623f25_6b88ba373b734a9eb4c938ed760e9252~mv2.png)
Replace Bookings Calendar page
Replace the default Wix Booking Calendar on your site with a tailored version to better suit your needs.
![Intermediate.png](https://static.wixstatic.com/media/12d367_3e4cb40eaf29447896e3ccdc94a766e5~mv2.png/v1/fill/w_10,h_9,al_c,q_85,blur_3,enc_avif,quality_auto/Intermediate.png)
Intermediate