LogPulse / integrations
Add a changelog widget to React & Next.js in 5 minutes
Turn shipped work into updates your React & Next.js users actually see. Add a <15kb, zero-dependency widget with unread badges, markdown release notes, emoji reactions and dark mode—without rebuilding your site.
- 1
Create your workspace and first release
Sign up for LogPulse, choose a workspace slug and publish an update. The example uses acme: replace it with your own workspace slug before publishing.
- 2
Open Your repository → app/layout.tsx
Import Script from next/script and render the script once in the root layout with strategy="afterInteractive". Keep the rest of your existing layout unchanged.
- 3
Publish and verify on your live site
Navigate between client-side routes and confirm that only one widget appears. For plain React, use the effect-based loader below at the application root. Open the widget, read an update and check the unread badge. Your hosted changelog lives at /your-workspace and your roadmap at /your-workspace/roadmap on the LogPulse origin.
Your installation code
Replace acme with your workspace slug. Install one loader only; the custom-trigger example below replaces the default embed, rather than adding another copy.
import Script from "next/script";
// Inside the <body> of your existing app/layout.tsx:
<Script
id="logpulse-widget"
src="https://release-ripple-roadmap.lovable.app/widget.js"
data-workspace="acme"
data-mode="popover"
data-position="bottom-right"
data-theme="auto"
strategy="afterInteractive"
/>Using plain React?
import { useEffect } from "react";
// Mount once beside your app router.
export function LogPulseWidget() {
useEffect(() => {
if (document.getElementById("logpulse-widget")) return;
const script = document.createElement("script");
script.id = "logpulse-widget";
script.src = "https://release-ripple-roadmap.lovable.app/widget.js";
script.dataset.workspace = "acme";
script.dataset.mode = "popover";
script.dataset.theme = "auto";
script.async = true;
document.body.appendChild(script);
// Persist for the app lifetime, including React Strict Mode remounts.
}, []);
return null;
}Use your own What's new button
Give a real button the ID whats-new and connect data-trigger to it. In a framework, add the same data-trigger attribute to your loader and render the button in your component. Keep the target present when the widget initializes.
<button id="whats-new" type="button">What's new</button>
<script src="https://release-ripple-roadmap.lovable.app/widget.js" data-workspace="acme" data-mode="popover" data-position="bottom-right" data-theme="auto" data-trigger="#whats-new" async></script>Prefer the JavaScript API?
Initialize only after the script loads. The manual example is an alternative to the automatic loader.
<script src="https://release-ripple-roadmap.lovable.app/widget.js" data-manual async
onload="LogPulse.init({ workspace: 'acme', mode: 'popover', theme: 'auto' })"></script>
<button type="button" onclick="if (window.LogPulse) LogPulse.open()">What's new</button>
<!-- After the script loads: LogPulse.close() or LogPulse.toggle() -->Common questions
More ways to connect
Less setup. More shipping.
Give your next release an audience.
Up to 10 releases and 100 subscribers, with the ⚡ Powered by LogPulse badge. Pro is €12/month or €99/year.