Customer Web Client Chat React

React component for embedding the Customer Web Client (Embedded Messaging) chat widget into a UI Bundle. This is a wrapper that dynamically loads the site's embeddedservice_bootstrap script and initializes the floating chat widget with your org, deployment, site, and SCRT2 configuration.

Use this when a user wants agent-based chat on an external site using Customer Web Client Chat (Embedded Messaging) — not the Agentforce Conversation Client. For employee-agent chat inside a Salesforce-hosted app, use @salesforce/ui-bundle-template-feature-react-agentforce-conversation-client instead.

How it works

The component injects <siteURL>/assets/js/bootstrap.js into the page (once), waits for window.embeddedservice_bootstrap to be available, then calls init(orgId, deploymentName, siteURL, { scrt2URL }). It renders nothing itself — the chat UI is a floating widget the bootstrap script mounts.

Step 1: Install

npm install @salesforce/ui-bundle-template-feature-react-customer-web-client-chat

There is no additional SDK dependency — the Embedded Messaging runtime is loaded from your site at runtime.

Step 2: Embed in the app layout

import { CustomerWebClientChat } from "@salesforce/ui-bundle-template-feature-react-customer-web-client-chat";

export default function AppLayout() {
  return (
    <>
      <Outlet />
      <CustomerWebClientChat
        orgId="00D..."
        deploymentName="MyChat"
        siteURL="https://<your-esw-site>"
        scrt2URL="https://<your-org>.my.salesforce-scrt.com"
      />
    </>
  );
}

Step 3: Configure (flat props)

External sites can support agent-based chat when Customer Web Client Chat is properly configured (not Agentforce Conversation Client). Four pieces of information are required:

| Prop | Type | Required | Description | | ---------------- | --------- | -------- | ------------------------------------------------------------------------------- | | orgId | string | Yes | The organization id (15- or 18-char Salesforce id starting with 00D). | | deploymentName | string | Yes | The name of an Embedded Service deployment / channel the agent is connected to. | | siteURL | string | Yes | The ESW site URL. Usually contains ESW and the deployment name. | | scrt2URL | string | Yes | The SCRT2 (Service Cloud Real-Time) chat service URL. Usually contains scrt. | | language | string | No | Chat language. Defaults to "en". | | devMode | boolean | No | Enables Embedded Messaging dev mode. Defaults to false. |

Prerequisites

• An Embedded Service deployment configured for Customer Web Client / Embedded Messaging in your org.
• The site origin must be allowed by the org's CORS allowlist (CorsWhitelistOrigin) and the Embedded Service deployment's allowed origins, or the browser will block the embedded-service-config request.

Development

npm run build   # apply patches -> dist
npm run dev     # run from dist
npm run watch   # watch and re-apply