Widget Customization

Learn how to customize the Dub widget

Dub Widget comes with a set of props that allow you to customize the widget looks and behavior.

Available props

token

string

required

The link public token.

trigger

default:

"floating-button"

The trigger for the widget. Available options are floating-button, manual.

placement

default:

"bottom-right"

The placement of the widget. Available options are bottom-right, bottom-left, top-right, top-left, center.

onOpen

The callback function that is called when the widget is opened.

onClose

The callback function that is called when the widget is closed.

onError

The callback function that is called when there is an error fetching the data.

onTokenExpired

The callback function that is called when the link public token expires.

containerStyles

The styles for the widget container.

popupStyles

The styles for the widget popup.

buttonStyles

The styles for the widget button.

Here is a simple example of how to customize the widget:

<DubWidget
  token="YOUR_LINK_PUBLIC_TOKEN"
  trigger="manual"
  placement="bottom-left"

  // Callbacks
  onOpen={() => console.log("Widget opened")}
  onClose={() => console.log("Widget closed")}
  onError={(error) => console.log("Error fetching data", error)}
  onTokenExpired={() => console.log("Link public token expired")}

  // Styles
  containerStyles={{ backgroundColor: "red" }}
  popupStyles={{ backgroundColor: "blue" }}
  buttonStyles={{ backgroundColor: "green" }}
/>