> ## Documentation Index > Fetch the complete documentation index at: https://docs.tesouro.com/llms.txt > Use this file to discover all available pages before exploring further. # Web components > Integrate Tesouro's embedded components into any web application using framework-agnostic 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 `` of your web application: ```html lines theme={null} ``` ## 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](./react#2-set-up-a-widget-token-endpoint) 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: ```html lines theme={null} ``` For all available components, see [Embedded Banking components](/embedded-banking/guides/embedded-components/balances) and [FinOps components](/finops/guides/embedded-components/invoicing). ## 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`: ```js lines theme={null} 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", }); ```