Demo widgets here →

The Featurebase Changelog widget is a powerful tool for boosting the adoption of new features by bringing updates directly into your product.

It comes in three formats:

• Card view (recommended) - A non-intrusive card in the corner of your product showcasing your latest update (on the screenshot). On click, it expands it to a popup view or optionally sends the user to your changelog page.

• Popup view - A popup that can be triggered automatically when you publish a new update, or manually by clicking a button or other interaction.

• Dropdown view - A dropdown widget that can be attached to any button or element and expands next to it on click to showcase updates in a lighter-weight format.

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)
  
  changelogCard: {
    enabled: true, // Enable the changelog card
    // Uncomment these for more control over layout and styling
    // layout: {
    //   position: "bottom-left", // 'bottom-left' or 'bottom-right'
    //   marginBottom: 20, // Margin from bottom in pixels
    //   marginSide: 20, // Margin from side in pixels
    //   maxWidth: 400, // Maximum width in pixels
    // },
    // theme: {
    //   borderRadius: 8, // Border radius in pixels
    //   backgroundColor: "#ffffff", // Card background color
    //   titleColor: "#242837", // Title text color
    //   descriptionColor: "#404864", // Description text color
    //   borderColor: "#F8F9FC", // Border color
    // },
    // openInNewTab: false, // On click open update in new tab on public changelog page, when false opens in popup on same page
  },
  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
  },
  // category: [], // Filter results by changelog category, add category names in array, the names are case-sensitive
  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
  // featurebaseJwt: generatedTokenValue // Authenticate user in the widget - should be skipped if using recommended SDK identification functionality
})
</script>

Authentication

If you are using our SDK identify functionality (recommended), then all the data about the user will be automatically connected to the Changelog widget as well.

As an additional option, you could generate a JWT on your server and pass it to the init_changelog_widget function as featurebaseJwt:generatedTokenValue.

Triggering different widget versions

Card view

The card will show up automatically for new updates if you have enabled it in the config. If you’re not seeing the changelog card immediately after installation, it’s because it follows a specific behavior to avoid blasting brand-new users with old updates.

When a user visits your app, it first stores all the previous changelogs as ‘already viewed’. When they come back, all new changelogs from that initial visit will be shown as a card. The state is stored in the browser's local storage, so it will persist across sessions.

Here’s how to try if the changelog card works:

1. Install the widget – Ensure the script is loaded in your app.

2. Visits your app – The widget logs in on your first visit and marks all current changelogs as already viewed.

3. Publish a new update – The next time you visit, the card will show up with the new update.

Popup widget

How to make the changelog popup work

If you’re not seeing the changelog popup immediately after installation, it’s because it follows a specific behavior to avoid blasting brand-new users with old updates.

When a user visits your app, it first stores 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.

Here’s how to try if the changelog popup works:

1. Install the widget – Ensure the script is loaded in your app.

2. Visits your app – The widget logs in your first visit and marks all current changelogs as already viewed.

3. Publish a new update – The next time you visit, the popup will open with the new update.

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

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);
    }
  }
);

If you, for some reason, want to manually reset or track the changelogs as viewed (normally done for you automatically if using the dropdown/popup), you can also manually call window.Featurebase('set_all_changelogs_as_viewed').

FAQs