Supademo
Manage how viewers experience your SupaDemo content player, including hotspot appearance, chapter templates, fonts, background music defaults, and playback settings.
Hotspots
Hotspots are clickable annotations that guide viewers through each step of your Supademo.
They are automatically added when you record with the Chrome Extension and can be fully customized. Hotspots are used in Screenshot Supademos and Guided HTML demos.
Annotation hotspots are not added to Sandbox demos; Sandbox demos have Invisible Hotspots.
Appearance
Go to Settings > Workspace Settings > Supademo.
Find the Hotspots section.
Click Edit.
In the Appearance section, choose a Background color. You can select a color or enter your own hex code. We recommend using a colour that matches your brand.
Choose a Text color.
Try to use a text colour with enough contrast so the hotspot is easy to read.
Choose a Border Radius.
You can select Sharp, Soft, Round, or Pill. This controls how rounded the corners of the hotspot appear.
Leave Backdrop set to Off.
Choose a Width.
We recommend leaving the default width set to Medium. You can adjust individual hotspot widths later at the demo level.
Choose whether to show the Step Count.
By default, we recommend keeping the step count Hidden.
Set Show text annotations by default to Show.
Set Show hotspot animation to Show. This adds a pulse animation to the hotspot area and helps guide the viewer’s attention.
In the Navigation section, choose whether to show navigation arrows. We recommend setting navigation to Show for all interactive demos.
Set the Next button to Display.
Set the Back button to Display.
Leave the Button Text fields blank.
Review the hotspot preview.
Click Save.
Use demo-level Hotspot settings for exceptions to the Global Hotspot rules.
Global hotspot settings are best for creating a consistent default style across your demos. You can still customize hotspot width, navigation, button text, and other details for individual demos when needed.
Navigation
For most demos, use these global settings:
Set navigation arrows to Show.
Set the Next button to Display.
Set the Back button to Display.
Leave button text blank.
Keep the default button background and text colours.
Click Save.
Hide navigation only for autoplay-style demos.
If your demo is meant to autoplay like a video, navigation arrows may not be needed. For demos where viewers should click through each step, keep navigation visible.
Chapters
Chapters help you provide context, capture leads, gate content, add conditional branching, and drive additional actions within your SupaDemo.
They can be used at the start or end of a demo. Introduction chapters appear at the beginning of demos, while call-to-action chapters appear at the end.
There are four chapter types:
Default
Form
Embed
Password
The Default chapter type lets you add a title, subtitle, logo, cover image, and start buttons.
The Form chapter type lets you capture lead information or gate content before viewers continue. This is often used by marketing teams when a demo is embedded on a website or landing page.
The Embed chapter type lets you embed content directly inside your demo. For example, you can add a calendar embed so viewers can book time without opening a new tab.
The Password chapter type lets you password protect your demo. This is useful when a demo includes sensitive information, customer-specific workflows, or content recorded inside a customer environment.
We recommend using Default as the global chapter type.
Default chapters provide the most flexible starting point for most demos. You can still change the chapter type later at the demo level when a specific demo needs a form, embed, or password.
Introduction Chapter
The introduction chapter appears at the start of a demo.
You can use it to welcome viewers, explain what the demo is about, add your branding, and give viewers a clear button to begin.
How to customize your introduction chapter
Go to Settings > Workspace Settings > Supademo.
Find the Chapters section.
Click Edit under Introduction Chapter.
Choose whether to enable the introduction chapter.
If you do not want an introduction chapter to appear at the start of every demo, turn it off.
In Chapter type, select Default.
Choose a Layout.
You can select Left, Center, or Right. This controls where the chapter text, buttons, and cover image appear on the page.
Choose a Theme.
You can select Dark, Light, or Custom. Choose the option that works best with your logo and brand colors. Custom backgrounds are useful when you want your demos to feel consistent with your website or brand style.
Adjust Opacity and Blur.
This controls how visible or blurred the background appears behind your chapter content.
Choose whether to show your Logo. We recommend setting this to Show if you want the introduction chapter to include your brand.
Choose a Cover Image. You can select None, Step, or Custom.
It is recommended to set this to Step at the global setting level. Supademo automatically uses an image from the demo. This usually works best globally because each demo will show a relevant screenshot. Avoid uploading a custom cover image globally, since that same image may not match every demo.
Click Save.
Call-to-Action Chapter
The call-to-action chapter appears at the end of a demo.
You can use it to guide viewers toward a next step, such as booking a meeting, starting a trial, contacting support, or viewing another resource.
CTA chapters include the same setup options as introduction chapters, including chapter type, layout, theme, logo, cover image, and buttons.
How to customize your call-to-action chapter
Go to Settings > Workspace Settings > Supademo.
Find the Chapters section.
Click Edit under Call-to-Action Chapter.
Choose whether to enable the CTA chapter.
If you do not want a CTA chapter to appear at the end of every demo, turn it off.
In Chapter type, select Default.
Choose a Layout.
Choose a Theme.
Adjust the background style.
Choose whether to show your Logo.
Choose a Cover Image.
Add a title and subtitle that can work across most demos.
Add a button if you want viewers to take a specific next step.
Review the preview.
Click Save.
Choose a CTA that matches your most common demo type. If most of your demos are marketing demos, your CTA might be Book a meeting or Try for free. If most of your demos are support demos, a sales-focused CTA may not make sense. In that case, use a more general CTA or disable the global CTA chapter and customize it at the demo level.
Font Settings
Font settings control the font family used across hotspot, chapter, and button text in your demos.
You can use the default Supademo font or upload a custom font to better align your demos with your brand.
Font Family
Go to Settings > Worksapce Settings > Supademo.
Find the Font Settings section.
Open the Font Family dropdown.
Select the font you want to apply across your demos.
This font will apply to hotspot, chapter, and button text.
Custom Fonts
To add your own font, find the Custom Fonts section.
Click Upload.
Select the font file you want to use.
SupaDemo supports WOFF2, WOFF, TTF, and OTF font files up to 5 MB.
Review the Preview section.
This shows how the font will appear on hotspot and button text.
Click Save.
For best results, upload a variable font.
A variable font includes multiple weights and styles in one file, which helps your text appear consistently across hotspots, chapters, and buttons.
Background Music
Background music is the track that plays during demos.
As a global setting, we recommend selecting No background music. This prevents every demo in your workspace from automatically including the same audio track.
You can still add background music to individual demos at the demo level.
Background Music
Go to Settings > Workspace Settings > Supademo.
Find the Background Music section.
Open the Background Music dropdown.
Select No background music.
We recommend setting No background music at the global workspace level
This gives you more control over when music is used. You can upload custom tracks that match your brand, then apply them only to the demos where background music makes sense.
Custom Music
To add your own tracks, find the Custom Music section.
Click Upload.
Select the audio file you want to add.
Click Save.
Use the uploaded track at the demo level when a specific demo needs background music.
Player Controls
Create an intuitive viewing experience by choosing which controls appear when viewers interact with your Supademo. All player controls live in one place and appear when a viewer hovers over the bottom of the demo.
Browser bar
Choose whether to display a browser bar above your demo. You can select a light browser bar, a dark browser bar, or no browser bar.
Choose the light or dark option if you want to display a clear title above your demo. Select None to maximize the space available for your demo content.
Progress bar
The progress bar appears when a viewer hovers over the bottom of your demo and shows how far they have progressed.
We recommend keeping the progress bar enabled. It gives viewers a clear sense of their progress without requiring numbered steps throughout the demo.
Open in new tab
Display an external-link icon that allows viewers to open the demo in a standalone browser tab.
We recommend keeping this option enabled in most cases. Consider disabling it when a demo is intended to remain within an internal or gated company resource. Removing the option helps keep viewers within that controlled experience instead of giving them an easily shareable standalone URL.
Last updated
Was this helpful?