Chapter slides
Add title cards, section breaks, quotes, stats and call-to-action slides between your product screens, and style them from your brand kit.
Chapter slides give a tour a shape. A title card sets up what the viewer is about to see, a section break tells them where they are, and a quote or a stat lands the proof before the next screen. They're built from your brand kit, so every slide looks like it came from your own design team.
You're in the right place when you want a card between product screens, such as an opening title, a chapter heading, a customer quote or a closing ask.
What kinds of slide can you add?
A slide is a screen of its own in the storyboard, not a step on a product screen. There are five templates:
| Template | What it shows | New slides start with |
|---|---|---|
| Title card | An eyebrow, a large headline and a subline. The opening of a tour. | "Product tour" / "A tour of the platform" |
| Section break | A chapter heading between parts of the tour. | "Chapter 1" / "Getting set up" |
| Quote | A customer quote with its attribution. | A sample quote and "VP Sales, Northwinds" |
| Stat | One big number with a line of context. | "3×" / "more qualified conversations per rep" |
| Call to action | A headline with a button. The close. Give the button a link and it opens your page; leave it empty and a click moves on. | "Next step" / "See it on your own data" / "Book a meeting" |
Replace the starting words with your own before you publish. They're placeholders.
How do you add a slide?
Open Add screens
Select Add screen on the canvas toolbar, or at the bottom of the storyboard.
Pick a template
Under Chapter slide, select Title card, Section break, Quote, Stat or Call to action. The slide is added at the end of the tour straight away, and the builder shows it with the slide panel open.
Move it into place
Drag the slide's card in the storyboard to where it belongs, such as first for a title card or between two chapters for a section break.
Write it
Click the words on the canvas and type over them, or use the fields in the slide panel. See the next section.
You can change a slide's template later without losing its words.
What's in the slide panel?
Select a slide in the storyboard and the slide panel opens on the right. It has two sections, Slide and Design.
Slide
| Field | What it does |
|---|---|
| Template | Switches between the five templates. The words carry over; only the layout changes. |
| Eyebrow | The short line above the headline, such as "Chapter 2". Up to 60 characters. |
| Headline | The main line. Up to 160 characters. |
| Subline | The line under the headline, on Title card, Section break and Call to action. Up to 280 characters. |
| Attribution | Who said it, on Quote. Up to 280 characters. |
| Context line | What the number means, on Stat. Up to 280 characters. |
| Button label | The button's words, on Call to action only. Up to 40 characters. |
| Button link | Where the button goes, on Call to action only. A full web address starting with https://. Leave it empty and the button is a label: clicking it moves to the next screen, like the rest of the slide. |
| Opens in | Shows once Button link is filled in. New tab (the default) keeps the tour open behind the page; Same tab leaves the tour for the page. |
Text fields save when you click out of them.
Design
| Setting | What it does |
|---|---|
| Stage | The slide's background. Dark stage is near-black with your accent color. Light is white with your primary color. Brand background uses your brand kit's background and text colors. Brand color fills the slide with your primary color and white text. |
| Alignment | Left or Centered. |
| Headline size | S, M or L. |
| Duration | How long the slide stays before the tour moves on. Auto sets the time from the number of words, shown as "Auto — reads in ~5s". Or pick 3, 5, 8, 10, 15 or 20 seconds. |
| Background image | Upload a picture, or pick one with Library from the images in your content library. The ✕ removes it. The image sits behind a tint in the stage's color, so the words stay readable. |
Design changes save as soon as you make them.
How do you edit a slide on the canvas?
The words on the canvas are editable. Click the eyebrow, headline, subline or button label and type. Your change saves when you click somewhere else, and the slide panel updates to match.
This is the fastest way to write a slide, because you see the line breaks and sizes as the viewer will.
Where do a slide's colors and fonts come from?
From your brand kit, under Settings → Brand. Slides use its:
- Logo, shown at the top of the slide.
- Colors, which the Stage options draw on.
- Headline and body fonts.
- Button shape, for the Call to action button.
There's no font or color picker on the slide itself. Change the brand kit instead, which keeps every slide in a tour consistent. See Brand.
How does a slide play?
In the tour player, a slide holds for its Duration, then the tour moves to the next screen by itself. The viewer can click anywhere on the slide to move on sooner.
With Auto, short slides hold for as little as 2.5 seconds and wordy ones for up to 12. Pick a fixed time when a slide needs longer, such as a quote you want to sink in.
Why can't you add steps to a slide?
Slides play on their own: they hold, then advance. There's nothing on them to point at, so Add step is greyed out while a slide is selected, and a slide's storyboard card shows a slide tag instead of a step count. Put your tooltips on the product screens around it.
Test it
Your slides work when:
- You select Preview and each slide appears in the right place in the tour.
- The slide uses your logo, colors and fonts.
- Each slide holds long enough to read, then moves on by itself.
- Clicking a slide moves to the next screen.
Troubleshooting
| Issue | What to check |
|---|---|
| A slide has the wrong colors or fonts | Check Settings → Brand. Slides always follow the brand kit. |
| The words on a background image are hard to read | Try a different Stage, since the tint takes its color from it, or pick a calmer image. |
| Library isn't shown under Background image | Your content library has no images yet. Use Upload. |
| A slide goes by too fast | Change Duration from Auto to a fixed time. |
| A new slide went to the end of the tour | New slides always land at the end. Drag them into place in the storyboard. |
| An edit made on the canvas didn't save | Click outside the text so it can save, before you switch screens. |
FAQ
Can I put a tooltip or button on a slide?
No. Steps only go on product screens. A Call to action slide has its own button, with a Button link for where it goes.
Where does the Call to action button go?
Wherever you point it. Fill in Button link in the slide panel with the page's address, such as your booking link, and choose New tab or Same tab. With no link, the button is part of the slide's design: clicking anywhere on the slide, the button included, moves the viewer to the next screen.
Can I use my own fonts on a slide?
Yes, through your brand kit. Slides use its headline and body fonts.
Can I duplicate a slide?
Not in the builder. Add a new one with the same template and copy the words across.
Do slides count as screens?
Yes. They appear in the storyboard and in the screen count, with a live preview as their thumbnail.
Related articles
Edit what's on a screen
Change text and images on an HTML screen, hide or blur private details, and add actions such as clicks and count-ups that play with your steps.
Video screens
Use the timeline to place steps at the right moment in a recorded take, add zooms and pans, loop a stretch while a step waits, and follow a take through processing.