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("init_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)
  dropdown: {
    enabled: true, // Add this to enable the dropdown view of the changelog
    placement: "right", // Add this to change the placement of the dropdown
  },
  popup: {
    enabled: true, // Add this to enable the popup view of the changelog
    usersName: "John", // This will show the user's name in the popup as a greeting
    autoOpenForNewUpdates: true, // This will open the popup for new updates
  },
  theme: "light", // Choose between dark or light theme
  locale: "en", // Change the language, view all available languages from https://help.featurebase.app/en/articles/8879098-using-featurebase-in-my-language
})
</script>

Authentication

If you’ve set up the

Could not load article.

Could not load article.

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

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-segmentationTriggering the dropdown view

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.

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

Unread changelog count

If you wish to get the number of unread changes, you can listen for them from the callback of the window.Featurebase function. This allows you to add your own logic for displaying:

Featurebase(
  'init_changelog_widget',
  {
    organization: 'yourorg',
    // ... rest of the params   
  },
  (error, data) => {
    if (data?.action === 'unreadChangelogsCountChanged') {
      console.log('unreadChangelogsCountChanged', data.unreadCount);
    }
  }
);