DemoBitesWhat are Moments?
A Momentturns any word or element on your website into a tiny, in-context demo. Users hover to see a silent GIF preview, then click to watch the full Bite in a modal, all without leaving the page they’re on.
What is a Moment?
Help articles, pricing pages, onboarding emails, and feature announcements are full of feature names that beg for a “show me.” A Moment is exactly that: you attach a published Bite to a phrase like “Custom Reports” or “Bulk editing,” and the SDK upgrades it into an interactive trigger with an info icon. Hovering reveals a looping GIF teaser; clicking opens the full narrated demo.
Moments use the same one-line DemoBites SDK that powers Pulse. Add the script once, then drop a single tag anywhere you want a Moment to appear.
See it live
This is a real Moment running on the live production SDK, not a screenshot. Hover the highlighted phrase to preview it, then click to open the full demo.
Our analytics dashboard ships with Custom Reports so your team can slice the numbers any way they like.
Powered by assets.demobites.com/sdk.js. If the trigger looks like plain text, the SDK is still loading, give it a second.
How it works
Once the SDK script is on the page, every Moment goes through the same four steps:
- 1The SDK finds your triggers
On load, the script scans the page for elements carrying the demobites-moment attribute.
- 2It upgrades each trigger
An info icon (ⓘ) is added next to the word, signalling that there's a demo to explore.
- 3Hover reveals a preview
A lightweight popup shows a looping GIF of the Bite plus a short teaser and a call-to-action.
- 4Click opens the full demo
The complete narrated Bite plays in a modal overlay, the user never leaves the page.
Inline & in-context
Lives inside your copy, right where the question comes up.
GIF before video
A silent preview earns the click before the full Bite plays.
No page leave
The demo plays in a modal, users keep their place.
Where to create one
Any published Bite can become a Moment. The Moment configurator lives in two places in the dashboard:
From the Bites grid
Hover a published Bite card and click the target (⊙) icon, between Play and Share, to open the Moment modal.
From the Bite Studio
Click the Moment button in the Studio header, next to Share. The modal lets you pick a template, customise the copy and colour, and copy the embed code with a live preview of the result.
Good to know:the GIF preview is generated automatically from the first few seconds of your Bite when it’s exported, there’s nothing extra to render. You can fine-tune which 5-second window it uses at any time. See Embed & SDK.
When to use Moments
Moments shine anywhere a feature name appears in writing and the reader might want to see it in action:
- Help-center and documentation articles, let readers watch instead of imagine.
- Pricing and feature pages, back up each capability with a quick demo.
- Onboarding checklists and in-app empty states, show the payoff inline.
- Release notes and changelog entries, attach the demo to the feature you shipped.
- Sales and marketing emails (where supported), link a phrase to a live walkthrough.