What you will build
In this tutorial, you will add a lightweight changelog popup to your website. The Deplyd widget weighs just 1.8KB gzipped, loads asynchronously, and automatically shows your latest changelog entries.
Step 1 — Add the script tag
Place this tag in your HTML. The defer attribute ensures it does not block page rendering:
<script
src="https://deplyd.dev/widget.js"
data-project="my-app"
defer
></script>Step 2 — Customize the widget
Add data attributes to control the look and behavior:
<script
src="https://deplyd.dev/widget.js"
data-project="my-app"
data-position="bottom-right"
data-theme="auto"
data-accent="#0d9488"
defer
></script>Step 3 — Trigger programmatically (optional)
You can open the widget from any button or link using the JavaScript API:
<!-- Trigger the widget with a button -->
<button onclick="Deplyd.open()">
What's new?
</button>Configuration options
| Attribute | Default | Description |
|---|---|---|
data-project | — | Your project slug (required) |
data-position | bottom-right | Widget position: bottom-right, bottom-left, top-right, top-left |
data-theme | auto | Color scheme: auto, light, dark |
data-accent | #0d9488 | Accent color for highlights and buttons |
data-locale | en | Widget language: en, de |
Performance
- 1.8KB gzipped — lighter than a favicon.
- Loads content lazily — only fetches entries when opened.
- Zero dependencies — no jQuery, no React, no framework.
- CDN-cached for fast delivery worldwide.