Embedding the widget
One script tag puts a “What's new” badge on your site. It shows a count of entries your visitor has not seen yet and opens a panel with your latest releases, each linking to its own page on your changelog.
The snippet
Paste this where you want the badge to appear, and replace the workspace with your own. The exact line, with your workspace already filled in, is in your workspace settings under “Embed widget”.
<script src="https://relnotely.com/widget.js"
data-workspace="your-workspace" async></script>Your workspace is the last part of your changelog's address: for https://relnotely.com/acme it is acme. It stays the same if you use your own domain.
Options
All optional, all set as attributes on the same script tag.
| Attribute | Default | What it does |
|---|---|---|
| data-workspace | required | Which changelog to show. |
| data-target | after the tag | A CSS selector, such as #whats-new. The badge is placed inside that element instead of next to the script tag, so the tag itself can live in your page's head or footer. |
| data-label | What's new | The text on the badge. |
| data-limit | 10 | How many entries the panel lists, from 1 to 25. |
<span id="whats-new"></span>
<script src="https://relnotely.com/widget.js"
data-workspace="your-workspace"
data-target="#whats-new"
data-label="Updates"
data-limit="5" async></script>What it does to your page
- It adds one element for the badge and, while the panel is open, one more at the end of the page. Both keep their markup and styles inside a shadow root, so your CSS cannot change how the widget looks and the widget cannot change how your site looks.
- It makes one request, to https://relnotely.com, for your latest published entries. The answer is cached, and a browser that already has it asks only whether it changed.
- It sets no cookies. To show the unread count it keeps the date of the newest entry your visitor has seen in their browser's local storage, on your site, under a key beginning relnotely:last-seen:. That value is never sent to us.
- Titles and excerpts are inserted as text, never as HTML, so nothing written in an entry can run on your page.
- The badge takes the accent colour from your workspace settings. It is a real button: it can be reached with the keyboard, and Escape closes the panel.
- If the request fails, or local storage is blocked, the rest of your page is unaffected.
Content Security Policy
If your site sends a Content-Security-Policy header, it needs to allow the script and the one request the script makes. Add our origin to both directives:
script-src … https://relnotely.com;
connect-src … https://relnotely.com;Nothing else is needed: the widget loads no fonts, images or stylesheets, and its styles live inside the shadow root rather than in a style attribute on your page.
When nothing shows
- The browser console says “Missing data-workspace”: the attribute is absent or misspelled.
- The panel says “Could not load the changelog”: the workspace name is wrong, a Content Security Policy is blocking the request, or the subscription on the workspace has lapsed. The widget is part of the paid plan; your public changelog page stays online either way.
- The panel says “Nothing published yet”: only published entries are listed, never drafts.
- A new entry takes a minute or so to appear for someone already browsing your site, because their browser may reuse the answer it has for up to a minute.
Removing it
Delete the script tag. Nothing else was installed.
Stuck? Write to [email protected].