Embedded components and data regions

Published November 9, 2026

🧩 Unified embedded components let you drop authorization, sign-in, and other integration UX into your product with a few lines of code. Configure them in the Unified app, copy the snippet, and ship.

This article explains what each embedded component does, how to configure it in the Unified dashboard, what the data region setting means, and how that differs from Settings → Data regions.

Where to find embedded components

In the Unified app (app.unified.to):

Authorization — app.unified.to/auth (lets end users authorize third-party accounts and create connections)
Other embeds — app.unified.to/embed (Sign-in, Directory, Calendar Scheduler, File Manager, Messaging)

Activate the integrations you want customers to see first under Integrations. Embedded components only list integrations that are active for your workspace and environment.

What embedded components are

Embedded components are pre-built front-end widgets (React, Vue, Angular, Svelte, or plain JavaScript) that talk to the Unified API using your public workspace ID. They handle the UI for listing integrations and starting auth flows so you do not have to rebuild OAuth, API-key, and token screens for every vendor.

After a successful authorization, Unified redirects the user back to your success URL with the new connection ID (and optional state). Your backend then uses that connection ID with your workspace API token to call Unified APIs.

Authorization component

Use this when your product needs customers to connect their third-party accounts (CRM, ATS, HRIS, accounting, and so on).

Typical flow

You embed the Authorization component in your app.
The user picks an integration from the list.
Unified opens the correct authorization experience for that integration (OAuth, API token, or other).
On success, Unified redirects to your Success URL with id (connection ID), state, nonce, type, and sig.
Your app stores the connection ID and uses it for subsequent Unified API calls.

Key configuration options

Success URL — where to send the user after a successful authorize. Connection ID is returned as the id query parameter.
Failure URL — where to send the user if authorization fails or is cancelled.
State — opaque value echoed back so you can correlate the callback with your own user/session.
External ID — your end-user or account ID stored on the connection for later lookup.
Permission scopes — only request scopes you need. Leaving scopes blank requests all available scopes.
Categories — filter which integration categories appear in the widget.
Language / theme / display — localization, light/dark/auto theme, Unified CSS, category labels and tabs.
Data region — which Unified API region the component should use (US, EU, or AU). See below.
Environment — Production vs Sandbox / Synthetic Data. Use Synthetic Data to create safe test connections.

Learn more about associating connections with end users: docs.unified.to/guides/how_to_associate_a_connection_id_with_your_end_user

Data region on the embedded component

The Data region control on Authorization (and other embeds) sets the dc prop on the component. That chooses which Unified API host creates and stores the connection:

✅ Choosing AU (or EU) on the embed does not add an extra line item by itself. It routes authorization and API traffic to that region's segregated infrastructure.

Important caveat

US, EU, and AU are separate environments. A workspace that only exists in the US region will not automatically exist in AU. For AU to work with your existing setup you either:

Register / use a workspace in AU at app-au.unified.to and point the embed at dc="au", or
Enable multi-region synchronization (Settings → Data regions) so workspace config is replicated across regions — available on Pro and Scale plans. Note that end-user connections, webhooks, and API call logs are never synced; they stay in the region where they were created.

Settings → Data regions (different from embed dc)

In Settings → Data regions you will see Multi-region synchronization. That feature keeps workspace management data in sync across US, EU, and AU: workspace settings, Secrets Manager, integrations and OAuth credentials, users, API keys, and notifications. End-user connections, webhooks, and API call logs stay in the region where they were created — open that region's app (app / app-eu / app-au) to manage them.

This is a Pro / Scale plan feature — that is why AU can look 'locked' or paid in Settings.
It is not the same control as the Data region radio on the Authorization embed.
In transit, synced data is encrypted (AES-256-GCM) and integrity-protected (HMAC-SHA256).

Embed Data region = which API region creates the connection. Settings Data regions = keep the same workspace config available in every region (paid plan feature).

What a Unified data region means

Unified uses a pass-through architecture: we do not store your customers' third-party business payloads at rest. API calls are processed live against the source system.

A data region still matters because it is where:

Unified API servers that handle the request run,
Connection metadata and auth credentials for that connection are kept,
Workspace configuration for that region lives.

Regions are fully segregated (North America, Europe, Australia). See also: REST API URLs and Security / data regions.

Other embedded components

Lets end users authenticate into your product with identity integrations (Google, Microsoft, and others). On success you receive a JWT (with name / emails) plus your state value. Configure Success URL, Failure URL, State, display text, and data region under Embedded components → Sign-in.

Calendar Scheduler / File Manager / Messaging

UI samples for calendar booking, file picking, and messaging against an existing connection. These expect a connection ID (and API token where required) rather than creating a new connection from scratch.

How to add a component to your app

Activate integrations at app.unified.to/integrations.
Open Authorization ( /auth ) or Embedded components ( /embed ).
Configure callback URLs, scopes, categories, language, theme, and data region. The code preview updates live.
Copy the React, Vue, Angular, Svelte, JavaScript, or API snippet into your app.
Handle the success redirect: persist the connection id (and verify sig when using signature validation).

Concept docs: Embedded components · Scopes · Authorize connection API

Success callback parameters (Authorization)

id — new connection ID
state — the state you supplied
nonce — random nonce
type — integration type
sig — HMAC signature to verify the callback was not tampered with

sig = HmacSha256(workspace.secret).update(connection.id).update(nonce).update(state).digest("hex")

Framework packages

Quick FAQ

Do we pay extra just to select AU on the Authorization embed?

No. Selecting AU on the embed only sets which region API host is used. There is no separate AU surcharge for that toggle.

Why does Settings say we need to pay for AU / data regions?

Settings → Data regions is multi-region sync for workspace configuration across US/EU/AU. That sync feature is included on Pro and Scale plans.

Does Unified store our customers' SaaS data?

No. Customer business data is pass-through in real time. Connection credentials and workspace metadata are stored in the selected region so residency and processing location stay aligned.

Can we use the API instead of the widget?

Yes. Build a custom UI and call the Authorize connection endpoints directly. See Authorize or re-authorize a connection and the custom auth-flow tutorial.

All articles