Widget Embed

Let users see what's new without leaving your app. The rlse widget shows your latest release notes in a modal, embed panel, or dropdown menu. Works with React, Vue, Angular, Svelte, Astro, or vanilla JavaScript.

Widget Variants

Choose the display style that fits your UI:

RlseWidget (Floating Button)

A floating trigger button that opens a modal. Best for standalone pages and full-screen apps. Includes unread badge and customizable position.

RlseWidgetEmbed

An embeddable panel for sidebars, headers, or dedicated release notes pages. Shows changes inline without a modal. Great for dashboards and docs.

RlseWidgetMenu

A dropdown menu for navigation bars or user menus. Compact and unobtrusive. Perfect for user account dropdowns or top nav.

Quick Setup

Option 1: Script Tag (Any Website, Zero Dependencies)

Add this to your HTML, just before the closing body tag:

<script>
  window.rlseWidgetConfig = {
    orgSlug: "your-org-slug"
  };
</script>
<script async src="https://rlse.dev/widget.js"></script>

Option 2: NPM Package (All Frameworks)

npm install @rlse/widget

React / Next.js

// Floating button (default)
import { RlseWidget } from '@rlse/widget';
<RlseWidget orgSlug="your-org-slug" />

// Embedded panel for sidebar/header
import { RlseWidgetEmbed } from '@rlse/widget';
<RlseWidgetEmbed orgSlug="your-org-slug" />

// Dropdown menu for user menus
import { RlseWidgetMenu } from '@rlse/widget';
<RlseWidgetMenu orgSlug="your-org-slug" />

Vue / Nuxt

<script setup>
import { RlseWidget, RlseWidgetEmbed, RlseWidgetMenu } from '@rlse/widget/vue';
</script>

<template>
  <RlseWidget org-slug="your-org-slug" />
</template>

Angular

import { RlseWidgetComponent } from '@rlse/widget/angular';

@Component({
  imports: [RlseWidgetComponent],
  template: `
    <rlse-widget orgSlug="your-org-slug"></rlse-widget>
  `
})

Svelte / SvelteKit

<script>
  import { RlseWidget, RlseWidgetEmbed, RlseWidgetMenu } from '@rlse/widget/svelte';
</script>

<RlseWidget orgSlug="your-org-slug" />

Astro

Astro uses framework islands — import from your preferred framework and hydrate with client:load or client:visible.

---
import { RlseWidget } from '@rlse/widget/react'; // or vue/svelte
---

<RlseWidget orgSlug="your-org-slug" client:load />

Configuration

Trigger Modes

Manual (default)

Floating button always visible in the corner. Click to open modal. Shows unread badge with count of new changes.

Auto

No visible button. Modal auto-opens on first visit after new releases (respects autoShowAfter days setting). Good for announcements.

Both

Best of both worlds: visible button for discovery + auto-popup for announcements when users return after new releases.

Unread Tracking

The widget uses browser localStorage to track seen changes. No backend required—works immediately for all visitors. The badge shows the count of changes since their last visit.

Styling

Use primaryColor to match your brand. The widget automatically adapts to light/dark themes based on your CSS variables or system preference.

Script Tag

window.rlseWidgetConfig = {
  orgSlug: "acme",
  primaryColor: "#ff6b6b",  // Your brand color
  position: "bottom-left",   // Change position
  theme: "dark"              // Force dark mode
};

TypeScript

All packages include TypeScript definitions. Import types from the core package:

import type { WidgetConfig, Change } from '@rlse/widget';