Skip to content
Reponse.ai LogoDocs
DocsAPISDKsGuides

Search Documentation

Search for an article...

Getting Started

  • Overview
  • Architecture
  • Installation
  • Authentication
  • First Request

Products & Collections

  • Products — List
  • Products — Get
  • Products — Metafields
  • Collections — List
  • Collections — Get
  • Collections — Products

Cart & Checkout

  • Cart — Create
  • Cart — Get
  • Cart — Add Item
  • Cart — Update Item
  • Cart — Remove Item
  • Cart — Apply Promotion
  • Checkout — Stripe
  • Checkout — Payment Intent
  • Checkout — ACP

Orders & Fulfillment

  • Orders — Create
  • Orders — Get
  • Orders — Confirm
  • Orders — Cancel
  • Orders — Fulfill
  • Orders — Refund

Commerce

  • Inventory — Get
  • Inventory — Update
  • Shipping — Rates
  • Discounts — List
  • Discounts — Create
  • Discounts — Validate
  • Subscriptions — Manage

Loyalty & Gift Cards

  • Loyalty — Balance
  • Loyalty — Redeem
  • Loyalty — Referral
  • Gift Cards — List
  • Gift Cards — Redeem

Tickets & Support

  • Tickets — List
  • Tickets — Create
  • Tickets — Reply

Platform

  • Product Feed — JSON
  • Product Feed — CSV
  • Theme — Get
  • Approvals — Execute
  • Approvals — Reject
  • Geocode

SDKs

  • SDK Overview
  • TypeScript SDK
  • React Hooks

Guides

  • Chat Widget
  • Shopify Sync
  • Storefront Starter
  • Loyalty Program
  • Discounts & Promotions
  • Subscriptions
  • Klaviyo Integration
  • Custom Domains
  • Agentic Commerce (ACP)
  • A2A Protocol
  • AI Engines
  • MCP Server

Webhooks

  • Webhooks Overview
  • Events Reference
  • Shopify Webhooks
  • Stripe Webhooks
  • Reviews (Stamped / Trustpilot)
  • Logistics
  • Email Inbound

Resources

  • Environment Variables
  • Rate Limits
  • Changelog
DocsGuidesChat Widget

Chat Widget

Embed the Reponse chat widget on your site.

2 min read/Last updated Jul 22, 2026
On this page

Overview

The Reponse chat widget brings the AI activation layer to any page on your site. It answers shopper questions in real time, guides them toward purchase, and captures leads — all without leaving the page. You can embed it as a script snippet or as an iframe.

Prerequisites

  • A Reponse workspace with at least one campaign configured
  • Your campaign ID (found in Dashboard → Campaigns)

Step 1 — Script Embed (Recommended)

Add the following snippet before the closing `` tag of your site:

html
<script
  src="https://cdn.reponse.ai/widget/v1/loader.js"
  data-campaign-id="YOUR_CAMPAIGN_ID"
  data-theme="auto"
  async
></script>

The widget loads asynchronously and does not block page rendering.

Step 2 — Iframe Embed

If you prefer full isolation, embed the widget in an iframe:

html
<iframe
  src="https://reponse.ai/en/c-embed/YOUR_CAMPAIGN_ID"
  width="400"
  height="600"
  style="border: none; border-radius: 12px;"
  allow="clipboard-write"
></iframe>

The `c-embed` route sets permissive `frame-ancestors` headers, so the iframe works on any origin.

Customization

Pass `data-*` attributes on the script tag to customize the widget appearance:

AttributeTypeDefaultDescription
data-campaign-idstring—Required. Your campaign ID.
data-theme"light" | "dark" | "auto""auto"Color theme. auto inherits from the page.
data-position"bottom-right" | "bottom-left""bottom-right"Widget button position.
data-accent-colorCSS colorWorkspace defaultPrimary accent color for the widget.
data-locale"en" | "fr"Auto-detectedForce a specific language.
data-open"true" | "false""false"Open the widget on page load.

Events API

The widget emits custom events on `window` that you can listen to:

javascript
window.addEventListener("reponse:ready", () => {
  console.log("Widget loaded");
});

window.addEventListener("reponse:message", (e) => {
  console.log("New message:", e.detail);
});

window.addEventListener("reponse:lead", (e) => {
  console.log("Lead captured:", e.detail.email);
});
EventPayloadDescription
reponse:ready{}Widget has fully initialized.
reponse:open{}Chat panel was opened.
reponse:close{}Chat panel was closed.
reponse:message{ role, content }A message was sent or received.
reponse:lead{ email }A lead email was captured.

Programmatic Control

After the widget is ready, use the global `ReponseWidget` object:

javascript
// Open the widget
ReponseWidget.open();

// Close the widget
ReponseWidget.close();

// Send a message programmatically
ReponseWidget.send("Show me your best deals");

UTM Passthrough

The widget automatically reads UTM parameters from the page URL and forwards them to the AI engine dispatcher. This enables automatic engine selection (e.g., `fr-ecom-turbo-v1` for social traffic). No additional configuration is required.

Troubleshooting

IssueSolution
Widget does not appearVerify the data-campaign-id is correct and the campaign is published.
Iframe blockedCheck that your CSP allows framing from reponse.ai.
Wrong languageSet data-locale explicitly on the script tag.
Events not firingEnsure the listener is registered before the script loads.
PreviousReact Hooks
NextShopify Sync