HTML

For advanced scenarios, you can use HTML in your tour steps. Please contact us if you wish to have access to HTML editing.

Text formatting

Would you like to make some words <strong>bold</strong> and other words <em>italic</em>.<br>

This will also be <strong>bold</strong> and this will be <em>italic</em>.<br>

<em>You <strong>can</strong> combine them</em> or <del>strike things out</del>.<br>

You can even <a href="https://google.com">link to Google!</a>

Would you like to make some words bold and other words italic.
This will also be bold and this will be italic.
You can combine them or strike things out.
You can even link to Google!

Personalization

Personalize your tours to display content based on the current user. Any user properties that you pass to HelpHero can be displayed in your tours. For example when passing name as a user property means you can refer to that using {name} inside your tours.

Hello {name}! Want to take a quick tour?

Hello James! Want to take a quick tour?

Images

<p>If you want to embed images, this is how you do it:</p>

<img src="https://helphero.co/images/[email protected]" alt="logo" width="170px" height="40px">

If you want to embed images, this is how you do it:

logo

Videos

You can use YouTube embed codes or vimeo embed codes to display and play your videos inline.

<iframe src="https://player.vimeo.com/video/15069551" width="100%" height="360" frameborder="0" allowfullscreen></iframe>

Responsive videos

Want your video to be responsive while maintaining an aspect ratio? Use the markdown below, then set the preferred width setting in the styling tab of your step configuration.
Heres an example with a 16:9 aspect ratio

<div style="position:relative;padding-bottom:56.25%;">
  <iframe src="//fast.wistia.net/embed/iframe/j38ihh83m5" style="width:100%;height:100%;position:absolute;left:0px;top:0px;" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay">
  </iframe>
</div>

Heres an example with a 16:9 aspect ratio

Other ratios

This technique can work with other aspect ratios (1:1, 4:3, 3:2, 8:5). The padding value (padding-bottom:) determines the ratio, change the percentage padding-bottom values to change the ratio.
Aspect ratioPadding-bottom
1:1100%
16:956.25%
4:375%
3:266.66%
8:562.5%
<p>By default links open in the same window eg:<br>

<a href="https://helphero.co">link to HelpHero</a>

<p>If you want your link to open in a new window/tab you can use the target attribute:<br>

<a href="https://helphero.co" target="_blank">link to HelpHero</a>

By default links open in the same window eg:
link to HelpHero

If you want your link to open in a new window/tab you can use the target attribute:
link to HelpHero

Lists

<p>Sometimes you want numbered lists:</p>

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

<p>Sometimes you want bullet points:</p>

<ul>
  <li>Start a line with a star</li>
  <li>Profit!</li>
</ul>

Sometimes you want numbered lists:

  1. One
  2. Two
  3. Three

Sometimes you want bullet points:

  • Start a line with a star
  • Profit!