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 (s, u, p, a) {
    function supahub() {
      var g = u.createElement(p),
        h = u.getElementsByTagName(p)[0];
      (g.id = a),
        (g.src = "https://widget.supahub.com/sdk.js"),
        h.parentNode.insertBefore(g, h);
      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
        });
      };
    }
    "function" != typeof s.SupahubWidget &&
      (s.SupahubWidget = function () {
        (s.SupahubWidget.q = s.SupahubWidget.q || []).push(arguments);
      }),
      "complete" === u.readyState || "interactive" === u.readyState
        ? supahub()
        : s.addEventListener("DOMContentLoaded", supahub);
  })(window, 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.
For proper functionality of your custom trigger button, insert the installation script directly where your trigger element appears in the code. This ensures the widget responds correctly to your customized activation method.Important: The script must be placed within the same component file as your custom trigger element to maintain proper event handling.