Installing the Changelog Widget on a Webflow Website
updated 10 months ago
In this article, we'll take a look at how to install the Changelog widget on your Webflow website so you can keep your users or customers up to date with any product changes, updates, upcoming webinars or general announcements.
1) To get started, open your ProductFlare dashboard, and click on a Product that you want to create a changelog for on the left sidebar.
2) Click the 'Changelog' button in the upper right corner of the page as shown below:
3) In the pop-up, enter the element name that you want to trigger the widget. This is the trigger element that opens the widget when your website visitor clicks it. It can be anything, but the most common are a 'What's New' link or a 'bell' type icon.
Important: Don't enter # or . before the element name, we only need the text value.
As you can see below, we have a 'What's New' link in our navigation bar in Webflow, and the ID set to 'whatsnew' in Webflow, but this can really be anything you want.
In ProductFlare, we just add 'whatsnew' to the input as shown:
4) Click the green button to Copy the code snippet to your clipboard.
5) Go back to your Webflow website and then click the dropdown in the top left and then click 'Project Settings' as show:
6) In Webflow, click the 'Custom Code' link, your page should look like this:
7) Finally, just paste the code snippet you copied from ProductFlare into the 'Head Code' input on your Webflow project settings, or if you prefer scroll down and paste it in the 'Footer Code' input. For a speedier website, using the Footer Code input is better as it means your website will load fully before the changelog code is loaded.
8) Save changes in Webflow and then publish your website.
That's it! Now, now visit your website in a new tab, click the trigger element and your changelog widget should open!
Didn't follow it all? Check out the video walkthrough below: