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.