Salesforce integration

Integrate Agent Assist UI modules with Salesforce to provide real-time suggestions for your human agents during customer service chat conversations.

The Agent Assist Lightning Web Component (LWC) brings Agent Assist features into your Salesforce Agent Desktop. It provides real-time assistance to customer care representatives, helping them resolve customer issues faster, surfacing ready-to-send responses, and suggesting answers to customer questions from a centralized knowledge base.

LWC, developed by Salesforce, is a modern JS framework for defining component logic and templates. The Agent Assist LWC is deployed to and served from your Salesforce instance. It offers enhanced security and integrates directly with Salesforce data and APIs.

Before you begin

To integrate Agent Assist UI modules with Salesforce, you need access to the following resources:

• Node.js

  Google tested and recommends Node.js 18.20.4. There are known compatibility issues with Node.js 20.18.0.

• Salesforce CLI

  Install using the following code: (sudo) npm install -g @salesforce/cli.

• Gcloud CLI

  Install the gcloud command as instructed and authenticate using gcloud auth login.

• Salesforce UI

  • Sign in at your instance URL or login.salesforce.com and note the following:
    • Your Salesforce "My Domain URL". Find this by navigating to the menu bar > Setup menu, then click Setup. Enter a Quick Find search for "My Domain". The domain name is in the following format: MY-DOMAIN-NAME.develop.my.salesforce.com
    • Your Salesforce organization ID. Find this by navigating to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Company Information".

• Agent Assist integration backend

  • Follow the instructions to set up the integration.
  • Before running the deploy script, configure the following environment variables with deploy.sh, or in an .env file at the project root:
    • AUTH_OPTION: Set this to SalesforceLWC.
    • SALESFORCE_DOMAIN: A domain name similar to the following: YOUR_SUBDOMAIN.develop.lightning.force.com. You noted this value in the Salesforce UI prerequisite. Note that you shouldn't include https://.
    • SALESFORCE_ORGANIZATION_ID: You noted this value in the Salesforce UI prerequisite.

Step 1: Set up your project

To start integrating Agent Assist UI modules, follow these steps.

1. Run the following code to clone the Agent Assist integration repository and open your project:

   git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations
   cd salesforce/aa-lwc
   

2. Run the following commands, which will download the UI modules JavaScript files to be deployed later as Static Resources (required by Salesforce to load 3rd party JS):

   npm run generate-static-resources
   npm install
   

Step 2: Set up your environment

You can integrate Agent Assist UI modules in a specific environment, such as production or development. Salesforce calls these environments Organizations (orgs).

Configure your org in the Salesforce console

Within the Salesforce console, follow these steps to configure your org for Agent Assist integration.

1. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Omni-Channel Settings", then click Omni-Channel Settings.
   1. Check Enable Omni-Channel.
   2. Select Automatically log agents into Omni-Channel in the new window or tab.
   3. Click Save.
2. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Communities", then click Digital Experiences > Settings.
   1. Check Enable Experience Workspaces.
   2. Click Save.

Configure your org with the Salesforce CLI

Follow these steps to use the Salesforce CLI to configure your org for Agent Assist integration.

1. Run the following code and authenticate the CLI using the Salesforce login details you normally use.

   npm run login
   

2. Run the following code to deploy the LWC to the org.

   npm run deploy
   

Step 3: Create a connected app

The Agent Assist LWC uses the client credentials OAuth 2.0 flow to authenticate you. A connected application (app) enables the client credentials flow. Use the app's consumer key and consumer secret to configure the Agent Assist LWC to authenticate users with Salesforce.

1. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "App Manager".
   1. Click New Connected App > Create a Connected App > Continue, then enter the following information.
      • Connected App Name: lwc auth
      • API Name: lwc_auth
      • Contact Email: [e-mail]
      • Enable OAuth Settings: checked
      • Callback URL: https://login.salesforce.com/services/oauth2/callback
      • Selected OAuth Scopes: Access the identity URL service
      • Enable Client Credentials Flow: checked
   2. Click Save.
2. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Manage Connected Apps".
   1. Click your connected app's name > Edit Policies.
   2. Navigate to Client Credentials Flow.
   3. For Run As, click the magnifying glass, then select your username.
   4. Click Save.
3. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "App Manager".
   1. Find lwc auth and click expand_more.
   2. Click View > Manage Consumer Details.
   3. Enter the verification code sent to your email.
   4. Copy the consumer key and consumer secret somewhere secure, you will need these for a later step.
4. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "CORS", then click Edit.
   1. Check Enable CORS for OAuth endpoints.
   2. Click Save.

For additional information about connected apps, see the following Salesforce resources.

• Configure Basic Connected App Settings
• Configure a Connected App for the OAuth 2.0 Client Credentials Flow

Step 4: Configure the chat client

