Render updates in your own UI

Use the headless changelog when you want published Glean Feed updates inside an interface you design—a page, menu, feed, or modal. Glean Feed provides public update data and canonical links; your product controls the markup and interactions. If you are still choosing an integration, start with the Headless SDK overview. It gives you two things:

Read published entries for a workspace.
An unread badge tracked per browser, so returning customers see what’s new since their last visit.

Everything here is anonymous and public — no login, no accounts, no credentials. You can call it directly from the browser.

Quickstart: fetch and render updates

Add a container where updates should appear:

<section>
  <h2>What's new</h2>
  <div id="updates"></div>
  <a id="all-updates">View all updates</a>
</section>

Fetch the first page, render each title and publication date, and link to the full update on your public changelog:

<script type="module">
  const workspaceId = "YOUR_WORKSPACE_ID";
  const response = await fetch(
    `https://app.gleanfeed.com/api/sdk/changelog?workspaceId=${workspaceId}&limit=5`,
  );
  if (!response.ok) throw new Error(`Could not load updates (${response.status})`);

  const page = await response.json();
  const list = document.getElementById("updates");

  for (const entry of page.entries) {
    const link = document.createElement("a");
    link.href = `${page.changelogUrl}#${entry.id}`;
    link.textContent = `${entry.title} — ${new Date(entry.publishedAt).toLocaleDateString()}`;
    link.style.display = "block";
    list.append(link);
  }

  document.getElementById("all-updates").href = page.changelogUrl;
</script>

Publish an update in Glean Feed, reload your page, and confirm its title appears. Selecting the title should open that exact update on your public changelog. The endpoint returns public, published entries that fit the workspace’s current plan limit. Entries labeled Archived (plan limit) in the dashboard are preserved but excluded from this endpoint and the public portal. They return automatically when the workspace gains capacity. The endpoint does not require an API key and supports cross-origin browser requests.

Concepts

Pagination

Each response includes hasMore and nextOffset. When hasMore is true, request the next page with the returned offset:

const nextPage = await fetch(
  `https://app.gleanfeed.com/api/sdk/changelog?workspaceId=${workspaceId}&limit=20&offset=${page.nextOffset}`,
).then((response) => response.json());

Continue until hasMore is false. Updates are returned newest first.

Unread state

Unread state is a timestamp stored in the current browser’s localStorage. It is not a Glean Feed account record, so it does not follow a customer to another browser or device. The helpers compare that timestamp with the publishedAt values in the page you fetched. When storage is unavailable, the helpers treat the changelog as never seen and silently skip persistence. Your updates still render.

Links to full updates

changelogUrl is the workspace’s canonical public changelog—using its active custom domain when it has one. Link all updates to this URL, or link one entry to ${changelogUrl}#${entry.id}. Glean Feed resolves the URL on every response, so your links follow later domain changes.

Reference

What you need

Value	Where to find it	Secret?
Workspace ID	Settings → General	No — safe to ship in the browser
Glean Feed origin	Your app URL, e.g. `https://app.gleanfeed.com`	No

Public endpoint

The read endpoint lives under your Glean Feed origin and sends permissive CORS headers, so you can call it directly from any page.

curl "https://app.gleanfeed.com/api/sdk/changelog?workspaceId=YOUR_WORKSPACE_ID&limit=20&offset=0"

Query parameters:

Parameter	Required	Default	Notes
`workspaceId`	Yes	—	Your workspace ID.
`limit`	No	`20`	Entries per page, `1`–`50`.
`offset`	No	`0`	Skip this many entries (for paging).

Response:

{
  "entries": [
    {
      "id": "b3f47bc7-…",
      "title": "Dark mode is here",
      "bodyHtml": "<p>You can now switch to a dark theme…</p>",
      "version": "2.4.0",
      "publishedAt": "2026-07-03T18:00:00.000Z"
    }
  ],
  "hasMore": true,
  "nextOffset": 20,
  "changelogUrl": "https://feedback.acme.com/changelog"
}

bodyHtml is sanitized on the server, so it’s safe to inject into the DOM. Only public published entries within the current plan limit are ever returned — drafts, plan-limit archived entries, and internal fields never leave the server. Paginate by passing nextOffset back as offset until hasMore is false. For authenticated server workflows that also need drafts or administrative changelog operations, use the REST API and review authentication and rate limits. The public headless endpoint above has separate per-IP protection; retry with backoff if it returns 429.

