Embed Changelogs on Your Website

Add a changelog widget to your website or app so customers can read product updates without leaving the page. Choose a button that opens a sidebar or compact popover, or an iframe that is always visible.

For an overview of the product, see the ChangeCrab changelog widget.

Choose your embed

Format	What visitors see	Use it for
JavaScript sidebar	A button opens a panel at the right of the screen	Product navigation or a help menu
JavaScript dropdown / popover	A button opens a compact panel next to the launcher, adapting to available space	A header or dashboard button
Sidebar iframe	An always-visible compact changelog	A section within an existing page
Full-page iframe	An always-visible changelog page	A dedicated updates page

Get your changelog ID

Open the changelog you want to embed.
Choose Settings → Embed Changelog under Embed & API.
Copy the value labelled projectid in the generated code. This is the changelog ID, not its display name or subdomain.

Replace YOUR_CHANGELOG_ID in the examples with that value. The examples use https://changecrab.com for hosted content; you can keep this when your public changelog has a subdomain or custom domain.

Add a JavaScript sidebar widget

Place the button where customers should find updates. Add the configuration and script after the button, preferably just before the closing </body> tag.

<button type="button" class="changebubble" data-crabtype="full">Product updates</button>
<script>
  window.changecrab_config = {
    projectid: "YOUR_CHANGELOG_ID",
    selector: ".changebubble",
    emptycolor: "rgb(208 208 208)",
    activecolor: "rgb(232 23 71)",
    hostedUrl: "https://changecrab.com"
  };
</script>
<script src="https://changecrab.com/embed/embed.js"></script>

The selector .changebubble must match the button class. You can use a different class if you update both values. Load the widget script once per page.

Add a dropdown / popover widget

Use the same setup with data-crabtype="counter" on the button:

<button type="button" class="changebubble" data-crabtype="counter">Product updates</button>
<script>
  window.changecrab_config = {
    projectid: "YOUR_CHANGELOG_ID",
    selector: ".changebubble",
    emptycolor: "rgb(208 208 208)",
    activecolor: "rgb(232 23 71)",
    hostedUrl: "https://changecrab.com"
  };
</script>
<script src="https://changecrab.com/embed/embed.js"></script>

full opens the sidebar; counter opens the compact popover. Set the attribute on each launcher. A type setting alone is not a reliable replacement: initialization reads the first matching launcher's attribute and defaults to full if it is absent.

The unread bubble uses this browser's local history. Opening the widget resets its count. Different browsers or devices can show different counts.

Embed an always-visible iframe

An iframe does not need the widget JavaScript or a launcher. Replace the changelog ID, keep a descriptive title, and adjust the height to suit your page.

Compact sidebar content

<iframe src="https://changecrab.com/sidebar/YOUR_CHANGELOG_ID" title="Product updates" width="100%" height="600" style="border:0"></iframe>

Full changelog page

<iframe src="https://changecrab.com/embedpage/YOUR_CHANGELOG_ID" title="Product changelog" width="100%" height="800" style="border:0"></iframe>

The width="100%" follows the containing element. The height is fixed in these examples; check it with your actual posts and a narrow screen.

React, Vue and other single-page apps

Mount the launcher before loading the script. Add the configuration first, then load embed/embed.js after the component has rendered. Loading it before the launcher exists leaves that element without a click handler. Avoid loading it again on every route change, which can create duplicate listeners or bubbles.

If your app replaces the launcher during navigation, keep it in a persistent navigation component or arrange initialization after the new element mounts. Test your app's route changes as well as its first load.

If the widget does not open

No click response: check that the button exists before the script loads and that its class matches selector.
The wrong widget format opens: check the button's data-crabtype, rather than changing only the configuration's type.
An empty or unavailable changelog: confirm projectid matches the generated account code, and check the changelog's visibility or password settings.
A blocked script or frame: inspect the browser console and network panel. Check blockers and your site's Content Security Policy allow the required ChangeCrab script, stylesheet, API and iframe origins.
Duplicate bubbles or unexpected clicks: make sure the widget script is loaded only once and your app has not initialized it repeatedly.
Unexpected unread count: compare a fresh browser with a returning browser. Local history and whether posts are published affect the result.

badge.js provides an activity badge; it is not the script for these interactive changelog widgets.

Check before publishing

Open the widget, read an actual published post and close it again.
Use Tab to reach the button and Enter or Space to open it; check keyboard access to the close control.
Check the panel on desktop and a narrow mobile screen, including after scrolling and resizing.
Check both a fresh browser and a returning browser.
For iframes, check the width and height with your real content.

Style your widget

Sidebar widget styles control whether compact content or subscribe/navigation controls are shown. These style settings are separate from the launcher's full/counter display format.