Embed options

Adding Pulse to your product is a two line snippet. The Embed button offers it in two versions: Quick install, and With user tracking.

Quick install

The default. Copy it from Embed, the button at the top of the Pulse editor, and paste it into your HTML as is. It works right away, and viewers stay anonymous.

<!-- Add once, anywhere in your page -->
<script src="https://assets.demobites.com/…/sdk.js?ws=your-workspace" defer></script>

<!-- Place where you want the widget -->
<div demobites-pulse="pulse_abc123"></div>

The script loads with defer, so it won’t block your page from rendering. Copy your own snippet from the editor: it carries your workspace and your Pulse.

With user tracking

The same snippet, preceded by a block that tells Pulse who is signed in. It needs a developer: replace the four values with your signed in user’s real values before you embed it. Views then arrive in Signals, and ratings in User Feedback, under your own ids.

<!-- Who is signed in: replace the four values with your signed-in user's real values -->
<script>
  window.demobitesIdentity = {
    userId: "USER_ID",        // your user's id
    accountId: "ACCOUNT_ID",  // their company or account id
    email: "USER_EMAIL",      // shows who rated in User Feedback
    name: "USER_NAME"
  };
</script>

<!-- Add once, anywhere in your page -->
<script src="https://assets.demobites.com/…/sdk.js?ws=your-workspace" defer></script>

<!-- Place where you want the widget -->
<div demobites-pulse="pulse_abc123"></div>

Keep the identity block first. It is set before the deferred SDK runs, so the first view already carries your ids.

Embed code explained

The embed consists of two elements:

My button

To open Pulse from your own button, link, or menu item, choose My button as the launcher. Pulse then draws no floating launcher on your page; the card opens from your button.

1. 1In the Pulse editor, open the Customization panel and set Launcher to My button.
2. 2Make your own button call window.DemoBitesPulse.open(). The snippet behind the Embed button includes a wiring example.
3. 3Publish. Changes go live when you publish.

<!-- Your own button -->
<button onclick="window.DemoBitesPulse.open()">What's new</button>

There is no selector or id to enter. Keep the Pulse embed on the page as usual, and any element that calls window.DemoBitesPulse.open() opens Pulse.

Prefer to decide in code? Add data-trigger="false" to the widget tag instead. Pulse then draws no launcher on that page, and your button opens it the same way.

JavaScript API

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

// Open from any JavaScript context
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';
});

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 floating launcher sits in the bottom corner you pick under Placement, Right by default. Make sure it doesn't overlap with chat widgets, cookie banners, or other floating elements.
• With My button, 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. 1Publish demos to your Product Hub. Pulse shows them automatically.
2. 2To keep a demo out of Pulse, turn off its Pulse switch in Published demos, in the Product Hub.
3. 3Save to keep your changes. The editor preview shows them instantly.
4. 4Hit Publish.

Changes go live when you publish. 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.