Share updates with changelog widgets

How to get there: Go to Settings → Share & embed → Widgets → click your changelog board card to embed it, or pick What's New Popup / Board Sidebar from the "More options" section below.

Share the latest updates with your users without jumping outside your app or website.

ProductLift provides the following changelog widget options:

What's New Popup

A compact changelog popup that opens on click. Perfect for showing recent updates without taking up space. Pick What's New Popup from the "More options" section on the Widgets page.

Changelog sidebar

Display your changelog on your website or app on a sidebar that is opened on demand. Pick Board Sidebar from the "More options" section, then select your changelog board.

changelog1

Changelog embed

Display your changelog on a particular page of your website by simply pasting the widget code into the desired area. On the Widgets page, click your changelog board card to instantly create an embed widget for it.

Inline comments and reactions

If you let users react or comment on changelog entries inline, the board's Enable commenting setting controls those reactions and comments. Open the changelog board's edit page and turn commenting on (or off) under Voting & Comments to control whether the inline reactions show on your changelog widgets.

Unread badge

When you embed a changelog widget on your site, ProductLift can flag the trigger element when there are new posts a logged-in user hasn't seen yet. This is the classic "red dot" pattern: the user notices a badge, opens the changelog, dot disappears.

How it works:

  1. Your user is logged in via SSO (the SDK identifies them).
  2. The SDK fetches per-user state and adds a productlift-has-unread class to the trigger element when the changelog tab has at least one post with a status change newer than the last time that user opened the changelog.
  3. When the user opens the changelog, ProductLift records the view timestamp on their profile. The SDK clears the badge immediately when the changelog opens and records the view.

The feature is only active for changelog-type tabs. It is not shown for users who have never opened the changelog at all (so new visitors do not see a dot that stays on).

Adding the styling

ProductLift does not ship a default style. The Installation tab on a changelog widget shows a copy-able starter snippet. The simplest version:

.productlift-has-unread {
    position: relative;
}
.productlift-has-unread::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e53935;
    box-shadow: 0 0 0 2px #fff;
}

Paste this into your site's stylesheet and adjust positioning, color, and shape to match your brand. Because the class is applied to your trigger element (the link, button, or icon you control), you can scope the style any way you like.

Showing the number of unread updates

Alongside the productlift-has-unread class, the SDK also sets a data-productlift-unread-count attribute on each flagged trigger. That lets you render the actual count (e.g. "3 new updates") instead of a plain dot.

Pure-CSS approach (no JavaScript needed):

.productlift-has-unread::after {
    content: attr(data-productlift-unread-count);
    /* your own bubble styling */
    background: #e53935;
    color: #fff;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
}

Programmatic approach (React, Vue, or any framework where you want the count in state):

// Preferred: react to the SDK's own signal so you don't race with page load.
window.addEventListener('productlift:unread-loaded', function (e) {
    // e.detail.counts is { widget_key: number, ... }
    const n = e.detail.counts['your-widget-key'] || 0;
    // …update your UI here
});

// Or read it on demand once the SDK has loaded:
const n = ProductLift.getUnreadCount('your-widget-key');

getUnreadCount(key) returns a number (0 when nothing is unread) once the map has loaded, or undefined before it loads. The productlift:unread-loaded event fires exactly once per page load with the full { widget_key: count } map.

How the reset works

When the user opens the widget, three things happen:

  1. The SDK removes the productlift-has-unread class and the data-productlift-unread-count attribute immediately, so the badge disappears without waiting for the network.
  2. A short-lived suppression timestamp is written to localStorage (10 minutes) so a reload before the server has caught up doesn't flicker the badge back.
  3. The SDK sends a mark-viewed request to ProductLift. That records the view timestamp on the user's profile, which is what drives the count on future page loads.

The count is cached per user for up to 1 hour, but the cache key busts automatically whenever the user opens the tab or a new changelog post is published, so counts stay fresh in practice.

Counts count changelog posts only

For now, the unread count only reflects changelog posts. Feedback and roadmap tabs deliberately don't emit unread counts because "unread" is ambiguous there (drafts, status changes, comments). If you need counts for those, let us know your use case.

Set up

See the Install Widgets guide for the full installation reference, including per-platform snippets and SSO options.

Powered by ProductLift