Web embed

Open Deploy > Chat widget. Use the Content, Style, and AI tabs to configure the widget, then open Embed to copy code. Deploy and save your widget before pasting snippets on your site, so visitors load the published config.

Configure branding

On Chat widget, open the Content and Style tabs. Set display name, primary color, light/dark appearance, welcome message, and suggested prompts. Optionally use Import from website on the Style tab.

Choose a layout

Website widget (recommended): floating launcher with optional proactive intro bubbles (Copy website widget code)
Inline chat panel: fixed chat panel in a page region (Copy inline panel code)
Standalone app: full-page chat at a dedicated URL (Copy app link)

Paste on your host page

Add the copied snippet to your marketing site, storefront, docs, or help center.

Verify

On the Embed tab, use Open anonymous chat demo or Open floating launcher demo, send a test message, then check Chat logs.

The Chat widget setup is for public websites and inline support panels. For an authenticated right-side drawer inside a web app, use Deploy > SaaS app instead.

Layout	Best for	Snippet button	Embed URL
Website widget	Marketing sites, docs, storefronts, chat available without taking layout space; supports proactive intro bubbles	Copy website widget code	`/embed/key/cpk_live_...?mode=launcher`
Inline chat panel	Help center sidebar, dedicated support page, fixed panel in a layout	Copy inline panel code	`/embed/key/cpk_live_...`

Copy website widget code emits a floating launcher iframe plus launcher host scripts. Snippets omit session so each visitor starts an anonymous thread listed under Chat logs. The copied snippet includes:

setupChatropicLauncherHostListener, which resizes the host iframe when chat opens or closes
An embed wake and viewport sync script, which keeps proactive bubbles and mobile layout in sync with the host page
Encapsulated mobile viewport helpers, so you do not need to wire media queries yourself

<!-- Chatropic floating chat launcher -->
<iframe
  id="chatropic-launcher"
  src="https://chatropic.com/embed/key/cpk_live_...?mode=launcher"
  title="Support assistant"
  allow="microphone"
  style="position:fixed;bottom:0;right:0;width:min(420px,100vw);height:min(360px,100dvh);border:none;background:transparent;z-index:99999"
></iframe>
<script>
function setupChatropicLauncherHostListener(widgetOrigin, iframeId) {
  var CLOSED = "position:fixed;bottom:0;right:0;width:min(420px,100vw);height:min(360px,100dvh);border:none;background:transparent;z-index:99999";
  var CLOSED_MOBILE = "position:fixed;bottom:0;right:0;width:min(400px,calc(100vw - 2rem));height:320px;border:none;background:transparent;z-index:99999";
  var OPEN = "position:fixed;bottom:0;right:0;width:min(420px,100vw);height:min(900px,100dvh);border:none;background:transparent;z-index:99999";
  var MOBILE_OPEN = "position:fixed;inset:0;width:100vw;height:100dvh;border:none;background:transparent;z-index:99999";
  var MOBILE_QUERY = "(max-width: 639px)";
  var mobileQuery = window.matchMedia(MOBILE_QUERY);
  function isMobileViewport() {
    return mobileQuery.matches;
  }
  function onMobileViewportChange(handler) {
    if (typeof mobileQuery.addEventListener === "function") {
      mobileQuery.addEventListener("change", handler);
      return;
    }
    mobileQuery.addListener(handler);
  }
  function getLauncherIframe() {
    return document.getElementById(iframeId || "chatropic-launcher");
  }
  function applyClosedStyle(iframe) {
    iframe.style.cssText = isMobileViewport() ? CLOSED_MOBILE : CLOSED;
  }
  var mobileOpen = false;
  window.addEventListener("message", function (e) {
    if (e.origin !== widgetOrigin) return;
    var d = e.data || {};
    if (d.type !== "chatropic:launcher-state") return;
    var iframe = getLauncherIframe();
    if (!iframe) return;
    if (d.open && d.fullscreen) {
      mobileOpen = true;
      iframe.style.cssText = MOBILE_OPEN;
      return;
    }
    if (d.open) {
      mobileOpen = false;
      iframe.style.cssText = OPEN;
      return;
    }
    mobileOpen = false;
    applyClosedStyle(iframe);
  });
  onMobileViewportChange(function () {
    if (mobileOpen) return;
    var iframe = getLauncherIframe();
    if (!iframe) return;
    applyClosedStyle(iframe);
  });
  var initialIframe = getLauncherIframe();
  if (initialIframe) applyClosedStyle(initialIframe);
}

setupChatropicLauncherHostListener("https://chatropic.com", "chatropic-launcher");

(function () {
  var iframe = document.getElementById("chatropic-launcher");
  if (!iframe) return;
  var MOBILE_QUERY = "(max-width: 639px)";
  var mobileQuery = window.matchMedia(MOBILE_QUERY);
  function isMobileViewport() {
    return mobileQuery.matches;
  }
  function onMobileViewportChange(handler) {
    if (typeof mobileQuery.addEventListener === "function") {
      mobileQuery.addEventListener("change", handler);
      return;
    }
    mobileQuery.addListener(handler);
  }
  function postHostViewport() {
    if (!iframe.contentWindow) return;
    iframe.contentWindow.postMessage(
      { type: "chatropic:host-viewport", mobile: isMobileViewport() },
      "https://chatropic.com",
    );
  }
  function ping() {
    if (!iframe.contentWindow) return;
    iframe.contentWindow.postMessage(
      { type: "chatropic:embed-wake" },
      "https://chatropic.com",
    );
    postHostViewport();
  }
  iframe.addEventListener("load", ping);
  ping();
  onMobileViewportChange(postHostViewport);
  window.addEventListener("message", function (event) {
    if (event.origin !== "https://chatropic.com") return;
    var data = event.data || {};
    if (data.type !== "chatropic:request-host-viewport") return;
    postHostViewport();
  });
})();
</script>

