feedbackchimp Help center
All Collections
Developers
Install Feedbackchimp Changelog Widget
Install Feedbackchimp Changelog Widget

Learn how to install and trigger the Changelog widget as a popup or dropdown on your site to keep users updated with new features.

Avatar of Khushhal
Written by Khushhal
Last updated Nov 04, 2024
The Feedbackchimp Changelog widget is a powerful tool designed to boost new feature adoption and keep your users informed. This guide will walk you through the installation and configuration process to integrate it seamlessly into your platform.

How to Install Feedbackchimp Changelog Widget

Feedbackchimp offers two widget formats to suit your needs:
  1. Popup View: A fullscreen popup that can be triggered automatically when a new update is published or manually by a user interaction. This format is ideal for drawing immediate attention to the latest product updates.
  2. Dropdown View: A compact version that attaches to any button or element on your site. When clicked, it expands to display recent updates, providing a streamlined user experience.

Step 1: Embed the JavaScript SDK

To begin, add the Feedbackchimp JavaScript SDK to your website by embedding the following script in your HTML:
<script>!function(e,c){let t="feedbackchimp-sdk";function a(){if(!c.getElementById(t)){var a=c.createElement("script");a.id=t,a.src="https://sdk.feedbackchimp.com/sdk.js",a.onload=function(){e.Feedbackchimp.q&&Array.isArray(e.Feedbackchimp.q)&&e.Feedbackchimp.q.forEach(function(c){e.Feedbackchimp.apply(null,c)})},c.getElementsByTagName("script")[0].parentNode.insertBefore(a,c.getElementsByTagName("script")[0])}}"function"!=typeof e.Feedbackchimp&&(e.Feedbackchimp=function(){(e.Feedbackchimp.q=e.Feedbackchimp.q||[]).push(arguments)}),"complete"===c.readyState||"interactive"===c.readyState?a():c.addEventListener("DOMContentLoaded",a)}(window,document);
</script>

<script>
Feedbackchimp("initialize_changelog_widget", {
  organization: "yourorg", // Replace this with your organization name, copy-paste the subdomain part from your Feedbackchimp workspace url (e.g. https://*yourorg*.feedbackchimp.space)
  placement: "right", // Choose between right, left, top, bottom placement (Optional if fullscreenPopup is enabled)
  fullscreenPopup: true, // Optional - Open a fullscreen announcement of the new feature to the user
  locale: "en", // Change the language
  usersName: "John" // Optional - Show the users name in the welcome message for the fullscreen popup
})
</script>
Below is a full explanation on how this code helps you customize different features of the changelog widget.
  • Organization: This displays your organization name, as shown in the subdomain part of your FeedbackChimp workspace URL.
  • Placement: With this, you can choose where to place the changelog widget on your screen (right, left, top, bottom etc).
  • Fullscreen Popup: This lets you display your changelog entries or announcement in a fullscreen mode.
  • Locale: This is important for setting language preferences for you changelog widget.
  • Username: This is an optional feature that, when enabled, displays the user's name in the welcome message when they open the changelog widget.

Step 3: Add the Changelog Attribute to Your Button

To create a button that opens the widget, add the data-feedbackchimp-changelog attribute to your desired element.

Step 4: Display Unread Update Badge (Optional)

If you'd like to show the number of unread updates on the button, include the following code inside your button: <span id="fc-update-badge"></span>
You can check if the value returned from window.Feedbackchimp("unviewed_changelog_count") is greater than 0 to conditionally render the badge.
<button data-feeadbackchimp-changelog>
  Open changelog <span id="fc-update-badge"></span>
</button>

Triggering the Popup View Automatically

To automatically open the Changelog as a fullscreen popup when there are new updates, set the fullscreenPopup option to true. This ensures users are notified immediately without additional coding.
Note: No additional logic is required from your end. FeedbackChimp handles everything.

How It Works

When users visit your site, Feedbackchimp marks all prior changelogs as "viewed." If they return and new updates have been published, the widget will automatically display the latest changelog as a popup. User state is remembered using the browser's local storage, so updates remain consistent across sessions.

Manually Opening the Popup

If you want to manually trigger the popup, use the following commands:

Open the Popup for All Updates

window.Feedbackchimp('open_changelog_popup');

Open the Popup for a Specific Update

window.Feedbackchimp('open_changelog_popup', {slug: "urlSlugOfTheRelease"});
  • The slug refers to the unique part of the changelog URL, e.g., ..changelog/**introducing-advanced-user-segmentation**.
For additional assistance or inquiries, please reach out to Customer Support.

Related Articles