DemoBitesTemplates
Every Moment is rendered with one of four templates. They share the same trigger and the same Bite, they differ in how much preview and copy the popup shows. Pick one with the demobites-moment-template attribute, or in the Moment modal’s Template tab.
The four templates
| Template | ID | What the popup shows |
|---|---|---|
| Compact | A | GIF (padded) + title + teaser + CTA |
| Standard | B | GIF (flush) + title + teaser + CTA |
| Minimal | C | GIF only + hover play overlay |
| Direct | D | No popup, click opens the video modal |
Compacttemplate=A
Default. GIF with a little breathing room.
A padded GIF preview sits above the full info section, title, teaser text, and a “Watch full demo” call-to-action. The safe, friendly default.
Try the Custom Reports Moment rendered with the Compact template.
<span demobites-moment="your-bite-slug">Custom Reports</span>Standardtemplate=B
Edge-to-edge GIF, same rich info.
Identical to Compact, but the GIF runs flush to the edges of the popup with no padding, a slightly bolder, more media-forward look. Everything else is the same.
Try the Custom Reports Moment rendered with the Standard template.
<span demobites-moment="your-bite-slug"
demobites-moment-template="B">Custom Reports</span>Minimaltemplate=C
Just the GIF. No words.
A compact 220px-wide GIF with no info section and no close button. Hovering reveals a play overlay with a “Watch demo” label. Best when the visual speaks for itself.
Try the Custom Reports Moment rendered with the Minimal template.
<span demobites-moment="your-bite-slug"
demobites-moment-template="C">Custom Reports</span>Directtemplate=D
Skip the preview, straight to the demo.
No popup and no GIF teaser at all. Clicking the trigger opens the full video modal immediately. Ideal for high-intent placements like a primary CTA.
Try the Custom Reports Moment rendered with the Direct template.
<span demobites-moment="your-bite-slug"
demobites-moment-template="D">Custom Reports</span>Light & dark theme
All four templates support a dark theme via demobites-moment-theme="dark". For Compact and Standard it restyles the popup card (dark background, light text, muted CTA); for Minimal and Direct it themes the video modal.
Light (default)
White popup card and modal chrome. Best on light pages.
Dark
Dark popup and modal. Best on dark or branded backgrounds.
Choosing a template
- Reach for Compact or Standard in body copy, the teaser and CTA give the reader context before they commit to watching.
- Use Minimal when the GIF alone sells it, or when space is tight and you don't want a wall of text.
- Use Direct for high-intent spots, a hero CTA, a button, or anywhere you'd rather open the demo than tease it.
- Compact vs Standard is purely the GIF's padding, choose by how media-forward you want the popup to feel.