@rlse/widget

@rlse/widget

React component for embedding rlse.dev release notes directly in your application.

Features

• Smart triggers: Manual button, auto-popup on new releases, or both
• Unread badge: Shows count of unseen changes
• App filtering: Show changes for a specific application or all
• Theming: Light, dark, or auto (follows system preference)
• Customizable: Position, colors, labels, and more

Installation

npm install @rlse/widget

Quick Start

import { RlseWidget } from '@rlse/widget';

function App() {
  return (
    <>
      <YourApp />
      <RlseWidget orgSlug="your-org-slug" />
    </>
  );
}

Configuration

Required

Option	Type	Description
orgSlug	string	Your organization slug from rlse.dev

Optional

Option	Type	Default	Description
appSlug	string	—	Filter to a specific application
trigger	'auto' | 'manual' | 'both'	'manual'	How the widget opens
position	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'	Button position
theme	'light' | 'dark' | 'auto'	'auto'	Color theme
limit	number	10	Max changes to display
triggerLabel	string	"What's New"	Button text
modalTitle	string	"Release Notes"	Modal header
primaryColor	string	#3b82f6	Accent color (hex)
autoShowAfter	number	7	Days before auto-popup triggers again

Full Example

<RlseWidget
  orgSlug="acme-corp"
  appSlug="dashboard"
  trigger="both"
  position="bottom-right"
  theme="auto"
  limit={5}
  triggerLabel="🎁 What's New"
  modalTitle="Acme Release Notes"
  primaryColor="#10b981"
  autoShowAfter={3}
/>

Trigger Modes

• manual — Floating button always visible; click to open. Unread badge shows unseen count.
• auto — No button; modal auto-opens on first visit after new releases, respecting autoShowAfter.
• both — Floating button plus auto-popup on new releases.

How "New" Tracking Works

The widget uses browser localStorage to track seen changes — no backend or login required.

• Key: rlse_widget_{orgSlug}_seen
• Value: Array of seen change IDs
• Per-device tracking (phone and laptop tracked independently)

Styling

Use primaryColor to match your brand:

<RlseWidget orgSlug="acme-corp" primaryColor="#ff6b6b" />

Troubleshooting

Widget not appearing

• Verify orgSlug is correct
• Ensure your organization has published public changes
• Check the browser console for errors

Auto-popup not triggering

• Open DevTools → Application → Local Storage
• Clear rlse_widget_* keys to reset seen state
• Verify autoShowAfter is set as expected

Security

• Only public changes are surfaced — no authentication required
• localStorage data stays entirely client-side
• CORS headers restrict the widget API to read-only operations

Support

• Email: [e-mail]
• Dashboard: Settings → Widget Embed