How-to: In-app product changelog widget, embedded
How-To

This article describes how to embed a changelog in-product with Productific. We explain what a changelog is used for, what should be shown in a changelog and how to embedd a changelog into your product/website using Productific. A <TL;DR> summary is available in our changelog widget JSFiddle.

So, what is a changelog? A changelog is a list of product news made for users and customers. A changelog keeps customers in the loop about your product and shows users what’s new. It drives awareness for new features and increases user engagement. 

Why do I need a changelog? Your product is improving continuously and evolving month over month. Lots of work and effort go into product development. Usually this is the majority of investments in product companies - so never let your users miss product updates: show a changelog to engage users on the new stuff. A well maintained product changelog increases user engagement and product awareness. By embedding a changelog, anyone working with the the product can see the latest enhancements and easily navigate to get details about new features. Once users see the news they can try it out.

How do I use the changelog widget? The changelog widget can be added to any HTML-based product. In particular, to websites and web apps. Including the widget takes only three quick steps and can be done in 2 minutes. Using the widget, product news are listed in the order of availability, newest first, and users can navigate to display details about each new feature.


Step 1: Add the following tag in the HTML of your product. This will import Productific's changelog.

<script src="https://productific.com/cdn/productific-changelog.js"></script>


Step 2: Place this HTML div right where you want your product news to appear.

<div id="productific-changelog"></div>

For example, at Productific we show our own product news as a card element with shadow:

<div id="productific-changelog" class="mb-4 card shadow rounded"></div>


Step 3: Include the following javascript call. This function will fetch your product's changelog entries and render them into the element placed in step 3. 

Productific_getChangelog('MY_PRODUCT', new Date("2019-01-01"), $userId, config, onDone, debug);

The parameters are:

  • 'MY_PRODUCT'
    The identifier of your product, just check your product's feedback URL: it's the part after the @, usually resembling the product name.

  • new (Date"2019-01-01")
    The start date for product news to show in the widget, only features with an availability date after this date are shown. Use this date to display only the latest product news to your users. 

  • $userId
    An identifier for the current user. Can be a technical ID, email or hash. We use this to remember hidden items which we will not display to this user again. In case $userId is not provided we'll use a cookie to identify the user.

  • config
    Optional, for adding custom styling. See step 4. Just pass null to use the branding configured for your product listing.

  • onDone
    Callback function receiving a JSON value with the html of the changelog and number of entries.
    • function onDone(changelog) {
      if (changelog)
          console.log('changelog by Productific: showing ' + changelog.count + ' entries');
          else
              console.error('changelog by Productific: something went wrong');
      }

  • debug
    Pass value true to enable talkative log output. 

Step 4 (optional): Use the optional config parameter to style the changelog widget according to your needs. While the default widget will apply CSS styles according to the styling of your product listing on Productific, the following classes can be added to modify and customize this default styling.

var config = {
  headerClass: '...',
  itemClass: '...',
  linkClass: '...',
  buttonClass: '...',
  footerClass: '...',
  buttonHTML: '✕' 
 }


Example: at Productific we include our own product news using these Bootstrap-based classes

var config = {
  headerClass: 'p-2 text-center card-header ',         // card header
  itemClass: 'my-0 d-flex ',                           // flex-box
  linkClass: 'm-2 text-left muted-link flex-grow-1 ',  // link w/o any deco
  buttonClass: 'm-2 pmaasColorLightGrey align-self-center ',
                                                       // hide-button in grey
  footerClass: 'p-2 muted-link-a'                      // link w/o any deco
  //buttonHTML: '✕'                                   // default button ✕ is ok here
}

You can use existing CSS classes or create new styles for the changelog widget. 


A website changelog template is available on the example changelog widget on JSFiddle.

Please also see our tips for writing a good changelog.