To use Agent Assist UI modules with Salesforce, you need a chat client on your agent desktop.

Configure Messaging for In-App & Web

Follow these steps to configure your messenger.

1. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Trusted URLs", then click New Trusted URL.
   1. Enter the API Name: ui_connector
   2. Enter the URL of the UI connector Cloud Run service endpoint you deployed with your Agent Assist integration backend. You can find this URL in the Cloud Run console. For example: https://UI_CONNECTOR_SUBDOMAIN.gcp-region.run.app.
   3. Check all boxes in CSP Directives.
   4. Click Save & New.
   5. Enter the API Name: salesforce_domain
   6. Enter the URL of your Salesforce domain with the following format: https://YOUR_SUBDOMAIN.my.salesforce.com.
   7. Check all boxes in CSP Directives.
   8. Click Save.
2. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Queues", then click New.
   1. Enter the following information.
      • Label: Messaging Queue
      • Queue Name: Messaging_Queue
      • Routing Configuration: Messaging_Routing_Configuration
   2. Click Supported Objects, then add: "Messaging User, Messaging Session".
   3. Click Queue Members, then add: "User: Your Login User".
   4. Click Save.
3. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Permission Sets".
   1. Click Messaging Agents Permission Set.
   2. Click Service Presence Statuses Access > Edit.
   3. Select statuses Busy and Online - Messaging.
   4. Click Add > Save.
4. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Users", then click Users.
   1. Click your username and verify that Service Cloud User is enabled.
   2. Find Permission Set License Assignments on the page.
   3. Click Edit Assignments, then check Messaging for In-App and Web User.
   4. Click Save.
   5. Find Permission Set Assignments on the page.
   6. Click Edit Assignments, then select Messaging Agent Permission Set.
   7. Click Add > Save.
5. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Messaging Settings", then click New Channel.
   1. Select Messaging for In-App and Web.
   2. Enter the Name: Messaging Channel.
   3. Click Save.
   4. Set Routing Type to "Omni-Queue" and Queue to "Messaging Queue".
   5. Click Save and navigate to Messaging Settings.
   6. Click your messaging channel's name, then click Activate.
   7. After reading, accept the Terms and Conditions.
6. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Find search for "Embedded Service Deployments", then click New Deployment.
   1. Click Messaging for In-App and Web > Next > Web > Next.
   2. Fill in the following details:
      • Name: Messaging Embedded Service Deployment
      • Developer Name: Messaging_Embedded_Service_Deployment
      • Domain: example.com
      • Channel: Messaging Channel
   3. Click Save. Wait for deployment to complete.
   4. In Embedded Service Deployment settings, click Publish.
   5. Click Refresh, then Test Messaging.

Test Messaging for In-App & Web

Follow these steps to test your messenger.

1. Click Test Messaging.
2. After the new tab loads, click the speech bubble to start a new test conversation.
3. Send a message, such as "Test".
4. Navigate to the Salesforce browser tab.
5. On the Setup toolbar, click the App Launcher menu, then select Service Console.
6. Click Omni-Channel in the utility toolbar.

7. Set your status to Online - Messaging.

   You should get an incoming conversation. Accept it. This opens a new tab in the Service Console for the conversation. You can't see the chat transcript.

8. Navigate to the menu bar > Setup Menu, then click Edit Page.

9. From the Components menu, drag the Enhanced Conversation into the Conversation Pane.

10. Click Save > Activate > Assign as Org Default > Desktop > arrow_back.

11. Refresh the page.

12. Click Omni-Channel in the utility toolbar.

13. Set your status to Online - Messaging.

14. Reply to the "Test" message to validate messaging is working.

If you get stuck and need more information, see the comprehensive Salesforce Messaging for In-App and Web Set Up Guide.

Step 5: Install the Agent Assist LWC

Follow these steps to add the Agent Assist LWC into a messaging session page using the Lightning Experience Editor. Continue with the test conversation from Step 4.

1. Navigate to the menu bar > Setup Menu, then click Edit Page.

2. From the Components sidebar, move the agentAssistContainerModule into the sidebar.

   Note: The npm deploy command provided this component.

3. Click the component you placed in the previous step. Fill in the form fields as follows to add configuration details.

   • endpoint: The URL of your Agent Integration Backend UI Connector. For example, a URL from the Cloud Run console, like: https://UI-CONNECTOR-ENDPOINT.GCP-REGION.run.app.
   • features: Agent Assist features to include. These must be enabled in your conversation profile. Some available features include CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2,SMART_REPLY,and AGENT_COACHING.
   • conversationProfile: Your Agent Assist conversation profile resource name. For example, projects/GCP-PROJECT-ID/locations/GCP-REGION/conversationProfiles/CONVERSATION-PROFILE-ID
   • consumerKey: The connected app consumer key from Step 3.
   • consumerSecret: The connected app consumer secret from Step 3.