Hello HTML Component

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 HTML Component. This section also contains a button used to send a message to the HTML Component.

The bottom section contains an HTML Component. Inside the component, we use HTML, 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 HTML Component 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 HTML Component is clicked. It uses the Wix `postMessage()` function to send the message.

The second event handler runs when a message is received from the HTML Component. It populates the received message into the text element with the ID `message`.

HTML Component Code

The HTML Component includes code for creating and designing its UI elements. It also contains two event handlers.

The first event handler runs when a message is received from the page. It populates the received message into the text element with the ID `message`.

The second event handler runs when the button to send messages from the HTML Component to the page is clicked. It uses the non-Wix `postMessage()` function to send the message. Note that in a production environment, you should always specify the URL of your site as the target origin (the second argument of the `postMessage()` function) and not "*".