Skip to main content

​
Overview

Tesouro’s embedded components are available as framework-agnostic web components loaded via a CDN script. Drop them into any HTML page — no build step or framework required.

​
1. Load the script

Add the following script tag to the <head> of your web application: 
<script src="https://widgets.tesouro.com/embedded-widgets/main/index.js"></script>

​
2. Set up a widget token endpoint

Embedded components authenticate users via short-lived, user-scoped widget tokens. Your backend exposes an endpoint that accepts { userId, userEmail } and returns { widgetToken }. See the React guide for a full server-side implementation example.

​
3. Place a component

Drop the component element anywhere in your HTML. Pass data-widget-token-refresh-url to point components at your token endpoint: 
<embedded-balances-widget
  data-merchant-id="YOUR_MERCHANT_ID"
  data-user-id="YOUR_USER_ID"
  data-widget-token-refresh-url="/api/widget-token"
></embedded-balances-widget>
For all available components, see Embedded Banking components and FinOps components.

​
Customization

All components support the following data-* attributes for theming:
AttributeExample
data-primary-colordata-primary-color="#1a5eea"
data-font-familydata-font-family="Inter"
data-font-colordata-font-color="#151e32"
data-contrast-text-colordata-contrast-text-color="#ffffff"
data-hyperlink-colordata-hyperlink-color="#1a5eea"
data-button-colordata-button-color="#1a5eea"
data-button-border-radiusdata-button-border-radius="8px"
data-widget-background-colordata-widget-background-color="#f8fafc"
data-widget-border-radiusdata-widget-border-radius="12px"
data-modal-background-colordata-modal-background-color="#ffffff"
data-modal-border-radiusdata-modal-border-radius="12px"
You can apply these globally using setWidgetDefaults to avoid repeating them on every element. Inline data-* attributes on an individual component take precedence over values set via setWidgetDefaults: 
import { setWidgetDefaults } from "https://widgets.tesouro.com/embedded-widgets/main/index.js";

setWidgetDefaults({
  "data-merchant-id": "YOUR_MERCHANT_ID",
  "data-user-id": "YOUR_USER_ID",
  "data-widget-token-refresh-url": "/api/widget-token",
  "data-primary-color": "#1a5eea",
  "data-font-family": "Inter",
});