This guide shows you how to quickly set up a widget directly within your website.
1. Obtaining your identifier
Before you can get started, you need to know where to find the unique identifier for your changelog entries.
Log in to your Releases dashboard and go to the "Widget" section. This is where you can find your workspace identifier. It will look something like that: 6ff4f050-408a-4c0f-9783-79c85bbd674a
2. Implementing the script
Next, you need to implement the following script to your website:
<script src="https://widget.releasesapp.com/js/v1.js" data-releasesapp-key="YOUR-IDENTIFIER" defer></script>Replace YOUR-IDENTIFIER with the identifier from step 1.
3. Calling the script
Next up, you need to call our script that will trigger the panel to open. You can do this with your very own markup. You could, for example, use a bell icon, or just a text like "Updates" your users need to click. It can be any element you like and best fits your own website.
onclick="releasesapp.updates();"So for example, you could link the word "Updates" like this:
<span onclick="releasesapp.updates();">Updates</span>Unread indicator / "Red dot" info
To show an unread indicator (usually via a red dot or something), you will have to add an HTML element with the id releasesapp__unread__badge to your markup.
Additionally, you need to add an inline style of display:none to the same element. You can style that element any way you want to fit your existing design.
<span id="releasesapp__unread__badge" class="add your custom classes here" style="display:none;"></span>If you need help implementing this into your website, contact your webmaster or get in touch.