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:  If you want to specify attributes such as width and height you can use html instead: <img src="https://helphero.co/images/logo@2x.png" alt="logo" width="170px" height="40px">
If you want to embed images, this is how you do it:
If you want to specify attributes such as width and height you can use html instead:
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
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
| Aspect ratio | Padding-bottom |
| 1:1 | 100% |
| 16:9 | 56.25% |
| 4:3 | 75% |
| 3:2 | 66.66% |
| 8:5 | 62.5% |
Links
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:
- One
- Two
- 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 |