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 Build a Sandbox Demo
Managing Access to Demoboost Product: A guide for Admin Users
Knowledge Base Documentation
New Feature Explanations
Product Marketing Announcements
Website Conversions
Channel Partner & Reseller Demos
Conferences/Trade Shows
Digital sales rooms for customers
Sales Leave-Behinds
Live Demos
Using Variables in your demos
“Great Demo!” Training for Sales Teams
Sample Article
How to Replace images
How to Assign a Variable
How to Select or Create an Overlay
How to download the extension?
How to present Mailchimp to Tim Cook
How to Clear Your Browser Cache
How to Install Microsoft Clarity on Your Demos Using Google Tag Manager
Integrating Google Tag Manager with Demoboost: A Step-by-Step Guide
Scrolling Settings - Advanced
How to Translate Screens
Troubleshooting Saving Errors
How to Capture Local Web Pages
Advanced Guide Cutomisation
How to Embed Demos from Specific Screen
How to Share Demos From Specific Screen
How to Edit Elements Behind Overlays
Demo Building and Custom Requests
Comments in Demos
How to Export Data from Demoboost
Analytics Overview
Playback Settings
Live Demo Settings
Demo Email Notifications
How to Share Demos
How to Embed Demos on Your Website
How to Share With Presenters and Channel Partners
How to Duplicate Demos
How to Create Folders
Inspector Introduction
How to Remove Screen Elements
How to Blur Screen Elements
How to Edit Graphs
How to Change Images
How to Edit Textual Elements
Branding - Custom Theme
Branding - SSO Integration
Creating Mobile App Demos
Uploading Multimedia Screens (MP4, PDF, IMG)
How to Change Screen Order
How to Copy Screen to Another Demo
How to Duplicate Screen
How to Edit Screen Title
How to Add Speaker Notes
How to Add Video Narration
How to Add Guides and Styling
How to Link Screens
How to Capture Dynamic Dropdowns (Advanced)
Extension Settings
How to Capture Screens
How to Create Demos
How to Add Extension

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