Markdown

You can use Markdown for any of the text in your tour steps. Markdown enables you to quickly format your text to include links, images, italics, bold, bullet lists, code etc. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

Text formatting

It's very easy 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!](https://google.com)

It's very easy 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

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

![HelpHero logo](https://helphero.co/images/[email protected])

If you want to specify attributes such as width and height you can use html instead:

<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:

HelpHero logo

If you want to specify attributes such as width and height you can use html instead:

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%
By default links open in the same window eg:
[link to HelpHero](https://helphero.co)

If you want your link to open in a new window/tab you can use html instead:
<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 html instead:
link to HelpHero

Lists

Sometimes you want numbered lists:

1. One
2. Two
3. Three

Sometimes you want bullet points:

* Start a line with a star
* Profit!

Alternatively,

- Dashes work just as well
- And if you have sub points, put two spaces before the dash or star:
  - Like this
  - And this

Sometimes you want numbered lists:

  1. One
  2. Two
  3. Three

Sometimes you want bullet points:

  • Start a line with a star
  • Profit!

Alternatively,

  • Dashes work just as well
  • And if you have sub points, put two spaces before the dash or star:
    • Like this
    • And this

Headers and quotes

# Structured documents

Sometimes it's useful to have different levels of headings to structure your
documents. Start lines with a `#` to create headings. Multiple `##` in a row
for smaller heading sizes.

### This is a third-tier heading

You can use one `#` all the way up to `######` six for different heading sizes.

If you'd like to quote someone, use the > character before the line:

> Coffee. The finest organic suspension ever devised...
> I beat the Borg with it. - Captain Janeway

Structured documents

Sometimes it's useful to have different levels of headings to structure your
documents. Start lines with a # to create headings. Multiple ## in a row
for smaller heading sizes.

This is a third-tier heading

You can use one # all the way up to ###### six for different heading sizes.

If you'd like to quote someone, use the > character before the line:

Coffee. The finest organic suspension ever devised...
I beat the Borg with it. - Captain Janeway

Tables

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column
First Header Second Header
Content from cell 1 Content from cell 2
Content in the first column Content in the second column