Proactive chat bubbles

On the Content tab, enable Proactive chat bubbles to show intro bubbles above the launcher after visitors stay on the page. Set Show after (seconds) (default 60s). Bubbles appear once per browser session. Proactive bubbles apply to the website widget only. The inline panel layout does not show them because chat is always open.

Launcher iframe sizing

The launcher iframe is intentionally larger than the visible bubble so the open panel has room to expand. Do not shrink it to the button size; the bubble and panel are positioned inside the iframe. Keep background:transparent so only the launcher UI is visible on your page. On viewports below 640px, the copied host listener shrinks the closed iframe and expands it to full screen when chat opens. Paste the full copied snippet and do not omit setupChatropicLauncherHostListener.

Inline chat panel

Copy inline panel code emits a fixed iframe. Proactive bubbles are not shown in this layout.

<!-- Chatropic inline chat panel -->
<iframe
  id="chatropic"
  src="https://chatropic.com/embed/key/cpk_live_..."
  width="400"
  height="620"
  style="border:none;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.12)"
  allow="microphone"
  title="Support assistant"
></iframe>

Standalone app

Copy app link shares a full-page chat experience at /a/{workspace-slug} with no iframe on your site. This is useful for a dedicated support URL or quick sharing during rollout.

Do not add a session query param to production embed URLs. Without it, each visitor receives a unique anonymous session. Pinned session values are for Playground preview only.

Anonymous sessions and Chat logs

Production embed snippets strip the session query param so each visitor starts a fresh conversation. Those threads appear under Chat logs, not in Inbox.

Location	What you see
Chat logs	Anonymous web embed visitors (website widget or inline panel)
Inbox	Identified or escalated threads, WhatsApp, SDK-backed apps with known users
Playground	Builder test sessions, excluded from Chat logs

After deploying, open Open anonymous chat demo on the Embed tab, send a message, then View in Chat logs to confirm traffic is recorded.

Action tokens and identity

The widget does not store API credentials. Tokens are configured in the dashboard and referenced from HTTP actions; the widget only needs extra URL params when actions use customer login or when you want to associate a known website user with the conversation. For logged-in users on your site, append these params to the iframe src when the visitor is signed in:

Param	Purpose
`endUser`	Stable user id from your app (e.g. account id)
`identity`	Short-lived JWT your backend signs with the workspace identity secret

<!-- Set src dynamically when the user is logged in -->
<iframe
  id="chatropic"
  src="https://chatropic.com/embed/key/cpk_live_...?endUser=user_123&identity=YOUR_JWT"
  width="400"
  height="620"
  style="border:none;border-radius:16px"
  allow="microphone"
  title="Support assistant"
></iframe>

Generate the identity signing secret from Manage tokens when creating a customer-login token. Sign JWTs on your server with HS256, including sub (must match endUser) and exp. Never expose the signing secret or JWT minting logic in browser code.

Do not put static API secrets in the embed URL. Only pass endUser and identity for customer-login identity. Actual API credentials stay in Manage tokens.

Embed URL options

Copied snippets use an API-key embed URL in the form /embed/key/{publishable-key}. Widget name, colors, welcome message, and suggested prompts load from the workspace linked to the publishable key, so they are not repeated in the URL. Add query params only for runtime behavior:

Param	Purpose
`mode`	`launcher` for the website widget; omit for inline panel
`product`	Agent product (`customer_support`, etc.), omit for default
`endUser`	Stable signed-in user id, required for customer-login tokens and agent BFF
`identity`	JWT from your backend, verifies `endUser` with the workspace identity secret
`theme`	`dark` or `light`, an optional override of the stored widget theme
`session`	Preview only; omit in production

Legacy query-string embed (deprecated)

Older snippets inlined appearance via query params (name, header, welcome, prompts, etc.). Those still work on /embed?tenant=...&name=..., but new deploy snippets use the API-key path form above.

SaaS app

Right-side drawer setup for authenticated web apps.

Chat logs

Anonymous visitor history under Activity > Chat logs.

Widgets & branding

Appearance and prompt chips.

Manage tokens

Static and customer-login credentials for actions.

Quick Start

Agent Management

Actions

Settings & Guardrails

Deploy

Analytics & Monitoring

Website widget vs inline panel

Website widget

Proactive chat bubbles

Launcher iframe sizing

Inline chat panel

Standalone app

Anonymous sessions and Chat logs

Action tokens and identity

Embed URL options

SaaS app

Chat logs

Widgets & branding

Manage tokens

​Website widget vs inline panel

​Website widget

​Proactive chat bubbles

​Launcher iframe sizing

​Inline chat panel

​Standalone app

​Anonymous sessions and Chat logs

​Action tokens and identity

​Embed URL options

SaaS app

Chat logs

Widgets & branding

Manage tokens

Website widget vs inline panel

Website widget

Proactive chat bubbles

Launcher iframe sizing

Inline chat panel

Standalone app

Anonymous sessions and Chat logs

Action tokens and identity

Embed URL options