The changelog widget allows you to seamlessly embed your changelog into your website.

The widget operates by attaching itself to a button tag. When the button is clicked, the changelog dropdown will be displayed.

​
Installation

To install the Changelog widget, add the following code snippet:

<script id="supahub" type="text/javascript">
  (function (h, u, b) {
    var g = h.createElement(u), s = h.getElementsByTagName(u)[0];
    (g.id = b), (g.src = "https://widget.supahub.com/sdk.js"), s.parentNode.insertBefore(g, s);
    g.onload = function () {
      window.SupahubWidget("changelog", {
        workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'
        theme: "light", // Required: Options ("dark" | "light")
        displayType: "dropdown", // Required: Options ("dropdown" | "popup")
        position: "bottom", // Optional: Needed when displayType="dropdown". Options ("left" | "right" | "top" | "bottom")
        userName: "First Name", // Optional: Will be shown for popup changelog
      });
    }
  })(document, "script", "supahub-sdk");
</script>

​
Trigger Dropdown View

To trigger the dropdown view of the changelog widget, add the data-supahub-changelog-dropdown attribute to a button element:

<button data-supahub-changelog-dropdown>
  What's New
  <span data-supahub-badge></span>
</button>

And to display the unread badge (red dot), add <span data-supahub-badge></span> inside the button.

​
Trigger Popup View

To trigger the popup view of the changelog widget, add the data-supahub-changelog-popup attribute to a button element:

<button data-supahub-changelog-popup>
  What's New
  <span data-supahub-badge></span>
</button>

And to display the unread updates, add <span data-supahub-badge></span> inside the button.

Embed on WebsiteSetup Popover/Popup