To embed the Agentforce Conversation Client into an external application, follow these steps to install, initialize, and configure the conversational interface.
In your frontend project directory, run this command to install the core package using npm.
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.
Configure how the interface displays within your page layout by using the renderingConfig property. Dimensions accept both pixels (numbers) and CSS strings.
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.
Renders the ACC UI inside the specified parent container.
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.
By default, the header icon is shown. Set showHeaderIcon: false to hide the Agentforce icon