JavaScript helpers

Load the widget script once, then call the GleanFeed.changelog helpers. Setting data-workspace mounts the prebuilt launcher too; omit it to load the helpers alone.

<script src="https://cdn.gleanfeed.com/widget.js"></script>
<script type="module">
  const config = {
    workspaceId: "YOUR_WORKSPACE_ID",
    portalBaseUrl: "https://app.gleanfeed.com",
  };

  const { entries, hasMore, nextOffset, changelogUrl } =
    await window.GleanFeed.changelog.getEntries(config, { limit: 10 });
</script>

Using a bundler instead? Import the same helpers from the package:

import { getChangelogEntries } from "@gleanfeed/widget";

const page = await getChangelogEntries(
  { workspaceId: "YOUR_WORKSPACE_ID", portalBaseUrl: "https://app.gleanfeed.com" },
  { limit: 10 },
);

Add an unread badge

Track unread per browser with a “last seen” timestamp in localStorage. The helper does the bookkeeping:

const config = { workspaceId: "YOUR_WORKSPACE_ID", portalBaseUrl: "https://app.gleanfeed.com" };
const cl = window.GleanFeed.changelog;

const { entries } = await cl.getEntries(config, { limit: 20 });

// Count entries newer than this browser's last visit.
const unread = cl.countUnreadSince(entries, cl.getLastSeen(config.workspaceId));

// When the customer opens your panel, record it — the badge clears.
cl.markSeen(config.workspaceId);

This longer dependency-free example adds a trigger, unread badge, five-entry dropdown, per-entry links, and a View all link. Opening the panel clears this browser’s badge.

<!-- Drop this trigger anywhere in your app — a nav item, a bell, a menu row. -->
<div class="gf-whatsnew">
  <button id="wn-trigger" aria-haspopup="dialog" aria-expanded="false">
    What's new
    <span id="wn-badge" style="display: none"></span>
  </button>

  <div id="wn-panel" role="dialog" aria-label="What's new" hidden>
    <div id="wn-list"></div>
    <a id="wn-more" target="_blank" rel="noopener">View all updates →</a>
  </div>
</div>

<script src="https://cdn.gleanfeed.com/widget.js"></script>
<script>
  const cl = window.GleanFeed.changelog;
  const config = { workspaceId: "YOUR_WORKSPACE_ID", portalBaseUrl: "https://app.gleanfeed.com" };

  const trigger = document.getElementById("wn-trigger");
  const panel = document.getElementById("wn-panel");
  const list = document.getElementById("wn-list");
  const more = document.getElementById("wn-more");
  const badge = document.getElementById("wn-badge");

  // Escape untrusted-looking text before putting it in innerHTML.
  const esc = (s) => {
    const d = document.createElement("div");
    d.textContent = s;
    return d.innerHTML;
  };

  // A one-line plain-text snippet from the sanitized HTML — no parsing needed,
  // just read textContent. The full post lives on your changelog page.
  function snippet(html, max = 100) {
    const d = document.createElement("div");
    d.innerHTML = html;
    const text = d.textContent.trim();
    return text.length > max ? `${text.slice(0, max).trimEnd()}…` : text;
  }

  async function load() {
    const { entries, changelogUrl } = await cl.getEntries(config, { limit: 5 });

    more.href = changelogUrl; // "View all" → your public changelog page

    list.innerHTML = entries
      .map(
        (e) => `
          <a class="wn-item" href="${changelogUrl}#${e.id}" target="_blank" rel="noopener">
            <span class="wn-title">${esc(e.title)}</span>
            <time>${new Date(e.publishedAt).toLocaleDateString()}</time>
            <span class="wn-snippet">${esc(snippet(e.bodyHtml))}</span>
          </a>`,
      )
      .join("");

    // Unread badge: everything published since this browser last opened the panel.
    // Toggle `style.display`, not the `hidden` attribute — the badge's CSS
    // `display: inline-flex` would override `[hidden]`, so `badge.hidden` can't
    // reliably hide it. An inline style always wins over the stylesheet.
    const count = cl.countUnreadSince(entries, cl.getLastSeen(config.workspaceId));
    badge.textContent = count > 9 ? "9+" : String(count);
    badge.style.display = count > 0 ? "inline-flex" : "none";
  }

  function open() {
    panel.hidden = false;
    trigger.setAttribute("aria-expanded", "true");
    cl.markSeen(config.workspaceId); // opening the panel clears the badge
    badge.style.display = "none";
  }
  function close() {
    panel.hidden = true;
    trigger.setAttribute("aria-expanded", "false");
  }

  trigger.addEventListener("click", () => (panel.hidden ? open() : close()));
  document.addEventListener("keydown", (e) => e.key === "Escape" && close());
  document.addEventListener("click", (e) => {
    if (!e.target.closest(".gf-whatsnew")) close(); // click outside to dismiss
  });

  load();
