SDK quickstart

The browser SDK is distributed from Dubot’s CDN. It is not published as an npm package.

Before you begin

You need:

a Dubot workspace;
its public client token;
a saved Test configuration or a published Production configuration to verify;
an approved origin for the customer application;
a stable signed-in user id;
a server-minted identity token if the workspace observes or enforces signed identities.

1. Add the script

Place the stable SDK entry on every page where Dubot may render.

<script
  src="https://cdn.dubot.ai/js-sdk/dubot.js?clientToken=YOUR_CLIENT_TOKEN"
  crossorigin="anonymous"
></script>

The client token belongs in the script URL. It is not an argument to Dubot.init(). crossorigin="anonymous" preserves useful SDK error details for telemetry. The script above runs before the next script in the page. If your application loads it asynchronously, wait for its load event before calling window.Dubot.

2. Initialize for the signed-in user

<script type="module">
  await window.Dubot.init({
    userId: currentUser.id,
    email: currentUser.email,
    identityToken: identityTokenFromYourBackend,
    context: {
      plan: currentUser.plan,
      workspace_role: currentUser.role,
    },
  });
</script>

Only pass context needed by the experience. Context values must be strings, numbers, or booleans. currentUser and identityTokenFromYourBackend represent values from your authenticated application; obtain them before this code runs. Omit identityToken only when your workspace permits unsigned sessions. See Identity and context for server signing. init() returns a promise. Await it before a programmatic launch. A resolved promise alone is not proof that configuration loaded: expected setup failures are logged to the browser console. Complete the verification checks below.

3. Publish and match a surface

A configured placement mounts automatically when its page rules match. You can also render a published wizard programmatically after initialization:

window.Dubot.renderAgent({
  slug: 'billing-help',
  presentationMode: 'Bubble',
});

For an inline wizard, supply a selector:

<div id="billing-assistant"></div>

<script type="module">
  // Run after the awaited init() call in your application setup.
  window.Dubot.renderAgent({
    slug: 'billing-help',
    presentationMode: 'InlineWizard',
    selector: '#billing-assistant',
  });
</script>

To open a published Resource Center programmatically:

window.Dubot.openResourceCenter();

To start a published reviewed guide:

window.Dubot.triggerGuidance({ guideId: 'guide_invite_teammate' });

4. Verify the integration

In the browser console:

window.Dubot.version;
window.Dubot.getState();

Check that:

version identifies the deployed SDK build rather than a local dev build;
initProps.userId matches the signed-in user;
initProps.verified reflects whether an identity token was supplied, not whether the server accepted its signature;
the expected placement or Resource Center appears on a matching page;
Test shows the latest saved configuration and Production shows only the published version;
a deliberately invalid origin or identity fails as expected.

The client token is public. The identity-verification secret is not. Never mint end-user tokens in browser code or include the secret in the page bundle.

If the surface does not appear, follow Troubleshoot the browser SDK. Continue with Identity and context and SDK actions.

Before Production

Match the exact HTTPS product origins that should load Dubot.
Configure the Content Security Policy destinations for the features and brand assets you use.
Initialize only after the application knows the signed-in user and has obtained a fresh server-minted identity token.
Send only the context and callbacks required by the active experience.
Verify one allowed case and deliberately rejected origin, identity, and action case.

Content Security Policy

For the default production browser SDK, permit these destinations in your existing policy:

Directive	Destination	Used for
`script-src`	`https://cdn.dubot.ai`	The SDK script
`connect-src`	`https://cdn.dubot.ai`	Configuration, chat, Guidance, events, uploads, and fetched stylesheets
`connect-src`	`wss://cdn.dubot.ai`	The optional end-user MCP action channel
`style-src`	`https://cdn.dubot.ai` and your configured font-stylesheet origin	SDK and Brand stylesheets
`font-src`	The origins serving your configured font files	Brand fonts

This is a destination list, not a replacement policy. Keep your application’s existing directives and nonce or hash requirements. Brand styles, images, videos, embedded content, and host callbacks may need their own sources. Check the browser’s CSP violation messages with the actual published Brand and selected features before launch.

Start integrating

Browser SDK

AI clients and MCP

Before you begin

1. Add the script

2. Initialize for the signed-in user

3. Publish and match a surface

4. Verify the integration

Before Production

Content Security Policy

​Before you begin

​1. Add the script

​2. Initialize for the signed-in user

​3. Publish and match a surface

​4. Verify the integration

​Before Production

​Content Security Policy

Before you begin

1. Add the script

2. Initialize for the signed-in user

3. Publish and match a surface

4. Verify the integration

Before Production

Content Security Policy