# Installation

> Add Support Chat with a single script tag. Configure regions and self-hosting.

Source: https://docs.useclad.ai/installation

---

Support Chat installs with a single `<script>` tag — there's no package to add
and no build step. Drop the [Quickstart](#quickstart) snippet in just before your
closing `</body>` tag and you're done.

### Using the widget

After the script loads, the booted, typed instance is available as
`window.supportChat`. A legacy string API is also supported for quick,
imperative calls:

```js
SupportChat("open");
SupportChat("on", "unread:change", ({ payload }) => console.log(payload.count));
```

Commands invoked before the script finishes loading are queued and replayed once
it's ready, so it's safe to call the API at any time.

For full programmatic control — for example in a single‑page app where you want
to hold a reference to the instance — the loader also exposes a factory on the
global once it has loaded:

```js
const chat = SupportChat.createChat({
  workspaceId: "{YOUR_WORKSPACE_ID}",
  widgetId: "{YOUR_WIDGET_ID}",
});

await chat.boot();
```

> Throughout these docs, `chat` refers to your Support Chat instance — either
> `window.supportChat` (created automatically from your settings) or one you
> create yourself with `SupportChat.createChat(...)`.

### Regions & self‑hosting

`region` selects the data‑residency endpoints. It defaults to `us`. Set it in
`window.SupportChatSettings` (or pass it to `SupportChat.createChat`).

| Region | Value |
|---|---|
| United States | `us` |
| European Union | `eu` |
| Australia | `au` |
| Custom / self‑hosted / staging | `custom` (also set `apiBase` + `widgetBase`) |

```js
window.SupportChatSettings = {
  workspaceId: "{YOUR_WORKSPACE_ID}",
  widgetId: "{YOUR_WIDGET_ID}",
  region: "custom",
  apiBase: "https://support-api.example.com",
  widgetBase: "https://support-widget.example.com/v1",
};
```