DemoBitesConfiguration
In app Pulse has one widget, designed for you, and a launcher you make your own. Everything is configured from the dashboard, no code changes needed.
The widget
Every pulse uses the same widget, in one light look. There is no design to pick. This is what your visitors see:
| Part | What it shows |
|---|---|
| Launcher | Always visible. Circle and Squircle show the icon and a count of what is new. Pill shows the icon, your label and the count. Clicking it opens the card. |
| Card | A 16:9 poster, the title and the summary, with “Was this helpful?” under the summary, then Watch, Next and See all updates. Thin bars, one per demo, let viewers go back as well as forward. The ← and → keys work too, and so does a swipe on phones. |
| List | See all opens the list. Its header shows your title and Mark all as read. Each row has a thumbnail with the length, a title of up to two lines, one summary line, NEW and MAJOR tags, and the date. |
| Picture in picture | Watch plays the demo picture in picture, with one row captions. At the end, Replay, Next and “Was this helpful?” show over the video. |
| Theatre | Expand opens a theatre over the dimmed app, with the full captions. “Was this helpful?” sits under the title and summary. |
| Phones | The card and the list open as bottom sheets. |
Feedback
- Viewers answer “Was this helpful?” with a thumb up or down in the card, in the theatre and at the end of picture in picture. The list has no feedback.
- Thumbs down asks “What was missing?” with five chips: Too long, Hard to follow, Not what I needed, Something looks wrong, Other. An optional note of up to 500 characters goes with it.
- After Send, the viewer sees “Thanks, this goes straight to the team.”
- Every rating shows in Feedback and in Analytics, under User Feedback. Add email and name to your identity snippet to see who said what. Feedback is part of Growth.
Had a Pulse already? It moved to this widget on its own. There is nothing to change on your side.
Tip: The editor preview shows the widget as Launcher, Open or Playing, and each change appears instantly. Save keeps your settings. Changes go live when you publish.
Content
Every published demo whose Pulse switch is on shows in the Pulse automatically. You choose the demos in Published demos, in the Product Hub, not in the Pulse editor.
- Published demos has three tabs: Library, Product Hub and In-app Pulse.
- In Library, each row has two switches: Product Hub and Pulse. Turn the Pulse switch off to keep a demo out of the Pulse.
- The In-app Pulse tab lists the demos the Pulse shows. Drag them into the order you want.
- The Pulse lists demos only. A release never shows there as one item; each of its demos has its own Pulse switch.
- The Pulse editor holds the launcher settings and the Rules and segmentation tab.
Launcher
The launcher is the one part you customize. You set it in the Customization panel of the Pulse editor:
| Setting | Options |
|---|---|
| Launcher | Floating or My button. Floating draws the launcher on your page. My button draws nothing: your own button opens Pulse by calling window.DemoBitesPulse.open(), see Embed options. |
| Max new items | From 1 to 10. The highest number the launcher’s count shows. |
| Shape | Circle, Squircle or Pill. Greyed out for My button. |
| Icon | Zap, Bell, Sparkles or Gift. |
| Color | Your workspace color, or a custom color. It is also the widget’s single accent. |
| Label | Shown on the pill and on your own button. Leave it empty and your title shows instead. On Circle and Squircle it is only the name screen readers announce. |
| Placement | Left or Right, Right by default. The floating launcher sits in that bottom corner. |
Rules and segmentation Growth
Segmentation is rules in the In app Pulse that pin, limit or hide updates by the viewer’s role, job or plan, from tags your app sends with the embed. You set them in the Rules and segmentation tab of the Pulse editor, beside Customization.
- Tags come from your app, with the embed. A rule reads them and decides what each viewer sees.
- Pin keeps an update at the top for the viewers a rule matches.
- Limit shows an update only to the viewers a rule matches.
- Hide keeps an update away from the viewers a rule matches.
- Segmentation is part of Growth. On Free the tab is there, and opening it offers Growth.
Color
Your color shows on the launcher, and it is the widget’s single accent. Text on it gets the right contrast automatically. Keep your workspace color or pick a custom color in the Customization panel.
Demo buttons
The widget shows no demo button. A demo’s button, its own text and link, appears on your Product Hub pages.
- In the Product Hub editor, under DEMO BUTTONS, set “Open demo buttons in” to Same tab or New tab. New tab is the default.
Widget title
Set the title in the Header section of the Customization panel in the Pulse editor.
Title
Default: “What’s New”. Try “Product Updates”, “Release Notes”, or “New Features”.
- It heads the list that See all opens.
- It is the launcher’s text when Label is empty. When both are set, Label wins.
- Screen readers use it to name the list, the picture in picture player and the theatre.
Domain restriction
Control exactly which domains can load your Pulse widget. This is enforced at the server level, the widget script simply won’t load on unauthorized domains.
Server-side enforcement
Domain checks happen on the server before the script is served. No client-side workarounds possible.
Bare domain format
Enter domains without protocols or paths, just example.com or app.example.com. Ports are supported (localhost:3000).
How it works
- Leave the field empty to allow all domains (default, backward compatible).
- Add one or more domains to restrict where the widget loads.
- Subdomains are distinct, app.example.com and example.com are treated separately.
- Protocols and paths are stripped automatically, just enter the domain name.
“New” indicator
Turn on the Show “new” indicator switch in Settings & embed. The launcher then shows a count of the demos added since the visitor last opened Pulse. In the list, new demos carry a NEW tag.
- Fully anonymous: a local timestamp in the browser, no server tracking and no cookies. No consent banner required.
- The count clears when the widget opens. Playing a demo does not change it.
- NEW tags stay for the rest of that visit. Mark all as read clears them at once.
- The count comes back when you publish new demos.
- On a first visit, only 5 demos are highlighted as new by default, see the settings below.
- Works with the Floating launcher, and with My button through the JavaScript API.
Personalization settings
Two more settings sit under the Show “new” indicator switch in Settings & embed:
From 1 to 20, default 5. Only this many are highlighted as new on a first visit, so a long feed never floods a new visitor.
On by default. Major demos appear before minor ones in the unseen section, so important releases are not buried under smaller updates.
How it works under the hood: The SDK keeps a single local timestamp in the visitor’s browser: the moment they last opened Pulse. On the next visit, demos added after that moment count as new. No personal data is stored or transmitted.