LogPulse / integrations
Add a changelog widget to Svelte & SvelteKit in 4 minutes
Turn shipped work into updates your Svelte & SvelteKit 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 → src/routes/+layout.svelte
Append the widget script in onMount from your root layout. For plain Svelte, use the same loader in App.svelte.
- 3
Publish and verify on your live site
Test route transitions and a hard refresh. The root layout should remain mounted and load the widget only once. 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.
<script>
import { onMount } from "svelte";
onMount(() => {
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);
});
</script>
<!-- Keep your existing layout markup. -->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.