Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
How to Share and Embed Demos from a Specific Screen
Great demo add-on
How to Create and Use Folders
How to Use AI editing on screen elements
How to Editing Screen Elements
Branding -Custom Themes
How to Add Tour Navigation to your Demo
How to Add Video Screens
How to Add Image Screens
How to Add Voiceover
How to Add Floating Button
How to Use AI refine in your guides
Comprehensive Technical Troubleshooting Guide (Before Contacting Support)
Unable to Capture Locally Hosted Pages
Internal Linking vs. External Linking
Shared Link Not Opening ("You Don't Have Access..." Error)
Images Captured with Incorrect Size or Aspect Ratio
Demoboost Application Not Loading
Captured HTML Elements Are Missing or Broken
Unable to Save Screens in the Editor
Why Can't I Select or Edit a Disabled Element in the Editor?
Why Can't I Add an Image or Video Screen to an Empty Demo?
Unable to Log In to Demoboost
Why Do I Need to Refresh My Page After Installing the Extension?
Variables
How to Add AI Narration to your Demos
Autoplay
Auto translate
Sales Room
Demo playlist
Ending/CTA screen
Pick Your Own Journey Screen
Performing key operations on screen
Integrating Marketo with Demoboost: A Step by Step Guide
Integrating 6sense with Demoboost: A Step by Step Guide
How to Build a Sandbox Demo
“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
How to Translate Screens
Troubleshooting Saving Errors
How to Capture Local Web Pages
Advanced Guide Cutomisation
How to Edit Elements Behind Overlays
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
Inspector Introduction
Creating Mobile App Demos
How to Add Speaker Notes
How to Add Video Narration
How to Create and Manage a Guide
How to Link Screens
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