# developer Agentforce Conversation Client - Full Documentation # Agentforce Conversation Client Explore the Agentforce Conversation Client (ACC) to integrate Agentforce Employee Agent (AEA) conversation experiences into both Salesforce Lightning and external web applications. ### Key Purpose: - Understand how ACC works, provides the infrastructure for continuous real-time streaming of Agentforce Employee Agent (AEA) messages, and renders rich components using Lightning Types integration. - Programmatically control the ACC panel to open, close, switch between Employee Agents, and execute utterances. - Integrate Agentforce conversational experiences into your external web apps. **note:** If you are integrating the ACC UI into a custom external web application hosted outside of Salesforce, see [Agentforce Conversation Client Web SDK](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-overview.md). ### Explore the Guides: - **[Introducing Agentforce Conversation Client](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-get-started.md):** Understand how the ACC works, its core capabilities (like streaming and dynamic rendering), and how it delivers value across different user interfaces. - **[Agentforce Conversation Client API](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-api.md):** Learn how to programmatically open, close, and execute utterances in the native Agentforce side panel using custom Lightning Web Components (LWCs) inside Salesforce. - **[Agentforce Conversation Client Web SDK](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-overview.md):** Learn how to authenticate and embed the conversational Employee Agent into custom, external web applications hosted outside of Salesforce. - **[Integrate Agentforce Conversation Client in React Applications](https://developer.salesforce.com/docs/platform/einstein-for-devs/guide/reactdev-acc.html):** Learn how to build internal React applications with conversational capabilities using Agentforce Vibes and Lightning Out 2.0. # Agentforce Conversation Client API Use the Agentforce Conversation Client (ACC) API to programmatically manage the state of the native Agentforce side panel within the Salesforce Lightning desktop interface. The ACC API is implemented as a headless LWC module (`lightning/accApi`) that acts as a router of app-to-panel messages. It enables communication between custom LWC components and Agentforce panel. With the ACC API, interact with your agent inside Salesforce application programmatically to: - Open and close a panel - Execute utterances - Reset the panel ### Prerequisites Before implementing the API, ensure your environment meets the following requirements: - **Interface**: This feature is supported exclusively in the Salesforce Lightning Experience desktop environment. - **Compatibility**: This feature is for the default Lightning Experience panel only; other interfaces like Tableau or SentOS are not supported. - **API Version**: The lightning/accApi module requires API version 59.0 or later. - **Feature Access**: Your Salesforce org must have Agentforce enabled. ### When to Use the ACC API Use this API for programmatic control to open, close, or send a text utterance to the native Agentforce side panel from a custom LWC. You can also reset the panel to clear the conversation history and start a new conversation. ### Get Started with the ACC API To interact with the panel, import the methods from the lightning/accApi module into your custom Lightning web component JavaScript file. ```javascript import { open, close, execute, reset } from "lightning/accApi"; ``` **note:** If you do not yet have a custom LWC, please refer to the standard [Salesforce Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/get-started-introduction.html) to initialize your project and create your component first. ### Component Configuration To make your custom component available on record and home pages, add targets to the component's `meta.xml` file: ```xml 65.0 true lightning__AppPage lightning__HomePage lightning__RecordPage ``` After adding the targets and deploying your component, you can use the Lightning App Builder to include the component on a record or home page. See [Create and Configure Lightning Experience Record Pages](https://help.salesforce.com/s/articleView?id=platform.lightning_app_builder_customize_lex_pages.htm). ### ACC API Reference & Examples Communicate directly with the panel from your custom LWC components. All Panel API methods are asynchronous and return a void promise (`Promise`). #### Open the Panel - **Signature**: `export function open(botId?: string): Promise;` **Description**: This function opens the Agentforce chat panel and resolves once the panel is successfully opened. It accepts an optional `botId` to open the panel with a specific agent; if a `botId` string isn't provided, the panel opens using the last used agent. **Example: Open with a Specific Agent** JavaScript ```javascript import { open } from 'lightning/accApi'; async handleOpenPanel() { // Define the botId as a string const botId = '0Xx...'; // Open the panel with a specific agent await open(botId); } ``` #### Close the Panel - **Signature**: `export function close(): Promise;` **Description**: This function hides the Agentforce chat panel and resolves once it is successfully closed. This method requires no parameters. **Example: Close the Panel** JavaScript ```javascript import { close } from 'lightning/accApi'; async handleClosePanel() { // Close the panel await close(); } ``` #### Execute an Utterance The `execute` method programmatically sends a command to the agent as if the user had typed it into the panel. This method executes the utterance for the provided `botID`. - **Signature**: `export function execute(utterance: string, botId: string): Promise;` **Description**: Provide a natural language string directly to the `execute` method. This method requires a `botId` parameter to execute the utterance for the specific agent. If multiple execute requests are made, they are queued and executed strictly in sequence. **Example: Execute a Natural Language Utterance** JavaScript ```javascript import { execute } from 'lightning/accApi'; async askForSummary() { // Define the utterance as a string const utteranceString = 'Summarize this Account'; // Execute the natural language utterance await } ``` #### Reset the Panel The `reset` method programmatically clears the conversation history and starts a new conversation in the default Agentforce panel. - **Signature**: `export function reset(): Promise;` **Description**: This function resets the Agentforce panel and resolves once it is successfully reset. This method requires no parameters. **Example: Reset the Panel** JavaScript ```javascript import { reset } from 'lightning/accApi'; async handleResetPanel() { // Reset the panel to clear the conversation history await reset(); } ``` ### Functional Example & UI Behavior This example showcases a custom Lightning Web Component (LWC), CustomAgentforceLauncher, that demonstrates the core programmatic control features of the Agentforce Conversation Client API. This component uses methods imported from the `lightning/accApi` module to manage the native Agentforce side panel. The component includes four asynchronous methods: - **`handleOpenChat()`**: Calls the `open()` method to display the Agentforce chat panel. - **`handleCloseChat()`**: Calls the `close()` method to hide the Agentforce chat panel. - **`handleSendMessage()`**: Calls the `execute(utterance, botId)` method to programmatically send a natural language utterance, "What is my account balance?", to the agent. - **`handleResetChat()`**: Calls the `reset()` method to clear the conversation history and start a new conversation. This functional snippet illustrates how custom host applications can communicate directly with the panel to manage its state (open/close/reset) and invoke actions on the agent (execute utterance). **Example** JavaScript ```javascript import { LightningElement } from "lwc"; import { open, close, execute, reset } from "lightning/accApi"; export default class CustomAgentforceLauncher extends LightningElement { async handleOpenChat() { await open(); } async handleCloseChat() { await close(); } async handleSendMessage() { const utterance = "What is my account balance?"; await execute(utterance, botId); } async handleResetChat() { await reset(); } } ``` ### ACC API Considerations Review these limitations and best practices when building with the ACC API: - **Queueing Behavior**: All requests that are made would be queued and executed strictly in sequence. The platform ensures that the next query is only executed after the previous one has completed. - **Executing Actions**: Currently, only natural language utterances are supported. You cannot execute an action directly by passing its name. - **Finding the Bot ID**: Retrieve the `botId` for your agents by checking the URL within the Agent Builder in Salesforce Setup. - **Multiple Panels**: Use the `botId` to explicitly target a specific agent to prevent behavior overlap if multiple agents are active in the same org. - **No Return Data**: The `execute` method does not return the agent's textual response to your component. - **Asynchronous Methods**: `open`, `close`, `execute`, and `reset` are asynchronous and must be handled using standard JavaScript Promise patterns. # Agentforce Conversation Client Web SDK Agentforce Conversation Client (ACC) Web SDK helps developers integrate Agentforce Employee Agent (AEA) conversational experiences into external web applications in a simple and flexible way. As a framework-agnostic SDK, it easily adapts to different frontend technologies. Built on the Lightning Out 2.0 platform as a Lightning Web Component Interface (LWCI), this SDK enables developers to quickly implement high-fidelity conversational interfaces that maintain the sophisticated rendering and interaction logic found in native Salesforce applications. It integrates your custom frontend with the Agentforce infrastructure, handling secure connections, real-time message state management, and the dynamic rendering of Lightning Types to deliver rich, interactive components. ### Prerequisites #### Set Up Your Salesforce Org Before integrating the Agentforce Conversation Client Web SDK into an external application, your Salesforce Administrator must configure the Salesforce org. To securely render the ACC UI outside of Salesforce, the ACC requires an authenticated session negotiated via an External Client App. Review and complete these prerequisite configurations to ensure your external application can securely communicate with Salesforce. - [Setup External Client Apps (ECA)](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-setup-auth-external.md): Configure an External Client App (ECA) to manage OAuth 2.0 authentication and generate the required client credentials. - [Setup Trusted Domains](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-setup-trusted-domains.md): Update your Salesforce session settings to add your web application as a trusted domain for inline frames and ensure first-party cookie restrictions are disabled. - [Generate the Access Token for Agentforce Conversation Client Web SDK](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-setup-token.md): Execute an OAuth flow from your backend server to negotiate a secure session token for the frontend client. - [Get Your Employee Agent ID](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-get-acc-agent-id.md): Access the setup in your org and retrieve the unique 18-character `agentId` required to identify your agent in the ACC Web SDK. # Customize UI Style Tokens The ACC UI is rendered inside an iframe. Custom CSS outside the iframe cannot style the ACC UI interior. To customize the interface, map standard styling rules by using the `styleTokens` object within your `agentforceClientConfig`. Style tokens are passed as strings. CSS color values, pixel values, and other CSS properties are all string values. ```javascript import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client"; const initializeClient = async () => { const { loApp } = await embedAgentforceClient({ container: "#agentforce-container", frontdoorUrl: "", agentforceClientConfig: { // IMPORTANT: agentId is required in all configurations agentId: "ADD EMPLOYEE AGENT ID HERE", renderingConfig: { styleTokens: { headerBlockBackground: "#0176d3", headerBlockTextColor: "#ffffff", }, }, }, }); }; initializeClient(); ``` ## Supported Style Tokens Supported style tokens are updated frequently. To ensure you use the most current token names and values for headers, message bodies, and input areas, refer directly to the [salesforce/agentforce-conversation-client](https://www.npmjs.com/package/@salesforce/agentforce-conversation-client) NPM Repository. Do not use hardcoded styling specifications in production without verifying them against the latest package release. ## Customize Images The ACC Web SDK supports custom images for visual elements, providing additional branding flexibility for your conversational interface. This enhancement provides greater branding flexibility when you integrate Agentforce Employee Agent (AEA) conversational experiences into external web applications. The ACC Web SDK supports customization of the following visual elements: #### Floating button icon Customize the icon for the Floating Action Button (FAB), which serves as the primary entry point for the Agentforce Conversation Client. This button appears in the bottom-right corner of the viewport when using floating mode. ![](https://developer.salesforce.com/media/acc-images/acc-fab.png '{"class": "image-md"}') #### Header image Customize the image displayed in the ACC UI header at the top of the conversation panel. This prominent branding area provides visual context for users throughout their interaction with the Agentforce Employee Agent. #### Agent avatar Customize the agent profile image that appears alongside agent messages in the conversation thread. ![](https://developer.salesforce.com/media/acc-images/acc-agent-avatar.png '{"class": "image-md"}') The SDK uses your custom images in place of the default images for those visual elements. **important:** Custom images must be available from Salesforce and publicly accessible so the ACC Web SDK can access them at runtime. For example, you can upload images to Salesforce CMS and make them publicly accessible. Configuration properties are updated frequently. For the complete and most current property reference, see [salesforce/agentforce-conversation-client](https://www.npmjs.com/package/@salesforce/agentforce-conversation-client) NPM repository. --- #### See Also [Agentforce Conversation Client API](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-api.md) # Introducing Agentforce Conversation Client Agentforce Conversation Client (ACC) is the unified UI platform and framework for building Agentforce Employee Agent conversation experiences within Salesforce Lightning and external web applications. It provides the essential building blocks, such as the ACC panel, message rendering, input handling, and connection logic, required to deploy an Employee Agent. Whenever you interact with an Agentforce Employee Agent—whether it’s a sidebar in Salesforce CRM, a Conversational UI on a Tableau dashboard, or Agentforce for Setup—it is likely running on ACC. Built for enterprise scale, the ACC framework reliably processes over 2.5 million actions across these user interfaces. ACC handles the heavy lifting of displaying text, streaming AI responses, and rendering interactive components so you don’t have to build a conversational interface from scratch. ## Why Use ACC? (How It Delivers Value) The ACC bridges the gap between raw AI data and a fully functional, interactive user experience. ACC provides the necessary front-end infrastructure to solve complex rendering challenges. By leveraging ACC, teams can: - **Reduce UI Rebuild Effort**: Drop a pre-built ACC UI container into your app rather than coding an interface, and connection logic from scratch. Leverage built-in streaming infrastructure: ACC provides the complex infrastructure required to handle continuous, real-time token streaming, ensuring a natural and responsive conversational experience. - **Render Rich Components Dynamically**: A key differentiating pattern of ACC is its ability to automatically render rich UI components using standard and custom Lightning Types natively within the conversation. - **Support Personalization at Runtime**: ACC automatically interprets the Employee Agent's response and renders the correct UI component on the fly without hard-coding. - **Enable Write Once, Deploy Anywhere**: Support a consistent experience whether the Employee Agent is accessed by an employee in Service Cloud, a customer on a public website, or embedded in a custom app. - **Cross-Framework Compatibility**: Built on the Lightning Out 2.0 platform as a Lightning Web Component Interface (LWCI), the ACC can be embedded into any non-LWC tech stack. - **Dynamic Flexibility**: Developers can use natural language prompts to switch between Employee Agents or automate UI styling updates. - **Direct Agent Connection**: Seamlessly connect your custom UI to Employee Agents configured with specific topics, actions, and instructions for domain-specific tasks. ## Key Capabilities - **Token-by-Token Streaming**: ACC handles end-to-end token streaming for various content types, displaying true progress status updates in the ACC UI to indicate the current execution step, thereby reducing perceived latency. - **Conversation Entry Point**: Provides a default Floating Action Button (FAB) experience that serves as the primary entry point for the Agentforce Conversation Client. Upon interaction, it initializes the conversational interface and displays a configured welcome message confirming a secure connection to the Agentforce Employee Agent. ![React Start](https://developer.salesforce.com/media/acc-images/react-acc3.png '{"class": "image-md"}') ![React Start](https://developer.salesforce.com/media/acc-images/react-acc1.png '{"class": "image-md"}') - **Lightning Types Integration**: A primary differentiating pattern of the ACC that automatically maps Salesforce Lightning Types to the correct UI renderers for input, output, list, and picklist. This allows it to render complex, interactive UI components—such as flight bookings or property listings—directly within the React application. For more information about Lightning Types, see [Lightning Types in Agent Action](https://developer.salesforce.com/docs/ai/agentforce/guide/lightning-types-standard.html). ![React Start](https://developer.salesforce.com/media/acc-images/react-acc2.png '{"class": "image-md"}') - **Dynamic Rendering Engine**: Constructs UI components in real-time based on inputs from the Agentforce Employee Agent planner and Lightning type responses. The engine dynamically assembles elements on-the-fly and injects them into the designated panel. - **Brand Styling and Theming**: Provides customizable brand styling hooks (fonts, colors, borders, spacing) and component substitutions to match your custom branding. - **Customizable UI Branding via SDK Tokens**: Enables developers to use Agentforce Vibes and natural language prompts to refine the conversational interface. This capability utilizes the ACC SDK’s UI style tokens to systematically update elements like header colors and message block styling to match the host application's branding. - **Responsive Display Configurations (Inline Mode)**: The interface is highly responsive across various dashboard layouts and supports specialized configurations, specifically Inline Mode, which allows the ACC UI to be rendered inside a designated parent container within the internal React application. #### See Also [Integrate Agentforce Conversation Client Web SDK with External Apps](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-integrate-with-external-apps.md) # Set Up External Client Apps External client apps (ECA) are a new generation of connected apps. ECAs provide single sign-on (SSO) and use OAuth protocols to authorize external apps. The external apps that are integrated with Salesforce can run on the customer success platform and other platforms, devices, or SaaS subscriptions. For more information on ECAs, including how to configure them in your organization, see [External Client Apps](https://help.salesforce.com/s/articleView?id=xcloud.external_client_apps.htm). ACC uses Lightning Out 2.0 to embed the LWC-based conversational client into external, third-party web applications that run outside the Salesforce domain. Because these applications operate outside the Salesforce trust boundary, they require a secure way to authenticate and interact with Salesforce services. An External Client App (ECA) provides this capability by enabling OAuth 2.0–based authentication and authorization. With an ECA, the embedded ACC client securely accesses Salesforce APIs and user context from outside Salesforce. See [Set Up Authentication for Lightning Out 2.0](https://help.salesforce.com/s/articleView?id=platform.lightning_out_auth.htm&type=5). 1. To create an ECA for your ‌organization, from the Salesforce Setup page, enter _External_ in the Quick Find box, and then select **External Client App Manager**. 2. Click **New External Client App**. 3. Enter the basic information - Enter the name for the ECA to display in the External Client App Manager. - Enter the API name to be used when referring to your app from a program. This field defaults to a version of the app’s name with underscores in place of the spaces. - Enter the contact email for Salesforce to use in case we want to contact you or your support team. - Determine the distribution state. To develop an app for your local org, choose **Local**. To develop an app for packaging and distribution, choose **Packaged**. 4. Click **Enable OAuth** to configure the OAuth policy. 5. Enter the app settings. - Enter the **Callback URL**. The callback URL is the app URL where you’re embedding the code and the URL can accept the authentication returned from the Salesforce ECA. An example of a callback URL is https://\<3p-domain\>/callback.html. - For **OAUTH Scopes**, select Manage user data via APIs (api), Manage user data via Web browsers (web), and Access Lightning applications (lightning). If you have other OAuth needs, select other scopes as needed. 6. For Flow Enablement, select the appropriate flow for your web app. - If you select **Enable Authorization Code and Credentials Flow**, specify if user credentials are required in the POST body. - If you select **Client Credentials Flow**, it only works with the Manage user data via APIs (api), Access Lightning applications (lightning), or Manage user data via Web browsers(web) OAuth Scopes. 7. For Security, select **Require secret for Refresh Token** and any other options you need. 8. Click **Create**. If you are generating an access token, on the Settings tab, click **Consumer Key and Secret** to copy and save the values. You need the consumer key value for the client_id and the consumer secret value for the client_secret. ## Additional JWT Bearer Flow Settings To use the JWT Bearer authentication flow, after you create your ECA, you must follow these steps. #### Update the OAuth Policies for your ECA. 1. In Salesforce Setup, enter External in the Quick Find box, and then select External Client App Manager. 2. To edit your ECA, select it from the list of apps. 3. Click Edit. 4. In the OAuth Policies section, update the Permitted Users value to Admin approved users are pre authorized. ![](https://developer.salesforce.com/media/manage-external-client-apps.png '{"class": "image-lg"}') 5. In the App Policies section, add the custom permission set to the Selected Permission Sets list. ![](https://developer.salesforce.com/media/app-policies.png '{"class": "image-lg"}') 6. Save and close. --- #### See Also [Setup Trusted Domains](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-setup-trusted-domains.md) ## Get Your Employee Agent ID To deploy a specific Employee Agent via the Web SDK, configure the correct integration user permissions and retrieve the unique identifier for your Agent. 1. From **Setup**, in the **Quick Find** box, enter `Agentforce Agents`, and then select **Agentforce Employee Agent**. 2. Locate the Employee Agent that you want to embed in your external application. 3. Open the Agent record and copy its 18-character Salesforce record ID from the URL. You must provide this `agentId` during the ACC SDK initialization. --- #### See Also [Integrate the Agentforce Conversation Client Web SDK](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-integrate.md) ## Integrate Agentforce Conversation Client Web SDK with External Apps To integrate this conversational experience into custom external web applications, developers use the Agentforce Conversation Client Web SDK. The SDK abstracts away the complexities of real-time Employee Agent connectivity, enabling complex rich UI and granting developers granular control over the ACC UI. ### When to Use the Agentforce Conversation Client Web SDK Review these guidelines to determine if this is the correct integration path for your project: - **External Applications**: Use the ACC Web SDK if you are integrating a conversational Employee Agent into an external website or custom frontend hosted outside of Salesforce. This SDK provides standard ACC UI features out of the box, such as streaming text, feedback, brand styling and theming. - **Headless Integrations**: Don’t use the ACC Web SDK if you are building a purely headless Employee Agent integration, such as an Employee Agent that runs via SMS, WhatsApp, or a custom native mobile implementation. --- #### See Also [Agentforce Conversation Client Web SDK](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-overview.md) ## 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. ```bash npm 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. ```javascript import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client"; const initializeClient = async () => { const { loApp } = await embedAgentforceClient({ container: "#agentforce-container", // IMPORTANT: Provide your authenticated frontdoor URL frontdoorUrl: "", agentforceClientConfig: { // IMPORTANT: Provide Employee Agent Id agentId: "ADD EMPLOYEE AGENT ID HERE", renderingConfig: { agentLabel: "My Agent", styleTokens: { headerBlockBackground: "#7B2CBF", headerBlockTextColor: "#ffffff", }, }, }, }); }; initializeClient(); ``` ### 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. ```javascript import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client"; const initializeClient = async () => { const { loApp } = await embedAgentforceClient({ container: "#agentforce-container", frontdoorUrl: "", agentforceClientConfig: { // IMPORTANT: agentId is required in all configurations agentId: "ADD EMPLOYEE AGENT ID HERE", renderingConfig: { mode: "floating", }, }, }); }; initializeClient(); ``` #### Inline Renders the ACC UI inside the specified parent container. ```javascript import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client"; const initializeClient = async () => { const { loApp } = await embedAgentforceClient({ container: "#agentforce-container", frontdoorUrl: "", agentforceClientConfig: { agentId: "ADD EMPLOYEE AGENT ID HERE", renderingConfig: { mode: "inline", width: "420px", height: "600px", }, }, }); }; initializeClient(); ``` #### 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. ```javascript import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client"; const initializeClient = async () => { const { loApp } = await embedAgentforceClient({ container: "#agentforce-container", frontdoorUrl: "", agentforceClientConfig: { agentId: "ADD EMPLOYEE AGENT ID HERE", renderingConfig: { mode: "inline", headerEnabled: true, }, }, }); }; initializeClient(); ``` #### Show Agentforce header icon (`showHeaderIcon`) By default, the header icon is shown. Set `showHeaderIcon: false` to hide the Agentforce icon ```javascript import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client"; const initializeClient = async () => { const { loApp } = await embedAgentforceClient({ container: "#agentforce-container", frontdoorUrl: "", agentforceClientConfig: { agentId: "ADD EMPLOYEE AGENT ID HERE", renderingConfig: { showHeaderIcon: false, }, }, }); }; initializeClient(); ``` #### See Also [Customize UI Style Tokens](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-customize-tokens.md) ## Generate the Access Token for Agentforce Conversation Client Web SDK To complete the authentication process, you need to generate an access token and a `frontdoor` URL. Use the generated `frontdoor` URL as the `authCredential` value when you initialize the SDK. ## Generate the Access Token To generate the token without creating logic for single sign-on, you can use this command to get the access_token. In this command, the location references your Salesforce org and `client_id` and `client_secret` are the values that you copied and saved from the OAuth Settings. ``` curl --location 'https:///services/oauth2/token' \ --data-urlencode 'grant_type=client_credentials' \ --data-urlencode 'client_id=' \ --data-urlencode 'client_secret=' ``` For more information on Salesforce OAuth flows and access tokens, see - [User-Agent OAuth Authentication Flow](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/intro_oauth_user_agent_flow.htm) - [OAuth 2.0 User-Agent Flow](https://developer.salesforce.com/docs/platform/mobile-sdk/guide/oauth-useragent-flow.html) - [Portal Authentication Using OAuth 2.0 and Salesforce Site](https://developer.salesforce.com/docs/platform/mobile-sdk/guide/oauth-portal-force-com-sites.html) ## Generate a Frontdoor URL for Embedding Frontdoor URLs are used to bridge into UI sessions, giving users uninterrupted access to Salesforce and other apps. It uses an existing session to automatically log users into a new UI with making them enter their credentials again. **note:** Frontdoor URLs are short-lived. For session refresh, a new frontdoor URL must be generated. ### Example: Generate a Frontdoor URL in JavaScript ``` const getFrontdoorUrl = async (accessToken: string, instanceUrl: string) => { try { const frontdoorEndpoint = `${instanceUrl}/services/oauth2/singleaccess`; const myHeaders = new Headers(); myHeaders.append('accept', 'application/json'); myHeaders.append('authorization', `Bearer ${accessToken}`); myHeaders.append('content-type', 'application/x-www-form-urlencoded'); const urlencoded = new URLSearchParams(); const requestOptions = { method: 'POST', headers: myHeaders, body: urlencoded }; const response = await fetch(frontdoorEndpoint, requestOptions); if (!response.ok) { return {error: `Salesforce API responded with ${response.status}`, statusCode: response.status}; } const responseData = await response.json(); return {frontdoorUrl: responseData.frontdoor_uri}; } catch (error) { // eslint-disable-next-line no-console console.error('Error in getFrontdoorUrl:', error); return {error: error.message || 'Failed to generate frontdoor URL'}; } }; ``` For information on how to use the UI Bridge API to generate frontdoor URLs, see [Generate a frontdoor URL to Bridge into UI Sessions](https://help.salesforce.com/s/articleView?id=xcloud.frontdoor_singleaccess.htm&type=5). ## Authentication Management - Don't hardcode OAuth tokens or frontdoor URLs in your client-side code. - Pass credentials to the browser only when strictly necessary. Credentials can be scrapped from the browser by malicious actors. --- #### See Also [Get Your Employee Agent ID](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-get-acc-agent-id.md) ## Setup Trusted Domains After creating your ECA, you need to update your Salesforce settings for trusted domains and use of cookies. Updating settings requires Salesforce Admin permissions. ### Update Session Setting for Trusted Domains Add a trusted domain for the web app where you are embedding your insights. - At the top of any Salesforce page, click the setup gear icon, then click **Setup**. ![](https://developer.salesforce.com/media/setup-trusted-domains.png '{"class": "image-xs"}') - From the Setup page, enter _Session_ in the Quick Find box, and then select **Session Settings**. - Scroll down to **Trusted Domains for Inline Frames** and click **Add Domain**. - Enter the domain. Acceptable formats are `example.com`, `https://example.com`, and \*.example.com. - Select **Lighting Out** for the iFrame type and save. --- #### See Also [Generate the Access Token for Agentforce Conversation Client Web SDK](https://developer.salesforce.com/docs/platform/accsdk/guide/acc-sdk-setup-token.md)