Considering demo automation? Test drive Demoboost for free!
Start Your Trial
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

How to Add Guides and Styling

Effortlessly kickstart your journey with our beginner-friendly guides!

  • Guides are a useful way to provide more information about the interface, especially for on-demand demos.
  • Guides are disabled by default for live sessions (refer to the Live Sessions guide).

There are two types of guides - Posts and Pointers.

  • Posts are full-screen guides that are shown in the middle of the screen. They're useful for welcome messages and when transitioning between different "chapters" of the demo.
  • Pointers are pinned to specific elements. They're useful for explaining the purpose of the element and can be used to direct the attention of the viewer to the most important elements.

Step 1: Open up the demo in the Editor.

Step 2: Click on the element you'd like to pin the guide to and click on Guide.

  • When adding a Post guide, you can choose any element.

Step 3: Select the guide type.

Step 4: Type in the text of your guide. You have several text styling options:

  • Text size
  • Bold text
  • Italics text
  • Underscored text
  • Linked text (useful for referring your viewers to outside websites, such as your knowledge base)
  • Bullet points and numbered lists
  • Text alignment options
  • You can also customize the guides even further - refer to the Advanced guide customization guide.

Step 5: Set up the guide settings

  • Guide order on the screen will determine the order in which the guides will be shown. By default, they appear in the order they were added.
  • Guide position - for pointer guides, you can make the pointer appear above, below, to the left and to the right of the element.
  • Guide size - the size of the guide.

Step 6: Click on Save to save the guide, then save the screen.

Step 7: You can also add emoji