Hello Custom Element

Create an interaction between a Wix site page and a custom element.

Intermediate Last updated: 01 Apr 2025

Open Example Preview

About

In this code example, we create a custom HTML element that interacts with a site page. When you click the button on the site page, it sends a message to the custom element and updates its displayed text. Similarly, when you click the button on the custom element, it sends a message back to the site page.

Before you begin

Your site must have a Wix premium plan to use this feature.

APIs

• $w.CustomElement API
• $w.Button API
• $w.Text API

How we built it

We added the following to our site:

Page Elements

• A custom element to interact with the page.
• A button to send a message and update the custom element’s text.
• A text element to update with the message sent from the custom element.

Frontend Code

Home

The code in this file demonstrates how to interact with the custom element.  In this file, we:

• Listen for the custom element’s `sayHello` event handler and update the message on the page’s text element. 
• Listen for the button’s `onClick()` event handler and send a message to the custom element by calling `setAttribute()` on the custom element.

Public code

ce-hello-world.js The code in this file defines a custom HTML element that includes methods for creating elements, handling events, and updating content based on user interactions.

In this file, we: 

• Define methods to create various HTML elements for building the custom element.
• Define a custom HTML element class called `HelloWorld` that extends the built-in HTML Element. 
• Instantiate the element’s structure and design when it’s added to the site page. 
• Add an event handler that sends a message to the site page when the button is clicked. 
• Implement getter and setter methods for a custom attribute called `“msg”` that update the displayed content with the message sent from the site page.

Code Snippets

Get Help

Join the community

Join the Wix for Devs community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.