</script>

Style it however you like — position #wn-panel under your trigger, size it, add your own type and colors. A minimal starting point:

.gf-whatsnew {
  position: relative;
  display: inline-block;
}
#wn-panel {
  position: absolute;
  right: 0;
  margin-top: 8px;
  width: 320px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  z-index: 50;
}
.wn-item {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.wn-item:hover {
  background: #f3f4f6;
}
.wn-title {
  font-weight: 600;
}
.wn-snippet {
  color: #6b7280;
  font-size: 13px;
}
#wn-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  align-items: center;
  justify-content: center;
}

Optional: React

Same helpers, wrapped in a component. This renders the trigger, badge, dropdown, per-entry links, and “View all” — using the framework you already have.

"use client";

import { useEffect, useRef, useState } from "react";
import {
  countUnreadSince,
  getChangelogEntries,
  getLastSeen,
  markSeen,
  type GleanFeedChangelogEntry,
} from "@gleanfeed/widget";

const config = { workspaceId: "YOUR_WORKSPACE_ID", portalBaseUrl: "https://app.gleanfeed.com" };

const snippet = (html: string, max = 100) => {
  const d = document.createElement("div");
  d.innerHTML = html;
  const text = d.textContent?.trim() ?? "";
  return text.length > max ? `${text.slice(0, max).trimEnd()}…` : text;
};

export function WhatsNew() {
  const [entries, setEntries] = useState<GleanFeedChangelogEntry[]>([]);
  const [changelogUrl, setChangelogUrl] = useState("");
  const [unread, setUnread] = useState(0);
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    getChangelogEntries(config, { limit: 5 }).then((page) => {
      setEntries(page.entries);
      setChangelogUrl(page.changelogUrl);
      setUnread(countUnreadSince(page.entries, getLastSeen(config.workspaceId)));
    });
  }, []);

  // Close on outside click.
  useEffect(() => {
    const onClick = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  function toggle() {
    if (!open) {
      markSeen(config.workspaceId); // opening clears the badge
      setUnread(0);
    }
    setOpen((v) => !v);
  }

  return (
    <div className="gf-whatsnew" ref={ref} style={{ position: "relative" }}>
      <button aria-expanded={open} aria-haspopup="dialog" onClick={toggle} type="button">
        What's new{unread > 0 && <span> ({unread > 9 ? "9+" : unread})</span>}
      </button>

      {open && (
        <div aria-label="What's new" role="dialog">
          {entries.map((e) => (
            <a key={e.id} href={`${changelogUrl}#${e.id}`} rel="noopener" target="_blank">
              <strong>{e.title}</strong>
              <time>{new Date(e.publishedAt).toLocaleDateString()}</time>
              <p>{snippet(e.bodyHtml)}</p>
            </a>
          ))}
          <a href={changelogUrl} rel="noopener" target="_blank">
            View all updates →
          </a>
        </div>
      )}
    </div>
  );
}

Notes and limits

Only published entries are returned; limit is capped at 50 and requests are rate-limited per IP.
bodyHtml is server-sanitized (a strict tag/attribute allowlist), so it’s safe to render.
Unread is per browser, so it won’t follow a customer across devices — that’s the trade-off for a zero-login, zero-account badge.
The badge counts within the entries you fetch. The dropdown above fetches 5, so its badge maxes out at 5. If you want a precise “9+”, fetch a larger limit for the count (you can still render only the first few).

​Quickstart: fetch and render updates

​Concepts

​Pagination

​Unread state

​Links to full updates

​Reference

​What you need

​Public endpoint

​JavaScript helpers

​Add an unread badge

​Optional: build a “What’s new” dropdown

​Optional: React

​Notes and limits