afv-library/samples/webapp-template-app-react-sample-b2x-experimental/.a4drules/skills/feature-react-agentforce-conversation-client-embedded-agent/docs/embed-examples.md

Embed examples

Detailed examples for configuring the Agentforce Conversation Client. All examples use the AgentforceConversationClient React component; the underlying embedAgentforceClient API accepts the same agentforceClientConfig shape.

---

Floating mode (default)

A floating chat widget appears in the bottom-right corner. It starts minimized and expands when the user clicks it. This is the default — no renderingConfig is required.

Minimal (no config)

<AgentforceConversationClient />

Explicit floating

<AgentforceConversationClient
  agentforceClientConfig={{
    renderingConfig: { mode: "floating" },
  }}
/>

Floating with a specific agent and theme

<AgentforceConversationClient
  agentforceClientConfig={{
    renderingConfig: { mode: "floating" },
    agentId: "0Xx000000000000",
    styleTokens: {
      headerBlockBackground: "#032D60",
      headerBlockTextColor: "#ffffff",
    },
  }}
/>

---

Inline mode

The chat renders inside the parent container at a specific size. Use this when the chat should be part of the page layout rather than an overlay.

Fixed pixel dimensions

<AgentforceConversationClient
  agentforceClientConfig={{
    renderingConfig: { mode: "inline", width: 420, height: 600 },
  }}
/>

CSS string dimensions

<AgentforceConversationClient
  agentforceClientConfig={{
    renderingConfig: { mode: "inline", width: "100%", height: "80vh" },
  }}
/>

Inline filling a sidebar

<div style={{ display: "flex", height: "100vh" }}>
  <main style={{ flex: 1 }}>{/* App content */}</main>
  <aside style={{ width: 400 }}>
    <AgentforceConversationClient
      agentforceClientConfig={{
        renderingConfig: { mode: "inline", width: "100%", height: "100%" },
      }}
    />
  </aside>
</div>

---

Theming

Use styleTokens to customize colors. Tokens are passed directly to the Agentforce client.

Brand-colored header

<AgentforceConversationClient
  agentforceClientConfig={{
    styleTokens: {
      headerBlockBackground: "#0176d3",
      headerBlockTextColor: "#ffffff",
    },
  }}
/>

Full theme example

<AgentforceConversationClient
  agentforceClientConfig={{
    styleTokens: {
      headerBlockBackground: "#0176d3",
      headerBlockTextColor: "#ffffff",
      messageBlockInboundColor: "#0176d3",
    },
  }}
/>

Dark theme example

<AgentforceConversationClient
  agentforceClientConfig={{
    styleTokens: {
      headerBlockBackground: "#1a1a2e",
      headerBlockTextColor: "#e0e0e0",
      messageBlockInboundColor: "#16213e",
    },
  }}
/>

---

Agent selection

Use agentId to load a specific agent from the org. If omitted, the org's default employee agent is used.

Specific agent by ID

<AgentforceConversationClient
  agentforceClientConfig={{
    agentId: "0Xx000000000000",
  }}
/>

Agent with inline mode and theming

<AgentforceConversationClient
  agentforceClientConfig={{
    agentId: "0Xx000000000000",
    renderingConfig: { mode: "inline", width: 400, height: 700 },
    styleTokens: {
      headerBlockBackground: "#0176d3",
      headerBlockTextColor: "#ffffff",
    },
  }}
/>

---

Using the low-level embedAgentforceClient API

The React component wraps embedAgentforceClient. If you need the raw API (e.g. in a non-React context), the config shape is the same:

import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";

const { loApp, chatClientComponent } = embedAgentforceClient({
  container: "#agentforce-container",
  salesforceOrigin: "https://myorg.my.salesforce.com",
  agentforceClientConfig: {
    agentId: "0Xx000000000000",
    renderingConfig: { mode: "floating" },
    styleTokens: {
      headerBlockBackground: "#0176d3",
      headerBlockTextColor: "#ffffff",
    },
  },
});