Skip to main content

Response Chat Widget

The reference for the onsite chat widget. To get it running first, start with the Onsite Chat Quickstart.

What it ships with

  • AI ready β€” OpenAI, Anthropic, and Gemini integration with streaming, tool feedback, and source citations.
  • Rich UI β€” Markdown with syntax highlighting, reactions, exports, forms, and programmable actions.
  • Mobile ready β€” responsive fullscreen with safe-area handling for modern iPhone Safari.
  • Operations ready β€” built-in record views for orders, products, subscriptions, returns, and exchanges.
  • Global ready β€” locale packs, translation overrides, automatic RTL layout.
  • Developer friendly β€” UMD bundle, type definitions, mock and AI dev servers, Docker image.

Hosting options

Production CDN

The recommended production setup is Cloud Storage plus Cloud CDN with versioned assets. One-time setup creates the bucket, CDN backend, URL map, HTTPS proxy, and global IP:
Then in DNS for stateset.chat, create an A record pointing at the global IP the script prints, and wait for the managed SSL certificate to become ACTIVE β€” that can take 15–60 minutes. Publish a version:
Embed the versioned assets:
Versioned filenames are what make long cache TTLs safe. Publish a new version rather than overwriting one β€” then you rarely need cache invalidation at all:

Backend options

The bundled AI server has no authentication, logging, or database. Add all three before putting it in front of customers β€” it exists to prove the wiring, not to run production traffic.

Hardening

  • Put your API behind OAuth/JWT or signed session cookies.
  • Rate limit inbound chat requests per IP and session at the edge.
  • Validate and sanitize user uploads before echoing them in the UI.
  • Sanitize AI-generated markdown β€” the widget uses DOMPurify by default.
  • Set Content-Security-Policy headers in nginx.conf or at your hosting platform.

Secrets and runtime

Keep .env out of version control, hold provider keys in a secret manager (AWS Secrets Manager, Doppler, Vault), and pin Node via .nvmrc or your host’s runtime setting β€” the widget requires 20.17+.

Revenue capture v2

For the ResponseCX lead-qualifier rollout, the bundle exports helpers that turn a public config response into mountable widget props, so configuration lives server-side rather than in the embed snippet.
Helpers:
  • window.ChatWidget.buildRevenueCapturePageContext(...)
  • window.ChatWidget.createRevenueCaptureMountProps(...)
  • window.ChatWidget.mountRevenueCaptureWidget(...)
The config route is GET /api/public/widget/v2/config?token=<signed-widget-token>. For a local end-to-end mock of the public contract, run npm run dev and open /widget/v2/demo.html.
The token in the embed is a signed public widget token β€” it is visible to anyone who views source, and is meant to be. Do not put a private API key in the embed snippet.