Four ways to lay it out
Each showcase has one layout, picked when you make it and changed at any time.
- A list beside the demo. The demos run down the side and the one that is playing fills the rest of the page. Good for a product tour with a natural order.
- A checklist. Each demo gets a tick when the viewer finishes it, and the ticks are remembered in their browser, so someone who comes back sees what is left. Good for onboarding: "set up your account", "invite your team", "send your first report".
- A gallery. Cards with each demo's picture and title, for a visitor who wants to pick rather than follow. Good for a features page or a help center.
- Paths that ask first. The page opens with a question you write, such as "What do you want to do?" or "Which team are you on?", with one answer per heading. The viewer picks one and sees only the demos under that heading, plus any you placed before the first heading for everyone. The answer travels in the page's address, so you can send a link that opens straight on one path.
You can also make the showcase play the next demo by itself when one ends, so a viewer who presses play once sees the whole set.
Videos and links between the demos
Not everything is a click-through. A showcase can hold a video from YouTube, Loom or Vimeo among its demos: a talk from your founder, a customer story, a recording of a webinar. It plays in the same frame as the demos. Only the demos count towards the checklist, so a video never stands between a viewer and their ticks. A link can sit in the list too, to your pricing page or your sign-up, for the viewer who has seen enough. Headings split the page into parts, and each item can carry a line of its own explaining why it is there.
Where a showcase goes
Every showcase has its own page on ShotDemo, ready to share as a link. The same showcase also works as an embed on your website, and as a demo hub inside your product: a few lines of script add a launcher to your site or app that opens the showcase and plays each demo without sending anyone away from the page they are on. If you list your own websites in the showcase's settings, only those sites can frame it or show the hub, and the page can ask search engines to list it or stay out of their results.
What viewers get, and what you learn
A viewer only ever sees demos that are live: a draft, a paused demo or one of another workspace never appears, even if it is still listed. Each demo keeps its own analytics, and views that came through a showcase are counted as coming from it, so you can tell the hub's share apart from links and embeds. You see how many people opened each demo, how many finished, and the step where they stopped.
A showcase works well when its demos are short. Three to five demos of six to twelve steps each is a comfortable size for a product tour; an onboarding checklist can be longer, because people come back to it. Put the demo most visitors want first. If your analytics show that almost everyone leaves after the first item, the order is telling you something.
Making one in ShotDemo
Open Showcases in ShotDemo and start a new one. Add your live demos in the order you want, put headings between groups, paste in any video links, and choose the layout. A member of the workspace can preview it before it goes out. Publish it and share its link, or copy the embed code or the hub's script for your app.
A showcase itself costs nothing. It shows your live demos, and the free plan keeps one demo live at a time, so a showcase of several demos holds demos you have bought, at $12 each, once. Every bought demo is live for good, with no badge and no limit on views, and the first one a workspace buys lets the rest of your team in at no cost.
Ideas that work well
- A product tour hub on your website: a gallery of four demos, one per main feature, linked from the navigation.
- An onboarding checklist inside your app for the first week, ending with the feature that makes people stay.
- A sales follow-up page with paths for each kind of buyer: the manager sees the reports, the person who does the work sees the daily flow.
- A help center collection for a release: what changed, as a list of short demos rather than a page of screenshots.
- A launch page that pairs the announcement video with the demos it mentions.
If you are new to interactive demos, start with one good demo and add the showcase when you have three. The guide to writing each step covers how to keep each demo short enough that people finish it, which is what makes a showcase worth opening.