DemoBitesDemoBites
Docs
/
PulseEmbed options

Embed options

Adding Pulse to your product is a two-line snippet. For more control, use the custom trigger mode or the JavaScript API to open the widget programmatically.

Basic embed

Copy the embed code from the Settings & Integration tab in the Pulse editor and paste it into your HTML — ideally just before the closing </body> tag.

HTML
<div id="demobites-pulse" data-uid="pulse_abc123"></div>
<script src="https://stream.demobites.com/your-workspace/ps/pulse-sdk.js" defer></script>

That’s it. The script loads asynchronously (defer), so it won’t block your page from rendering.

Embed code explained

The embed consists of two elements:

<div>Anchor element
  • id="demobites-pulse"Required. The SDK looks for this element on the page.
  • data-uidYour Pulse feed ID. Tells the SDK which feed to load.
  • data-trigger="false"Optional. Hides the default trigger button (see Custom Trigger below).
<script>SDK loader

Loads the Pulse SDK from your workspace’s CDN endpoint. The script is workspace-specific and includes your feed configuration. Use the defer attribute to avoid blocking page load.

Custom trigger

If you want to open Pulse from your own button, link, or menu item instead of the default floating trigger, enable “Custom trigger” mode in the Settings tab.

  1. 1Enable "Custom trigger" in the Pulse editor Settings & Integration tab.
  2. 2The embed code will automatically include data-trigger="false" to hide the default bubble.
  3. 3Use the JavaScript API (below) to open the widget when your custom element is clicked.
Example: Custom trigger
<!-- Your custom button -->
<button onclick="window.DemoBitesPulse.open()">
  What's New
</button>

<!-- Pulse embed (trigger hidden) -->
<div id="demobites-pulse" data-uid="pulse_abc123" data-trigger="false"></div>
<script src="...pulse-sdk.js" defer></script>

JavaScript API

Once the SDK loads, it exposes a global window.DemoBitesPulse object with the following methods:

.open()

Opens the Pulse panel. If the panel is already open, this is a no-op.

.close()

Closes the Pulse panel.

.toggle()

Toggles the panel — opens it if closed, closes it if open.

.hasNew()

Returns true if there are unseen Bites, false if everything has been seen, or null if the SDK is still loading data.

.onNewStatus(cb)

Registers a callback that fires with true or false when the SDK determines whether new content exists. Fires immediately if data has already loaded. Also fires with false after the panel is opened (so you can clear your own indicator).

JavaScript
// Open from any JavaScript context
document.querySelector('#my-updates-btn')
  .addEventListener('click', () => {
    window.DemoBitesPulse.open();
  });

// Show a "new" dot on your own button
window.DemoBitesPulse.onNewStatus(function(hasNew) {
  document.getElementById('my-dot').style.display
    = hasNew ? 'block' : 'none';
});

Tip: For custom triggers, prefer .onNewStatus(callback) over .hasNew() — it handles the async loading automatically and fires your callback as soon as data is available. It also fires again with false after the panel opens, so your custom indicator stays in sync.

Placement tips

Where you place the embed code affects how users discover Pulse:

  • Place the snippet just before </body> on your main application shell or layout — this ensures Pulse is available on every page.
  • For single-page apps (React, Vue, Next.js), add it to your root layout or index.html.
  • The default trigger button appears in the bottom-right corner. Make sure it doesn't overlap with chat widgets, cookie banners, or other floating elements.
  • If you use the custom trigger mode, place your button where users naturally look for updates — a top nav bar, a sidebar menu item, or a help menu.

Updating content

One of Pulse’s key benefits is that content updates require zero code changes:

  1. 1Add or remove Bites in the Pulse editor.
  2. 2Reorder items, toggle Major/Minor status as needed.
  3. 3Hit "Generate & Publish" — the live widget updates immediately.

The embed code stays the same forever. Users see the latest content the next time they open the widget — no frontend deploys, no cache clearing, no coordination with your engineering team.

ConfigurationWorkspaces