> 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/customize/chapters.md). # Chapters Guide, convert, and personalize your Supademos with Chapters. ### What are Supademo Chapters? Chapters help you provide context, [capture leads](/customize/chapters/email-lead-capture.md), [gate content](/customize/chapters/password-protect.md), add conditional branching, and drive action within your Supademos. They can also be personalized using dynamic variables. {% hint style="info" %} To create, edit and personalize chapters programmatically with AI, [try using the Supademo MCP.](https://docs.supademo.com/customize/mcp-server) {% endhint %} {% @supademo/embed url="" demoId="cm1u363tl02wk13b36i8d7bl0" %} 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 * Use for introductions, explanations, and transitions * Use all layout, theme, and branding settings #### [Form Chapters](/customize/chapters/forms-and-lead-capture.md) 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](/customize/chapters/embed-forms-surveys-calendars.md) Integrate external content 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](/customize/chapters/password-protect.md) Protect sensitive or proprietary content: * Set a custom password in the chapter settings * Control access to confidential demos * Limit distribution to intended audiences only * Use for internal demos, partner content, or pre-release information * Viewers must enter the correct password to proceed
Showcases support Form and Password chapters as a gate in front of the whole collection. See [Showcase Chapters](/share/share-multiple-demos/showcase-collection/showcase-chapters.md). ### Add Initial Overlay Chapter To add an initial demo overlay, 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, 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. 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](/customize/voiceovers/instant-ai-voiceover.md) 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 (e.g. navigates users to step 6 in the demo), external links (e.g. calendar booking page), an email lead capture, or a password-protected form. You can also add an animation to your Chapter's button. Finally, you can also dynamically personalize a chapter for different types of viewers by [using dynamic variables.](https://docs.supademo.com/article/113-best-practices) The available Chapter settings are: #### 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 the chapter. Upload your logo image and toggle its visibility on or off depending on the chapter's context. #### Cover Image Give your chapter a cover image. Choose an existing image from any demo step or upload a custom background. #### Heading and Description Customize your chapter's heading and description text. 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. 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: {% content-ref url="/pages/k9bqSZsXtZw65Ybr0FCa" %} [Conditional Branching](/customize/chapters/conditional-branching.md) {% endcontent-ref %}