The HTML iFrame widget allows you to add a third-party widget to your website. You can use it to add custom code like HTML blocks, embed code/widgets from external services and resources. With its help, you can display a YouTube video, add a Google calendar, or an advertising section on your website. 

The HTML iFrame functionality enables you to add isolated code blocks to your project to protect your website from the potential side effects of custom HTML/JS/CSS code. The HTML iFrame widget is a paid feature included in the Growth plan.

Note:

While the HTML iFrame widget provides more possibilities in website creation, the custom code may affect the page loading speed. The thing is that each added HTML iFrame widget on the web page enlarges the amount of memory used. It also increases the use of other computational resources (for instance, bandwidth). Therefore, you should use the HTML iFrame widget carefully, constantly checking how it affects your website performance rates.

HTML iFrame Editor

The HTML iFrame widget is on the Left Panel under Basic elements. Please read that article to get more information on how to add/resize/move/delete a basic element.

Once you insert the widget, the HTML iFrame Editor will appear. 

The HTML iFrame Editor contains an input field where you can paste code, which will be highlighted with the appropriate colors. Syntax highlighting will make the source text of computer programs easier to read and improve its visual perception.

After you insert the code, the Update button replaces the editor’s Save button. If the inserted code doesn’t fit into the window, scroll down, and you will see the rest of it. 

In case you made mistakes while pasting the code, the following notifications might appear:

  • If you did not paste any code into the HTML iFrame editor and clicked the Save button or closed the window, the note “This block contains unexpected or invalid HTML code” will appear.
  • In case the code contains a logical error, the note “This code may contain errors. Please correct your code” will appear.

If the added code is correct, after you click the Update button, you will view the changes on the canvas.

Editing the widget

To start editing the HTML iFrame widget, click on it to call out its controls. The widget editing menu contains three controls, such as Design, Layout, and Edit Code. Here you can customize the widget in multiple ways.

Design

Click the brush icon and the design settings will emerge. You can edit the widget’s appearance by adding borders, shadow, and a background image or fill color.

Layout

In the HTML iFrame widget, you can only adjust the widget’s alignment and paddings. In the layout, it is possible to define the element’s alignment, adjusting its top, bottom, right, and left paddings.

Editing the Code

Click on Edit Code, and the HTML iFrame Editor window will open. 

You can also open the editor by double-clicking on the added block. The Update button will reappear as you start editing the code.

Try the HTML iFrame widget functionality yourself. 

Go to Editor