Widgets: HTML

Expand the capabilities of the website builder with custom HTML. This widget allows you to embed custom code into your site, and can be used to embed third-party widgets such as videos, contact forms, and more.

While adding custom code can extend your site's functionality, we recommend you only add code from a trusted source. Only add code if you know exactly what it does and how to troubleshoot it if it does not work.

To learn more about using HTML in Developer Mode, see Custom Code.

For information on adding widgets, see Add Widgets.

Tip

Fore more information on widgets and the widgets library, see Widgets: Library and Overview.

Content Editor

To access the content editor, right click the widget and select Edit Content. Or, if you are in flex mode or Editor 2.0, the option to access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor.

Warning

Additionally, please review the Critical Information for HTML Widget section.

The HTML widget provides a space for you to add custom HTML. Just paste or write your HTML in the provided text box.

Design Editor

To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode or Editor 2.0, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.

Critical Information for HTML Widget

• We recommend creating a backup of your site before adding custom code to it so that you can reload a previous version if something goes wrong.

• Server-side scripts (for example, PHP and ASP) will have no effect in this widget. We recommend using client-side (Javascript, HTML) scripts only.

• Our editor uses HTTPS, so if your script loads an external non-HTTPS file, it will not work.

• Our system uses jQuery 3.0 to function, so implementing a new version of the jQuery library will usually cause our editor to stop working. For this reason, we recommend that any custom code you add use the functions in jQuery 3.0 and not attempt to re-initialize the library.

• Note that depending on how the custom code is written, the HTML widget may become inaccessible. The HTML widget is still on the page, it is just not visible. For this reason, we recommend you place the HTML widget in a column or container of its own so if it needs to be deleted, you can simply delete the column or container.

Add Connected Data to HTML Widget

You can insert fields from a collection or the Content Library into the HTML widget, and use the widget in your dynamic pages. This is helpful when you want to include an HTML widget in your dynamic pages without having to store all of the HTML code in the collection. Instead, only the unique data or ID is stored in the collection.

For example, if you want to embed an element in your Dynamic Page – a podcast from SoundCloud, an external calendar or any customized code – and you want it to be different in each dynamic page, you can store the ID in your collection and embed the code in the HTML widget.

To add connected data:

1. Right click the HTML widget and select Edit Content, or Manage HTML if you are in Editor 2.0.

2. Click Connect, then select the data field you want to connect the widget to.

3. Click Connect this Data.

Once your HTML widget is successfully connect to the data in the Content Library, it is marked with a purple Connected Data () icon.