Integrate the Agentforce Conversation Client Web SDK

To embed the Agentforce Conversation Client into an external application, follow these steps to install, initialize, and configure the conversational interface.

1. Install the Package

In your frontend project directory, run this command to install the core package using npm.

1npm install @salesforce/agentforce-conversation-client

2. Initialize the Client

Use the embedAgentforceClient() function to inject the ACC interface into a designated DOM container. To route the conversation to a specific Employee Agent and apply a custom label to the conversational interface, add the agentId and agentLabel to your configuration.

1import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
2
3const initializeClient = async () => {
4  const { loApp } = await embedAgentforceClient({
5    container: "#agentforce-container",
6    // IMPORTANT: Provide your authenticated frontdoor URL
7    frontdoorUrl: "<YOUR_FRONT_DOOR_URL>",
8    agentforceClientConfig: {
9      // IMPORTANT: Provide Employee Agent Id
10      agentId: "ADD EMPLOYEE AGENT ID HERE",
11      renderingConfig: {
12        agentLabel: "My Agent",
13        styleTokens: {
14          headerBlockBackground: "#7B2CBF",
15          headerBlockTextColor: "#ffffff",
16        },
17      },
18    },
19  });
20};
21initializeClient();

3. Configure Rendering Modes

Configure how the interface displays within your page layout by using the renderingConfig property. Dimensions accept both pixels (numbers) and CSS strings.

Floating

Renders a persistent ACC UI widget overlay pinned to the bottom right corner of the viewport. On mobile viewports (<640px), the floating mode ACC UI expands to full screen when maximized.

1import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
2
3const initializeClient = async () => {
4  const { loApp } = await embedAgentforceClient({
5    container: "#agentforce-container",
6    frontdoorUrl: "<YOUR_FRONT_DOOR_URL>",
7    agentforceClientConfig: {
8      // IMPORTANT: agentId is required in all configurations
9      agentId: "ADD EMPLOYEE AGENT ID HERE",
10      renderingConfig: {
11        mode: "floating",
12      },
13    },
14  });
15};
16initializeClient();

Inline

Renders the ACC UI inside the specified parent container.

1import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
2
3const initializeClient = async () => {
4  const { loApp } = await embedAgentforceClient({
5    container: "#agentforce-container",
6    frontdoorUrl: "<YOUR_FRONT_DOOR_URL>",
7    agentforceClientConfig: {
8      agentId: "ADD EMPLOYEE AGENT ID HERE",
9      renderingConfig: {
10        mode: "inline",
11        width: "420px",
12        height: "600px",
13      },
14    },
15  });
16};
17initializeClient();

Header visibility (headerEnabled)

In inline mode, the header is hidden by default. Set headerEnabled: true to show it. In floating mode, the header is always visible regardless of this setting.

1import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
2
3const initializeClient = async () => {
4  const { loApp } = await embedAgentforceClient({
5    container: "#agentforce-container",
6    frontdoorUrl: "<YOUR_FRONT_DOOR_URL>",
7    agentforceClientConfig: {
8      agentId: "ADD EMPLOYEE AGENT ID HERE",
9      renderingConfig: {
10        mode: "inline",
11        headerEnabled: true,
12      },
13    },
14  });
15};
16initializeClient();

Show Agentforce header icon (showHeaderIcon)

By default, the header icon is shown. Set showHeaderIcon: false to hide the Agentforce icon

1import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
2
3const initializeClient = async () => {
4  const { loApp } = await embedAgentforceClient({
5    container: "#agentforce-container",
6    frontdoorUrl: "<YOUR_FRONT_DOOR_URL>",
7    agentforceClientConfig: {
8      agentId: "ADD EMPLOYEE AGENT ID HERE",
9      renderingConfig: {
10        showHeaderIcon: false,
11      },
12    },
13  });
14};
15initializeClient();