Widget

Overview

The ReleaseGlow widget is a lightweight JavaScript component (~15kb gzipped) that integrates into any web app. It uses Shadow DOM for complete style isolation (no CSS conflicts with your app).

The widget displays both changelog entries and active announcements.

Installation

Option 1 — Script tag (any website)

<script
  src="https://cdn.releaseglow.com/widget/v1.js"
  data-project="proj_xxxxx"
  data-position="bottom-right"
  data-theme="auto"
  data-accent="#6366f1"
  data-locale="en"
  async
></script>

Option 2 — NPM (React, Vue, Angular...)

npm install @releaseglow/widget

// React
import { ReleaseGlowWidget } from '@releaseglow/widget';

function App() {
  return (
    <ReleaseGlowWidget
      projectId="proj_xxxxx"
      position="bottom-right"
      theme="auto"
    />
  );
}

Configuration

Custom Trigger

Instead of the default floating button, you can open the widget from your own UI element:

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

<script>
  // After widget loads
  ReleaseGlow.init({
    projectId: "proj_xxxxx",
    triggerSelector: "#whats-new-btn",
    hideDefaultTrigger: true
  });
</script>

Programmatic API

ReleaseGlow.open();       // Open the widget
ReleaseGlow.close();      // Close
ReleaseGlow.toggle();     // Toggle

Unread Badge (New Updates Count)

A red badge appears on the trigger when there are unread entries. Tracking uses localStorage (anonymous) by default. For more accurate tracking, identify the user:

ReleaseGlow.identify({
  userId: "user_123",        // required
  email: "user@example.com", // optional
  name: "Jane Doe"           // optional
});

Programmatic access to the counter

const count = await ReleaseGlow.getUnreadCount();
// → number

Reactions

Users can react to entries with emojis: 🔥 (fire), ❤️ (love), 👍 (thumbsup).

• Anonymous reactions (based on visitor_id)
• 1 reaction per visitor per entry
• Can be enabled/disabled in Project Settings → Widget

Behavior

• Lazy loading: content is loaded only when the widget is opened
• Responsive: full screen on mobile
• Animations: smooth open/close (CSS transitions)
• Accessibility: keyboard navigation, aria-labels, focus trap
• CSP compatible: no inline styles, no eval()
• The widget shows active announcements at the top, then changelog entries below
• "View all updates →" link at the bottom pointing to the public page

Pass custom attributes to target announcements:

ReleaseGlow.identify({
  userId: "user_123",
  plan: "pro",           // custom attribute
  role: "admin",         // custom attribute
  signupDate: "2025-01"  // custom attribute
});