Embed reference

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

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

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