The Featurebase Changelog widget is a powerful tool for boosting new feature adoption.

It comes in two formats:

• Popup view - The popup (left side of the image above) can either be triggered automatically as soon as you publish a new update or manually by a button click or other interaction.

• Dropdown view - The dropdown (right side of the image above) can be attached to any button or element and it expands next to it on click to showcase the updates in a lighter-weight format.

Demo widgets here →

Installing

The widget can be installed using our JavaScript SDK.

Both the popup and the dropdown version are available from the same function and can be used separately or together.

Example
HTML
Next.js
Vue.js
Svelte
Copy
<!-- Importing the Featurebase SDK -->
<script>!(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);</script>

<script>
Featurebase("initialize_changelog_widget", {
  organization: "yourorg", // Replace this with your organization name, copy-paste the subdomain part from your Featurebase workspace url (e.g. https://*yourorg*.featurebase.app)
  placement: "right", // Choose between right, left, top, bottom placement (Optional if fullscreenPopup is enabled)
  theme: "light", // Choose between dark or light theme
  fullscreenPopup: true, // Optional - Open a fullscreen announcement of the new feature to the user
  locale: "en", // Change the language, view all available languages from https://help.featurebase.app/en/articles/8879098-using-featurebase-in-my-language
  usersName: "John" // Optional - Show the users name in the welcome message for the fullscreen popup
})
</script>

Authentication

If you’ve set up the

Triggering the dropdown view

Add data-featurebase-changelog attribute to a button on your website to open the widget.

If you wish to show the amount of unread updates, add <span id="fb-update-badge"></span> inside the button.

To conditionally render the badge, you can check if the value returned from window.Featurebase("unviewed_changelog_count") is greater than 0.

<button data-featurebase-changelog>
  Open changelog <span id="fb-update-badge"></span>
</button>

Triggering the popup view

How it works

When a user visits your app, it will first store all the previous changelogs as already viewed. When they come back, all new changelogs from that initial visit will be shown as a popup.

The state is stored in the browser's local storage, so it will persist across sessions.

Opening the popup manually

If you wish to use the popup widget to showcase all the latest updates, follow this:

1. Modify the initialize_changelog_widget function above with the following params:

fullscreenPopup: true, 
alwaysShow: true

2. After that, you can call the following function to open up the popup:

// For all updates:
window.Featurebase('manually_open_changelog_popup')

// For a single update:
window.Featurebase('manually_open_changelog_popup', {slug: "urlSlugOfTheRelease"})

// The slug is this part of the url: ..changelog/**introducing-advanced-user-segmentation**