Web components

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>

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-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:

Attribute	Example
`data-primary-color`	`data-primary-color="#1a5eea"`
`data-font-family`	`data-font-family="Inter"`
`data-font-color`	`data-font-color="#151e32"`
`data-contrast-text-color`	`data-contrast-text-color="#ffffff"`
`data-hyperlink-color`	`data-hyperlink-color="#1a5eea"`
`data-button-color`	`data-button-color="#1a5eea"`
`data-button-border-radius`	`data-button-border-radius="8px"`
`data-widget-background-color`	`data-widget-background-color="#f8fafc"`
`data-widget-border-radius`	`data-widget-border-radius="12px"`
`data-modal-background-color`	`data-modal-background-color="#ffffff"`
`data-modal-border-radius`	`data-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-user-id": "YOUR_USER_ID",
  "data-widget-token-refresh-url": "/api/widget-token",
  "data-primary-color": "#1a5eea",
  "data-font-family": "Inter",
});

React Invoicing

⌘I

Getting started

Embedded components

Authentication

Roles & permissions

Manage organizations

Common objects

Accounts payable

Accounts receivable

Expense management

Payments

Advanced

Accounting integrations

Overview

1. Load the script

2. Set up a widget token endpoint

3. Place a component

Customization

​Overview

​1. Load the script

​2. Set up a widget token endpoint

​3. Place a component

​Customization

Overview

1. Load the script

2. Set up a widget token endpoint

3. Place a component

Customization