Quick start

Ten minutes, and your customers can connect their own accounts from inside your product.

1. Create an embed key

In Designer, open Embed settings and generate an embed key.

The key starts with svx_ik_ and is shown once. Store it the way you store any server secret — an environment variable or your secret manager.

2. Mint a session token from your server

Your backend swaps the embed key for a short-lived token bound to one customer.

curl -X POST https://api.work.studio/api/v1/workflow/embed/session-tokens \
  -H "Authorization: Bearer $WORKSTUDIO_EMBED_KEY" \
  -H "X-Embed-Tenant: $WORKSTUDIO_TENANT_ID" \
  -H "Content-Type: application/json" \
  -d '{"scopeKey": "customer:acme", "ttlSeconds": 900}'

import { IntegrationsClient } from '@workstudio-inc/sdk';

const client = new IntegrationsClient({
  apiKey: process.env.WORKSTUDIO_EMBED_KEY,
  tenantId: process.env.WORKSTUDIO_TENANT_ID,
});

// In your own "give me a token" endpoint, after you have authenticated the user:
const { token, expiresAt } = await client.mintSessionToken(`customer:${customerId}`, {
  ttlSeconds: 900,
});

{
  "token": "svx_st_eyJhbGciOiJIUzI1NiJ9…",
  "expiresAt": "2026-09-15T18:45:00Z",
  "scopeKey": "customer:acme"
}

Use your own customer id as the scope key. It is what separates one customer's connections from another's.

Mint a fresh token when your page loads. Don't cache one across sessions.

3. Drop the catalog into your page

<script type="module" src="https://embed.work.studio/v1.js"></script>

<svx-integration-catalog
  token="svx_st_…from your server…"
  tenant-id="your-tenant-id"
  scope-key="customer:acme"
  primary-color="#6366f1"
></svx-integration-catalog>

That's the whole integration. The component renders the catalog, runs the OAuth flow, and stores the resulting credentials against that customer's scope.

4. React to what happens

The component raises events as your customer works through it:

const el = document.querySelector('svx-integration-catalog');

el.addEventListener('svx:connection:completed', (e) => {
  console.log('connected', e.detail.connectorGlobalId);
  // Mark onboarding complete, refresh your own UI, send an event to your analytics
});

el.addEventListener('svx:catalog:error', (e) => {
  console.error(e.detail.error);
});

The full list is on the web component page.

5. Lock it to your own site

In Embed settings, add the origins your catalog is allowed to load from — https://app.acme.com, or https://*.acme.com for a single level of subdomain.

What to do next

Something not behaving as described? support@work.studio