(Last Updated: September 5, 2018)

You can use HTML widgets to load external URLs or display embedded HTML and SVG images. In today’s tutorial, you’ll learn to use HTML widgets.

This tutorial covers:

  1. Inserting HTML Widgets
  2. Editing HTML Widgets

Inserting HTML Widgets

To insert an HTML widget, click HTML Widget on the toolbar. In the dialog that appears, choose either of the two types to embed content. Be aware that you can specify the size of the widget now or later.

Click HTML Widget to insert a widget.

  • Embed a webpage: Select URL and enter the URL which should be served over HTTPS.

Use HTML widgets to load URLs.

  • Embed HTML: Select Resource > From Resources. Then, select an HTML resource you want to display in the pop-up dialog.

Use HTML widgets to embed HTML or SVG images.

  • Embed a SVG image: Select Resource > From Resources and choose a SVG image you want.

Note: To see the URL in action, preview your document in browser.

Editing HTML Widgets

After inserting an HTML widget, you can go to the Properties pane > Embedded section to edit the widget.

Edit the widget after adding it is easy.

Click Edit URL to change the webpage to display. If you want to adjust scroll bar controls, go to the Properties pane > General section > Overflow.

On the other hand, click Edit HTML to edit the HTML. Note that the HTML is always given priority. So, if you specify both the HTML and the URL, the widget will show the embedded HTML. In that case, if you want to display the URL, just clear the HTML.

That’s how you use an HTML widget in Saola Animate. Feel free to ask us if you need any help.