> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/workspace-settings/supademo-settings.md).

# Supademo 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](/create/by-method/create-with-chrome-extension.md) and can be fully customized. Hotspots are used in [Screenshot Supademos](/create/by-demo-type/guided-screenshot-and-video-demos.md) and [Guided HTML](/create/by-demo-type/guided-html-demos.md) demos.

Annotation hotspots are not added to Sandbox demos; Sandbox demos have [Invisible Hotspots](/customize/hotspot/invisible-hotspots.md).

### Appearance

1. Go to **Settings > Workspace Settings > Supademo.**
2. Find the **Hotspots** section.
3. Click **Edit**.
4. 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.*
5. Choose a **Text** color.

   *Try to use a text colour with enough contrast so the hotspot is easy to read.*
6. Choose a **Border Radius**.

   You can select **Sharp**, **Soft**, **Round**, or **Pill**. This controls how rounded the corners of the hotspot appear.
7. Leave **Backdrop** set to **Off.**
8. Choose a **Width**.

   *We recommend leaving the default width set to **Medium**. You can adjust individual hotspot widths later at the demo level.*
9. Choose whether to show the **Step Count**.

   *By default, we recommend keeping the step count **Hidden**.*
10. Set **Show text annotations by default** to **Show**.
11. Set **Show hotspot animation** to **Show**.

    *This adds a pulse animation to the hotspot area and helps guide the viewer's attention.*
12. In the **Navigation** section, choose whether to show navigation arrows.

    *We recommend setting navigation to **Show** for all interactive demos.*
13. Set the **Next button** to **Display**.
14. Set the **Back button** to **Display**.
15. Leave the **Button Text** fields blank.
16. Review the hotspot preview.
17. Click **Save**.

{% hint style="info" %}
**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.
{% endhint %}

### Navigation

For most demos, use these global settings:

1. Set navigation arrows to **Show**.
2. Set the **Next button** to **Display**.
3. Set the **Back button** to **Display**.
4. Leave button text blank.
5. Keep the default button background and text colours.
6. Click **Save**.

{% hint style="info" %}
**Hide navigation only for autoplay-style demos.**

If your demo is meant to [autoplay](broken://pages/fab2d2b73a1ef4d4b51d6088cdc0a7a25e787f53) like a video, navigation arrows may not be needed. For demos where viewers should click through each step, keep navigation visible.
{% endhint %}

***

## **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.

{% hint style="info" %}
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.
{% endhint %}

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

1. Go to **Settings > Workspace Settings > Supademo.**
2. Find the **Chapters** section.
3. Click **Edit** under **Introduction Chapter**.
4. 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.*
5. In **Chapter type**, select **Default**.
6. Choose a **Layout**.

   You can select **Left**, **Center**, or **Right**.

   *This controls where the chapter text, buttons, and cover image appear on the page.*
7. 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.*
8. Adjust **Opacity and Blur**.

   *This controls how visible or blurred the background appears behind your chapter content.*
9. Choose whether to show your **Logo**.

   *We recommend setting this to **Show** if you want the introduction chapter to include your brand.*
10. 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.*
11. 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

1. Go to **Settings > Workspace Settings > Supademo.**
2. Find the **Chapters** section.
3. Click **Edit** under **Call-to-Action Chapter**.
4. 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.
5. In **Chapter type**, select **Default**.
6. Choose a **Layout**.
7. Choose a **Theme**.
8. Adjust the background style.
9. Choose whether to show your **Logo**.
10. Choose a **Cover Image**.
11. Add a title and subtitle that can work across most demos.
12. Add a button if you want viewers to take a specific next step.
13. Review the preview.
14. Click **Save**.

{% hint style="info" %}
**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.
{% endhint %}

***

## **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

1. Go to **Settings > Workspace Settings > Supademo.**
2. Find the **Font Settings** section.
3. Open the **Font Family** dropdown.
4. Select the font you want to apply across your demos.

   This font will apply to hotspot, chapter, and button text.

### Custom Fonts

1. To add your own font, find the **Custom Fonts** section.
2. Click **Upload**.
3. Select the font file you want to use.

   *SupaDemo supports **WOFF2**, **WOFF**, **TTF**, and **OTF** font files up to **5 MB**.*
4. Review the **Preview** section.

   *This shows how the font will appear on hotspot and button text.*
5. Click **Save**.

{% hint style="info" %}
**For best results, upload a** [**variable font.**](https://fonts.google.com/knowledge/glossary/variable_fonts)

A variable font includes multiple weights and styles in one file, which helps your text appear consistently across hotspots, chapters, and buttons.
{% endhint %}

***

## **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

1. Go to **Settings > Workspace Settings > Supademo.**
2. Find the **Background Music** section.
3. Open the **Background Music** dropdown.
4. Select **No background music**.

{% hint style="info" %}
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.
{% endhint %}

### Custom Music

1. To add your own tracks, find the **Custom Music** section.
2. Click **Upload**.
3. Select the audio file you want to add.
4. Click **Save**.

{% hint style="info" %}
Use the uploaded track at the demo level when a specific demo needs background music.
{% endhint %}

***

## **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.

***

### **Benefits**

* **Workspace-wide consistency** — Set defaults once and apply them to all demos automatically.
* **Brand alignment** — Custom fonts, colors, and styling match your company's visual identity.
* **Flexible overrides** — Global settings apply by default, but can be customized at the demo level.
* **Time savings** — No need to configure hotspots, chapters, and controls for every new demo.
* **Professional appearance** — Consistent styling creates a polished viewer experience.

***

### **Use Cases**

<details>

<summary><strong>Establishing Brand Standards</strong></summary>

Set up global hotspot colors, fonts, and chapter themes that match your brand guidelines. Every demo created in your workspace automatically follows these standards without manual setup.

</details>

<details>

<summary><strong>Streamlining Demo Production</strong></summary>

Configure default intro chapters, CTA chapters, and navigation settings once. Your team can focus on content creation while styling is handled automatically.

</details>

<details>

<summary><strong>Creating Consistent Sales Demos</strong></summary>

Set a global CTA chapter with "Book a Demo" or "Start Free Trial" so every sales demo ends with the same call-to-action — no manual configuration required.

</details>

<details>

<summary><strong>Supporting Multiple Use Cases</strong></summary>

Use global defaults for your most common demo type, then override at the demo level for exceptions. Marketing demos can have lead capture forms while support demos link to help resources.

</details>

***

> ✨ **The Result:** A consistent, branded demo experience across your entire workspace — configured once and applied everywhere.