Velo: Working with the HTML iframe Element
In general, you do not have access to the HTML and full code of your site's pages. This can sometimes be limiting when you want to add 3rd party code to your site. Using an HTML element you can sometimes overcome these limitations by adding raw HTML to your page.
The HTML element creates a sandboxed environment (an iframe) that does not have direct access to the other elements on your page. You can, however, pass data between your page code and the code in an HTML element. This means that widgets or libraries that need access to the rest of your page will not work in an HTML element. But if the widget or library just needs to send data to or receive data from your page elements, you can write code to make it work.
Embedding Another Site
For example, to embed a Wikipedia page in your site, add an HTML element to your page and set its Website Address to be the URL of the page you want to embed.

Embedding a Widget
Let's take a look at some of the types of widgets you can embed in your site and some of the types of widgets that will not work properly.
Standalone Widget
For example, the AccuWeather Current Weather Widget is a widget that displays the current weather. Since it doesn't need to know anything about your page elements, you can add it to your site using an HTML element.
To add an AccuWeather Current Weather Widget to your page:
- From the Embed section of the Add menu, drag an HTML iframe element to your page.
- Go to the Create a Current Weather Widget page, set the parameters for your widget, and get a code snippet.
- In the HTML element's settings panel, select Code and paste the widget code.
Dependent Widget
For example, Google's Website Translator is a widget that translates the contents of your page into another language. Since it needs to know about your page elements to translate them, you can't add it to your site using an HTML element and have it translate the rest of your page. You can, however, add it to an HTML element and have it translate the contents of the element itself.
Using a JavaScript Library
elementFor example, Chart.js is a JavaScript library that you can use to create charts. You can use a <script>
tag to link to the Chart.js library and write HTML and JavaScript that will display a chart in an HTML element on your page. You can also send messages between your page and the HTML element so that interactions with your page can affect the chart and interactions with the chart can affect your page.
Messaging
Sending a Message from Page Code to an HTML Element
You send a message from your page to an HTML element using the HTML element's postMessage()
function.
1$w("#myHtmlElement").postMessage("Message for HTML Comp");
Receiving a Message from Page Code in an HTML Element
You receive a message in your HTML element by creating an event handler for the window.onmessage
event in the element's code. You create the event handler within an HTML <script>
tag. You get the received data by getting the data
property of the event handler's event
parameter.
1<script type="text/javascript">
2 window.onmessage = (event) => {
3 if (event.data) {
4 let receivedData = event.data;
5 }
6 };
7
8 //...
9
10</script>
Sending a Message from an HTML Element to Page Code
You send a message from your HTML element using the postMessage()
function in the element's code. Generally, you will be calling postMessage()
from within a function.
1<script type="text/javascript">
2
3 //...
4
5 function respond() {
6 window.parent.postMessage("To page code", "http://mysite.com");
7 }
8</script>
Receiving a Message from an HTML Element in Page Code
You receive a message in your page code using the HTML element's onMessage()
function to bind an event handler. You get the received data by getting the data
property of the event handler's event
parameter.
1$w("#myHtmlElement").onMessage( (event) => {
2 let receivedData = event.data;
3} );
Example - Messaging Demonstration
- A text element that is used to display messages received from the HTML element
- A button element that is used for sending messages to the HTML element
- A text input element that is used for entering the message to send to the HTML element
The right side of the page shown below is created with an HTML element. The element contains HTML that mimics the elements on the left side.

Page Code
First, in the page's onReady()
event handler, we set an event handler that runs when the page receives a message from the HTML element. The event handler sets the text of the page's text element to be the data sent from the HTML element.
1$w.onReady(function () {
2 // when a message is received from the HTML element
3 $w("#myHtmlElement").onMessage( (event) => {
4 $w("#text1").text = event.data;
5 } );
6} );
7
8export function messageSendButton_onClick() {
9 // send message to the HTML element
10 $w("#myHtmlElement").postMessage($w("#textInput1").value);
11}
HTML Element Code
In the <body>
tag, we define the HTML elements that make up our page. Similar to what we created using Wix page elements, we have:
- A
<span>
that is used to display messages received from the page code - A
<button>
that is used for sending messages to the page code - An
<input type="text">
that is used for entering the message to send to the page code
In the <style>
tag, we define some styles that are used by the HTML elements mentioned above. These styles aren't actually necessary. We are just using them to mimic the design of the Wix page elements.
In the <script>
tag, we define our messaging logic. There are two parts to the messaging logic.
First, when the HTML element loads, we set its onMessage
property to an event handler that sets the text of the element's <span>
to be the data sent from the page code. This event handler is called each time the HTML element receives a message from the page code.
Next, when the button in the HTML element is clicked, it calls the button_click()
function. We define the button_click()
function to send the text in the HTML element's text input to the data sent to the page code.
1<html>
2 <head>
3 <style>
4 .button {
5 background-color: #155DE9;
6 color: white;
7 border: none;
8 padding: 10px 20px;
9 text-align: center;
10 font-family: 'Arial';
11 }
12 .label {
13 font-family: 'Arial';
14 }
15 .input {
16 font-size: 14px;
17 }
18 </style>
19
20 </head>
21 <body>
22 <span id="theLabel" class="label">HTML Label</span>
23 <br/><br/>
24 <button type="button" class="button">Send Message</button>
25 <br/><br/>
26 <input type="text" class="input" id="theMessage">
27
28
29 <script>
30 let text = document.querySelector('#theLabel');
31 let input = document.querySelector('#theMessage');
32 let button = document.querySelector('button');
33
34 button.addEventListener('click', event => {
35 window.parent.postMessage(input.value, 'https://mysite.com')
36 });
37
38 window.addEventListener('message', event => {
39 text.innerText = event.data;
40 });
41 </script>
42
43 </body>
44</html>