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


How does the Embed feature work?

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.

Example use cases

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


How to use the Embed HTML feature?

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.

Accessibility care

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.


FAQ

Can I add HTML code in the body of my Tour?

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?