The intro card is the first thing a viewer sees, and the end card is the last. Between them is the product. Teams spend hours on the steps and minutes on the cards, then wonder why viewers finish the demo and go nowhere.
For more on this topic, read How to Change Text and Numbers on a Screenshot.
Short Answer
The intro card says what the viewer will see. The end card offers one next step that fits where the demo sits.
- Write the intro card as a promise the demo keeps.
- Put one primary button and at most one secondary on the end card.
- Change the end card buttons to match each placement.
Why Cards Are Harder than They Look
They seem like decoration, so they are left on defaults.
- An intro card that repeats the product name tells the viewer nothing.
- An end card with four buttons splits attention.
- The same end card on the homepage and in a sales follow-up points at the wrong next step for one of them.
Intro Card
- Say what the viewer will see by the end, such as "Send your first invoice."
- Keep it to a title and one short line.
- Match the page's headline if the demo is embedded.
End Card by Placement
| Placement | Primary button | Secondary button |
|---|---|---|
| Homepage | Start free | See pricing |
| Feature page | Start free | Read the docs |
| Sales follow-up | Book the next call | None |
| Help article | Back to the app | Related article |
| Onboarding | Do this task now | None |
| Investor update | None, or the company site | None |
Button Wording
- Use verbs. Start, book, open, read.
- Say what happens. "Start free" beats "Get started."
- Keep it short.
An Illustrative Worked Example
This example is hypothetical. A team has one demo used on the homepage and in sales follow-ups. The end card says "Learn more."
- They make a separate demo for sales follow-ups.
- The homepage version ends with "Start free" and "See pricing."
- The sales version ends with "Book the next call."
- Each intro card names the result the viewer will see.
The Old Way Versus a Better Way
| Old way | Better way |
|---|---|
| Intro card shows the product name | Intro card names the result the viewer will see |
| End card says "Learn more" | End card names the next action |
| Several buttons on the end card | One primary, at most one secondary |
| One end card for every placement | End card matched to the page or message |
| Cards written last, in a hurry | Cards written first, as the brief for the demo |
Write the Cards First
Writing the intro card before recording is a useful discipline. If you cannot say in one line what the viewer will see by the end, the demo does not have a single story yet. Write the line, then record only the steps that keep that promise.
The end card works the same way. Decide what you want the viewer to do next before you record. That decision shapes where the demo should end. A homepage demo that ends with "Start free" should end on the result the visitor will get after signing up, not on a settings screen.
Check the Cards Against the Page
An embedded demo sits inside a page that already has a headline and a button. Read the three together.
- Does the intro card match the headline's promise?
- Does the end card's primary button match the page's main button?
- If the page already has a signup button just below the embed, does the end card need a second one, or should it point to pricing?
If the page and the demo ask for different actions, the visitor has to choose, and many choose neither.
A 2-Week Rollout Plan
Week 1. List every live demo and its placement. Rewrite each intro card as one result. Set each end card's buttons from the placement table above.
Week 2. Republish each demo. The links stay the same. Watch whether completion holds and whether viewers who finish go on to the next step on your site.
Questions to Ask Before You Start
Answer these before recording. They take a few minutes and prevent most rework.
- What is the one result the demo promises?
- Where does the demo sit, and what is the next step from there?
- Does the end card agree with the page's main button?
- Are the button labels verbs that say what happens?
- Do the cards show the right logo?
Where Proovyt Fits (Full Disclosure)
Proovyt is an interactive demo tool, and this is our blog.
- Every new demo has an intro card and an end card turned on, on every plan. Each can be switched off in Project Settings.
- The end card carries up to two link buttons and a Replay Demo button.
- On Creator, Pro and Team, the cards show the logo from your brand kit.
- On Creator, Pro and Team, analytics count clicks on the card buttons.
Proovyt does not have branching yet, so the end card is the place to offer different paths. See the product page.
Common Mistakes
- Leaving the cards on defaults.
- Four buttons on the end card.
- The same end card everywhere.
- Intro cards that oversell what the demo shows.
The Bottom Line
The cards frame the demo. Promise one result at the start, offer one next step at the end.
Frequently Asked Questions
Can I turn the cards off? Yes. Both are on for every new demo, and each has its own switch in Project Settings. Turning a card off keeps its text for next time.
How many buttons should the end card have? One primary, and at most one secondary.
Should the intro card have a lot of text? No. A title and one line.
Should the homepage and sales demos share an end card? No. Each placement has a different next step.
How do I know the end card works? On Proovyt's Creator, Pro and Team plans, the Analytics tab counts button clicks next to completions. Compare the two. See measuring demo drop-off.