React

How to add Dub Embed to your React or Next.js site

With Dub Embed, you can seamlessly integrate referral data visualization into your React or Next.js application.

Quickstart

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

1

Install package

Using the package manager of your choice, add the @dub/embed-react to your project.

2

Initialize package

You can use the <DubWidget /> component to embed the Dub widget in your React app.

E.g. if you’re using Next.js, you can add the <DubWidget /> component to your root layout component or any other pages where you want to embed the Dub widget.

Follow the link public token guide to learn how to generate public token for your links.

app/layout.tsx

import { DubWidget } from "@dub/embed-react";

<DubWidget
  token="LINK_PUBLIC_TOKEN"
/>;

3

Customize widget

You can customize the widget by passing the props to the <DubWidget /> component.

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

app/layout.tsx

import { DubWidget } from "@dub/embed-react";

<DubWidget
  token="LINK_PUBLIC_TOKEN"
  placement="bottom-right"
  trigger="manual"
/>;

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