> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dubot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK quickstart

> Install and initialize the Dubot browser SDK

<Info>
  The browser SDK is distributed from Dubot's CDN. It is not published as an npm package.
</Info>

## 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.

```html theme={null}
<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

```html theme={null}
<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](/sdk/identity-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:

```js theme={null}
window.Dubot.renderAgent({
  slug: 'billing-help',
  presentationMode: 'Bubble',
});
```

For an inline wizard, supply a selector:

```html theme={null}
<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:

```js theme={null}
window.Dubot.openResourceCenter();
```

To start a published reviewed guide:

```js theme={null}
window.Dubot.triggerGuidance({ guideId: 'guide_invite_teammate' });
```

## 4. Verify the integration

In the browser console:

```js theme={null}
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.

<Warning>
  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.
</Warning>

If the surface does not appear, follow [Troubleshoot the browser SDK](/sdk/troubleshooting).
Continue with [Identity and context](/sdk/identity-context) and [SDK actions](/sdk/actions).

## Before Production

* Match the exact HTTPS product origins that should load Dubot.
* Configure the [Content Security Policy destinations](#content-security-policy) 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.