HTML

How to add Dub Embed to your HTML site

With Dub Embed, you can seamlessly integrate referral data visualization into your HTML site.

Quickstart

This quick start guide will show you how to get started with Dub Embed on your HTML site.

1

Add the script

Add the script to your HTML file.

<script src="https://www.dubcdn.com/embed/script.js" defer></script>

2

Initialize the widget

Initialize the widget by calling the Dub.init function and passing your link public token.

<script>
  document.addEventListener("DOMContentLoaded", () => {
    Dub.init({
      token: "LINK_PUBLIC_TOKEN",
    });
  });
</script>

This will initialize the widget and make it available on the Dub global object.

3

Customize widget

You can customize the widget by passing the props to the Dub.init function.

For example, you can specify the placement of the widget or the trigger for the widget.

<script>
  document.addEventListener("DOMContentLoaded", () => {
    Dub.init({
      token: "LINK_PUBLIC_TOKEN",
      placement: "bottom-right",
      trigger: "manual",
    });
  });
</script>

// Open the widget on button click
<button onclick="window.Dub.toggleWidget()">Open widget</button>

For a full list of available props, please refer to the widget customization page.