# HTML For advanced scenarios, you can use HTML in your tour steps. Please [contact us](mailto:support@helphero.co) if you wish to have access to HTML editing. ## Text formatting ```html 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! ```

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. ```html Hello {name}! Want to take a quick tour? ```

Hello James! Want to take a quick tour?

## Images ```html

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

logo ```

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

logo ## Videos You can use [YouTube embed codes](https://support.google.com/youtube/answer/171780?hl=en) or [vimeo embed codes](https://help.vimeo.com/hc/en-us/articles/224969968-Embedding-videos-overview) to display and play your videos inline. ```html ```

## Responsive videos :::note 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. ::: ```html Heres an example with a 16:9 aspect ratio
```

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 ratio | Padding-bottom | | ------------ | -------------- | | 1:1 | 100% | | 16:9 | 56.25% | | 4:3 | 75% | | 3:2 | 66.66% | | 8:5 | 62.5% | ## Links ```html

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

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 ```html

Sometimes you want numbered lists:

  1. One
  2. Two
  3. Three

Sometimes you want bullet points:

```

Sometimes you want numbered lists:

  1. One
  2. Two
  3. Three

Sometimes you want bullet points: