# Embed reference

> Every attribute the Messenger and support form scripts read.

Both widgets are plain script tags with no dependencies. They draw inside a Shadow DOM, so your page's styles don't change them (apart from the font, when you choose **Use my site's font**) and theirs don't leak into your page.

The production host is `https://widget.customercatalyst.io`. Copy the exact code from **Settings › Support settings** (Messenger or Form tab); it has your key.

## Messenger — `/v1/messenger.js`

```html
<script src="https://widget.customercatalyst.io/v1/messenger.js" data-key="pk_…" async></script>
```

| Attribute | On | Value |
|---|---|---|
| `data-key` | the script tag | Your public key (`pk_…`) with the Messenger ability. Required, unless you set the key in [`window.ccMessengerSettings`](/developers/javascript-api/#windowccmessengersettings). |
| `data-ccm-open` | any element | `new` opens the new-message screen, `home` the home screen. Works on elements added later too. |

The script adds itself to the end of `<body>` and loads once per page, even if pasted twice.

## Support form — `/v1/form.js`

```html
<div id="cc-support-form"></div>
<script src="https://widget.customercatalyst.io/v1/form.js" data-key="pk_…" data-target="#cc-support-form" async></script>

<script src="https://widget.customercatalyst.io/v1/form.js" data-key="pk_…" data-open="#your-button-id" async></script>
```

| Attribute | Value |
|---|---|
| `data-key` | Your public key (`pk_…`) with the Support form ability. Required. |
| `data-target` | A CSS selector for the element the form is drawn into, e.g. `#cc-support-form`. |
| `data-open` | A CSS selector for your button. The form opens as a popup (a modal dialog) when it is clicked; the security check loads on first open. |

With neither `data-target` nor `data-open`, the form is drawn right before the script tag (not when the tag is in `<head>`). You can use several form tags on one page, e.g. one inline and one popup.

The hosted page (`https://widget.customercatalyst.io/f/<your-slug>`) needs no code. The script also reads `data-slug`, `data-mode` and `data-preview`; those are for CustomerCatalyst's own hosted page and settings preview, not for your site.

## What the scripts load

| Request | Why |
|---|---|
| `GET /v1/messenger.js`, `GET /v1/form.js` | The widget. Cached for 5 minutes. |
| `GET /v1/messenger/config`, `GET /v1/form/config` | Your settings. Cached for 60 seconds. |
| A frame of `/v1/turnstile` | The Cloudflare Turnstile security check, on our host, before a new message is sent. |
| `POST /v1/messenger/submit`, `POST /v1/form/submit` | Sending a new message. |
| `POST /v1/messenger/conversations`, `/thread`, `/reply`, `/file` | Messenger's conversation list, a conversation, a reply and a file download. |
| Your logo | The logo address from your settings, if you set one. |

All requests go to `https://widget.customercatalyst.io` without cookies. The widgets send nothing to any other host.

## Sites and keys

The widgets only answer on pages whose site is on the key's list; see [Allowed sites](/settings/api-keys/#allowed-sites). The browser's `Origin` header decides, so a page opened from a file or inside a sandboxed frame doesn't work.

## Next to the tracking SDK

Messenger and the form don't touch the CustomerCatalyst tracking script: their globals are `CustomerCatalystMessenger`, `CustomerCatalystForm` and `ccMessengerSettings`, and they only use browser storage keys that start with `ccm_`. One public key can hold the Usage tracking, Messenger and Support form abilities.