> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supahub.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup Dropdown/Popup

> Embed a customizable changelog widget on your website to keep users informed of product updates.

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.

<img height="200" noZoom src="https://mintcdn.com/supahub/CBSb9iNvBQZO79jT/images/widget-changelog.jpg?fit=max&auto=format&n=CBSb9iNvBQZO79jT&q=85&s=4ce36630773365176834dd44dc23c840" class="rounded-xl" data-path="images/widget-changelog.jpg" />

## Installation

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

<CodeGroup>
  ```javascript HTML theme={null}
  <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>
  ```

  ```javascript Next.js theme={null}
  "use client"; // NextJS 13 requires this. Remove if you are using NextJS 12 or lower.

  import Script from "next/script";

  const ChangelogDropdown = () => {
    return (
      <>
        <Script id="supahub" strategy="afterInteractive" 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>
      </>
    );
  };

  export default ChangelogDropdown;
  ```

  ```javascript Vue.js theme={null}
  <script lang="ts" setup>
  import { onMounted } from "vue";

  onMounted(() => {
    if (document.getElementById("supahub-sdk")) {
      return;
    }

    const script = document.createElement("script");
    script.id = "supahub-sdk";
    script.src = "https://widget.supahub.com/sdk.js";
    script.async = true;
    script.onload = () => {
      const win: any = window;
      win.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.head.appendChild(script);
  });
  </script>

  <template>
    <h1>This is a component</h1>
  </template>

  <style>
  ...
  </style>
  ```
</CodeGroup>

## Trigger Dropdown View

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

```javascript theme={null}
<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:

```javascript theme={null}
<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.

<Warning>
  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.
</Warning>