Embed & SDK

Adding a Moment is two parts: include the SDK script once per page, then drop a single tag wherever you want a trigger. The Moment modal in the dashboard writes this code for you, this page is the full reference.

Add the SDK

Include the universal DemoBites SDK once, anywhere on the page (the defer attribute keeps it from blocking your page). Replace your-workspace with your workspace slug. The same script powers Pulse, so if you already use Pulse you don’t need to add it again.

HTML, add once per page

<script src="https://assets.demobites.com/sdk.js?ws=your-workspace" defer></script>

Place a Moment

Wrap any word or phrase in a tag carrying the demobites-moment attribute set to your Bite’s slug. The SDK upgrades it into a trigger automatically.

HTML, place anywhere

<span demobites-moment="your-bite-slug">Custom Reports</span>

Live example

That exact tag, running live: Custom Reports.

Where do I find the slug?The Moment modal fills it in for you and shows the complete, copy-pasteable snippet, including any template, theme, or copy overrides you’ve set. You rarely need to hand-write the tag.

Attributes

Every option is a plain HTML attribute on the trigger tag. Only demobites-moment is required, the rest fall back to your workspace theme and the Bite’s own copy.

demobites-momentbite slugdefault: required

The published Bite to attach. This is the only required attribute.

demobites-moment-templateA · B · C · Ddefault: A

Popup template, Compact, Standard, Minimal, or Direct.

demobites-moment-themedarkdefault: light

Switch the popup / modal to the dark theme.

demobites-moment-iconfalsedefault: true

Hide the trailing info (ⓘ) icon next to the trigger.

demobites-data-descriptiontextdefault: Bite summary

Override the teaser text shown in the popup.

demobites-data-ctatextdefault: “Watch full demo”

Override the call-to-action button label.

demobites-data-color#hexdefault: workspace theme

Override the CTA button colour.

HTML, fully customised

<span
  demobites-moment="your-bite-slug"
  demobites-moment-template="B"
  demobites-moment-theme="dark"
  demobites-data-cta="See it in action">
  Custom Reports
</span>

GIF previews

The looping GIF in Compact, Standard, and Minimal popups is generated automatically when your Bite is exported, there’s nothing to render and nothing to upload. By default it uses the first few seconds of the Bite.

Want a different moment to show? Open Manage Versions on the Bite, go to the Preview tab, click Edit, and slide to the 5-second window you want, then Set. The new preview propagates to every embed of that Moment without changing a line of your HTML.

Updating content

The embed tag references the Bite, not a specific version. Re-export the Bite after an edit and every Moment pointing at it, across all the pages you’ve embedded, serves the new video and GIF automatically. No code changes, no cache clearing, no redeploys.

Tip: Because the SDK is shared, a single <script> include can power any number of Moments, and Pulse, on the same page. Add it once in your layout and place as many triggers as you like.