Start

CDN quick start

Install the Releaseo widget with two script tags — no build step, no npm. A real, copy-paste walkthrough for adding the changelog, roadmap, and feature-request widget to any website.

30-second install — paste the snippet, the widget goes live.

You get the global window.releaseo runtime as soon as the loader script runs. Every function on it — init, identify, open, openFocused, track, and the rest — is documented in the SDK API reference.

1. Add the snippet

Paste this at the bottom of your page, right before the closing </body> tag. Swap in your own publish key from Settings → Widget → Install in the dashboard.

<!-- Releaseo widget — paste once, before </body> -->
<script src="https://cdn.releaseo.io/sdk/v0/loader.js"></script>
<script>
  window.releaseo.init({
    publishKey: "pk_live_3f9c2a7b8e1d4056a1b2c3d4",
  });
</script>

That is the entire install. Reload the page and the launcher appears in the bottom-right corner.

Where it sits in a real page

Here is exactly where those two tags go in a complete HTML document — everything else is your own site:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Acme</title>
  </head>
  <body>
    <!-- ↓ your existing site / app markup ↓ -->
    <header>…</header>
    <main>…</main>
    <footer>…</footer>

    <!-- ↓ Releaseo: load the SDK, then start it with your publish key ↓ -->
    <script src="https://cdn.releaseo.io/sdk/v0/loader.js"></script>
    <script>
      window.releaseo.init({
        publishKey: "pk_live_3f9c2a7b8e1d4056a1b2c3d4",
        theme: "auto", // follow the visitor's light/dark preference
        position: "right", // launcher corner: "left" or "right"
        locale: "en",
      });
    </script>
  </body>
</html>

2. Identify the signed-in visitor

If the visitor is logged in, tell Releaseo who they are so the widget can greet them and Contact can prefill safely. Render these values from your server session — never hardcode a real user.

<script>
  window.releaseo.init({ publishKey: "pk_live_3f9c2a7b8e1d4056a1b2c3d4" });

  // Example: values your backend printed for the logged-in user.
  window.releaseo.identify("u_8423", {
    name: "Sara Khalil",
    email: "[email protected]",
    tenantId: "acme",
  });
</script>

For verified identity in the dashboard Contact Inbox, also pass a userHash you generate server-side: HMAC_SHA256(CONTACT_IDENTITY_HMAC_SECRET, userId || email). Keep that secret on your server — never ship it to the browser.

3. Open a tab from your own button

Already have a “What’s new” link in your navbar? Wire it to the widget. This opens the changelog directly, with the tab bar hidden:

<button id="whats-new" type="button">What's new</button>

<script>
  document.getElementById("whats-new").addEventListener("click", function () {
    window.releaseo.openFocused("changelog");
  });
</script>

openFocused() accepts "home", "changelog", "feature_requests", "roadmap", or "help". Use plain window.releaseo.open() to open on the full tab bar.

4. Load without blocking your page

The snippet in step 1 is synchronous and simple. For a production site, load the SDK async so it never delays your first paint. The small “stub queue” below lets you call releaseo.* immediately — any calls made before the script finishes loading are buffered and replayed in order once it is ready.

<!-- 1. Stub: buffers calls until the real SDK loads -->
<script>
  window.releaseo = window.releaseo || { _q: [] };
  ["init", "identify", "open", "openFocused", "close", "track", "on", "off"].forEach(
    function (method) {
      window.releaseo[method] =
        window.releaseo[method] ||
        function () {
          window.releaseo._q.push([method, [].slice.call(arguments)]);
        };
    },
  );
</script>

<!-- 2. Load the SDK without blocking rendering -->
<script src="https://cdn.releaseo.io/sdk/v0/loader.js" async></script>

<!-- 3. Call it right away — these run as soon as the SDK is live -->
<script>
  window.releaseo.init({ publishKey: "pk_live_3f9c2a7b8e1d4056a1b2c3d4" });
  window.releaseo.identify("u_8423", { name: "Sara Khalil", email: "[email protected]" });
</script>

Init options

init() resolves most settings from your dashboard, so publishKey is usually the only required field. Override these only when you need to:

OptionTypeExampleWhat it does
publishKeystring"pk_live_…"Your project key. Required.
theme"auto" | "light" | "dark""auto"Widget color scheme. auto follows the visitor.
position"left" | "right""right"Which corner the launcher sits in.
localestring"en"Widget language.
debugbooleantrueLogs verbose diagnostics to the console — handy while installing.

See the full ReleaseoInitConfig reference for every option, including consent and self-hosting.

Verify it’s working

  1. Reload your page — the launcher should appear in the corner you set.
  2. Click it; the widget drawer opens with your changelog and enabled tabs.
  3. Add debug: true to init() to print setup logs to the browser console if anything looks off.

Next steps

Was this page helpful?