Working with HTML Widget Elements

Easily integrate new experiences or extend our authoring capabilities on any dominKnow | ONE page

dominKnow | ONE has tremendous built-in capability for creating custom interactivity for your projects.

But there may still be times when you want to do “one more thing” that dominKnow | ONE doesn’t yet have a feature to help with.

HTML Widget Elements can help you do that one more thing.

An HTML Widget element is an iframe on your page that displays HTML-based content that’s been created outside of dominKnow | ONE.

And that HTML Widget can be just about anything you want.

For this lesson, we’ll focus on the example of adding a 360-degree image viewer with a 360-degree image to your page.

Here it is in action in an example Flow Project:

360-Degree Image Viewer Example Project >>

You can find out more about the 360-degree image viewer here on GitHub:

360-degree Image Viewer >>

Setting up the HTML Widget zip file

The HTML Widget can contain a main html file (often called the launcher) and any needed assets, including JavaScript files.

The HTML Widget is uploaded as a zip file. The upload process unzips the file into its component parts.

As part of the upload process you identify which file in the zip is the launcher file (the main file, typically index.html or similar).

The remaining files and folders are then understood by the Media Library to be the “parts” that the launcher file needs and all the parts are kept together as a single HTML Widget asset (made up of multiple parts) in the in the Media Library's HTML Widget Library.

Before adding the HTML Widget to your page, you need to zip up all the parts your widget will need.

The important thing is to compress or zip up all the parts so the launcher file and all of its needed parts are in the root level of the zip file. Don’t compress or zip at the folder level above.

If your HTML Widget doesn’t work either in the upload process or once it’s on the page, the most likely issue is that the launcher and its parts were either compressed within an additional folder or all of the parts aren’t at the same root level as the launcher.

Adding an HTML Widget Element to Your Page

An HTML Widget is uploaded to dominKnow | ONE as a zip file containing all the parts and pieces it needs.

View Full Lesson >>

Embed Settings in Flow

If you’re adding an HTML Widget Element to a Flow page, you have several embed settings available.

Double-clicking the HTML Widget on the page opens the HTML Widget Properties panel.

The Embed Type drop-down list has four options:

Default: The widget is embedded at the size specified on upload and has all sizing options available. Use this option for widgets that can resize their own content or for widgets for which you will set the size.
Fixed Size: The widget is embedded at the size specified on upload and allows for scrolling instead of changing with the screen size. Sizing and minimums are not available.
Responsive: The widget is embedded and scales up and down with the rest of the content, maintaining aspect ratio. Upload width and height do not affect responsive widgets.
Adaptive: The widget is embedded with no size constraints and will allow for the aspect ratio to change on the fly depending on the size of the widget's content. Use this type when the size of the widget's content changes dynamically.

You may need to experiment to see which setting is best for the specific HTML Widget you have added to the page.