Skip to main content
Can I embed HTML content in Tour Steps?

Learn how to integrate external content in your Tours with embed HTML

Tiago Mota avatar
Written by Tiago Mota
Updated over a week ago

Leverage the Embed HTML feature with your Tours, to create highly customizable Steps and show specific, custom messages to your users. You can create more engaging guidance that delights your users.

Availability & Usage

πŸ” Available for all plans

πŸ“ Ready to use in Tours

Quick access

With the Embed feature, you leverage HTML code to embed your unique content into your Tours. This will bring any external content you wish directly to your Tours. You can integrate different types of visuals, content formats and types, and really get creative with your guidance.

This enables you to easily add interactive or custom-made components to your product Tours.

Depending on your product and needs, you may have specific and more complex content to share in your Tours. Here are some ideas to put this feature to use:

  • show your release log in your product

  • display feedback forms from other apps

  • show a countdown until your next event

  • customize Tours with unique content blocks and styles

You can access the Embed HTML feature from the Builder. Using this will create an iFrame that will load your HTML code within your Tour Step. Simply select the "Embed" component and paste in your HTML code.

Start off with the <iframe> and use the src tag to indicate the source of the resource being embedded, followed by any alignment or styling tags. You don't have to go through the trouble of adding <html>, <body>, <head> tags. Put all your code inside of <body> tags and use the <style> tags in order to pull in any extra styling.

For those who navigate your product with assistive technology, ensure you use the title attribute on your embeds to label their content and make it easier for them to understand the full picture. This is especially the case when you have video or audio interactive content.

Yes, you can also leverage HTML directly in your body content. First, enable the toggle from the Dashboard.

Next, use the Builder, as usual, to add your code to your Tour's body; just make sure that you add all your in a single line.

Discover more

Did this answer your question?