Widget

Add a "What's new" widget to your website so users can see your latest changelog entries without leaving your app.

The widget is available on Starter and Pro plans.

Quick start

Add a single script tag to your website. That's it — no build step, no dependencies.

html

<script src="https://app.itslive.dev/api/widget/your-slug" defer></script>

Replace your-slugwith your project's slug. You can find the ready-to-copy snippet in your project's dashboard under Share & integrate.

Floating button

The default mode. A button appears fixed in the bottom-right corner of the page. Clicking it opens a popup panel with your latest entries.

html

<!-- Floating button (default) -->
<script src="https://app.itslive.dev/api/widget/your-slug" defer></script>

Position	Fixed, bottom-right (24px margin)
Panel width	400px (responsive on mobile)
Max entries	10 most recent published entries
Button color	Uses your project's brand color

Modal mode

No floating button is injected. Instead, you trigger a centered modal from your own UI — a button in your navbar, a menu item, a link, or anything else. Add data-mode="modal" to the script tag.

html

<!-- Modal mode: no floating button -->
<script
  src="https://app.itslive.dev/api/widget/your-slug"
  data-mode="modal"
  defer
></script>

<!-- Trigger from your own UI -->
<button onclick="ItsLive.open()">What's new</button>

The modal opens centered on the page with a blurred backdrop overlay. Users can close it by clicking outside, pressing the X button, or hitting Esc.

Width	480px (responsive on mobile)
Backdrop	Semi-transparent with blur
Close methods	Click outside, X button, Escape key, `ItsLive.close()`

JavaScript API

The widget exposes a global window.ItsLive object in both modes. Use it to control the widget programmatically.

Method / Property	Description
`ItsLive.open()`	Open the widget panel or modal
`ItsLive.close()`	Close the widget panel or modal
`ItsLive.toggle()`	Toggle the widget open/closed
`ItsLive.entries`	Read-only array of the latest changelog entries

javascript

// Check if widget is loaded
if (window.ItsLive) {
  ItsLive.open();
}

// Safely call from frameworks (React, Vue, etc.)
window.ItsLive?.toggle();

// Access entry data
console.log(ItsLive.entries);
// → [{ id, title, summary, tags, cover_image, date }, ...]

Dark mode

The widget automatically adapts to your site's theme. It detects dark mode by checking (in priority order):

class="dark" on <html>
data-theme="dark" or data-mode="dark"
The actual background color of your page (computed luminance)
prefers-color-scheme: dark (OS preference)

The widget updates in real time when the theme changes — no reload needed. It watches for class and attribute mutations on the <html> element.

Notification badge

In floating mode, a red notification dot appears on the button when there are new entries the user hasn't seen yet.

Storage	Uses `localStorage` to track the last seen entry date
When it shows	Only when there are entries published after the user last opened the widget
When it hides	As soon as the user opens the widget

Examples

React / Next.js

tsx

// components/changelog-button.tsx
'use client';

export function ChangelogButton() {
  return (
    <button onClick={() => (window as any).ItsLive?.open()}>
      What's new
    </button>
  );
}

// app/layout.tsx — add the script tag
<Script
  src="https://app.itslive.dev/api/widget/your-slug"
  data-mode="modal"
  strategy="lazyOnload"
/>

Vue

vue

<template>
  <button @click="openChangelog">What's new</button>
</template>

<script setup>
function openChangelog() {
  window.ItsLive?.open();
}
</script>

Navbar "What's new" link

html

<nav>
  <a href="/features">Features</a>
  <a href="/pricing">Pricing</a>
  <a href="#" onclick="event.preventDefault(); ItsLive.open()">
    What's new
  </a>
</nav>

<script
  src="https://app.itslive.dev/api/widget/your-slug"
  data-mode="modal"
  defer
></script>

Custom notification badge

html

<!-- Show a badge on your own button using ItsLive.entries -->
<script
  src="https://app.itslive.dev/api/widget/your-slug"
  data-mode="modal"
  defer
></script>

<script>
  // Wait for widget to load, then check for entries
  window.addEventListener('load', function() {
    setTimeout(function() {
      if (window.ItsLive && ItsLive.entries.length > 0) {
        document.getElementById('changelog-badge').style.display = 'block';
      }
    }, 500);
  });
</script>