Chapters

Guide, convert, and personalize your Supademos with Chapters.

What are Supademo Chapters?

Chapters help you provide context, capture leads, gate content, add conditional branching, and drive action within your Supademos. They can also be personalized using dynamic variables.

Formerly known as Overlays and CTAs, Chapters can now appear at any point in your demo—beginning, middle, or end.

You can add multiple Chapters within a Supademo and choose to link the CTA button to an external link or to any step within the same Supademo. In addition, you'll be able to select either a dark or light theme that aligns with your brand.

Chapter Styles

Default Chapters

The standard chapter type for most use cases:

• Display content with all standard customization options

• Include text, images, and buttons

• Perfect for introductions, explanations, and transitions

• Use all layout, theme, and branding settings

Form Chapters

Collect information directly within your Supademo:

• Create personalized forms with custom fields

• Store form data natively in Supademo analytics

• Sync submissions automatically with your CRM (HubSpot, Salesforce, etc.)

• Add validation rules and required fields

• Gate content or qualify leads before they proceed

Embed Chapters

Integrate external content seamlessly into your demo:

• Embed calendar booking links (Calendly, etc.)

• Add third-party forms and widgets

• Display interactive content without leaving the demo

• Create a unified experience with external tools

• Configure embed display and interaction settings

Password Chapters

Protect sensitive or proprietary content:

• Set a custom password in the chapter settings

• Control access to confidential demos

• Limit distribution to intended audiences only

• Perfect for internal demos, partner content, or pre-release information

• Viewers must enter the correct password to proceed

Add Initial Overlay Chapter

To add an initial demo overlay, simply click on "Add Chapter" on the first step. Alternatively, you can create a chapter and drag it to the top position of your demo.

Add Middle Chapter

To add an initial overlay chapter, simply click the "+" button before or after the slide you'd like it to appear. Alternatively, you can create a chapter and drag it to the relevant middle position within your demo.

Add End Call-to-Action Chapter

You can add a chapter to serve as a call-to-action (CTA) at the end of your demo. Simply click on "Add CTA" at the end of the demo. Alternatively, navigate to the edit view of a Supademo and click "CTA" from the Customization tab.

Add Voiceovers to a Chapter

You can add AI Voiceovers to any Chapter to provide additional context or narration for your viewers.

1. Click the Chapter you’d like to edit.

2. Select Voiceover in the Chapter toolbar.

3. Type or paste your desired script into the Voiceover text field.

4. Click Save to apply the voiceover.

Once saved, the voiceover will not autoplay on page load. A viewer must first interact with the demo before the voiceover will play in the first step. If autoplay is enabled, voiceovers still only trigger once the user takes their first action.

Customize a Chapter

You can customize your chapter by adding a title, description, and CTA button(s) to it. CTA buttons can be internal links (i.e. navigates users to step 6 in the demo), external links (i.e. calendar booking page), an email lead capture, or a password-protected form.

You can also add an animation to your Chapter's button to drive more engagement and clicks. Finally, you can also dynamically personalize a chapter for different types of viewers by utilizing dynamic variables.

These settings help you create a cohesive, branded experience that matches your company's style while maintaining flexibility for different use cases across your demos.

Here are all the Chapter settings available:

Layout

Choose how your chapter content is positioned on the screen.

• Left-aligned: Content aligned to the left side

• Center-aligned: Content centered on the screen

• Right-aligned: Content aligned to the right side

Theme

Set the visual mood of your chapter with theme options. Choose

• Dark: Dark background with light text

• Light: Light background with dark text

• Custom: Select a custom color of your choice

Opacity and Blur

Fine-tune your chapter's background by adjusting opacity and blur levels. Increase blur to soften your background image and make text more readable, or adjust opacity to control how much of the background shows through.

Logo

Add your company logo to reinforce your brand identity throughout the demo. Upload your logo image and toggle its visibility on or off depending on the chapter's context. This creates a consistent branded experience across your entire Supademo.

Cover Image

Set the visual foundation for your chapter with a cover image. Choose an existing image from any demo step or upload a custom background that matches your message. The cover image establishes the visual tone and draws viewers into your content.

Heading and Description

Customize your chapter's heading and description text to match your brand voice. Click any text element to format it, adjust colors, and add dynamic variables using {{variable_name}} syntax. Dynamic variables let you personalize content for each viewer automatically.

Buttons

Design your chapter's call-to-action buttons to guide viewers through your demo. Click any button to customize its text, formatting, and behavior. Add links to other demo steps or external URLs, and choose from various button animations to create engaging interactions. Click Add Button to include additional calls-to-action as needed.

Save or Delete

• Click Save to apply your changes

• Click the 🗑️ icon to delete the chapter if needed

Adding Conditional Branching

You can use Chapters and multiple buttons to let viewers "choose their own adventure" and jump to different parts of your Supademo experience. For instance, this can be:

• Adding a button to start the Supademo from the beginning

• Adding a secondary button to skip to a different feature

• Adding a third button to schedule a personalized demo directly

Learn more about conditional branching below:

Conditional Branching