Salesforce voice integration

The voice integration makes use of the Twilio Open CTI integration to bring a Twilio Flex call center into your Salesforce instance.

Agent Assist uses the media stream from the Twilio Flex call to provide suggestions to your agents in the Salesforce Lightning service console.

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 with this integration. There are known compatibility issues with Node.js 20.18.0. For instructions to install specific versions of Node.js, see nvm.
  • Salesforce CLI. Install using the following terminal command: (sudo) npm install -g @salesforce/cli
  • Gcloud CLI Install the gcloud command as instructed and authenticate using the following code: gcloud auth login
  • Salesforce UI
    1. 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
    1. Follow the instructions to set up the integration.
    2. 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 toSalesforceLWC
      • SALESFORCE_DOMAIN: A domain name like: 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 Twilio Flex

Twilio Flex serves as the softphone in this integration. You can login to the Twilio console to set up a Flex account. Visit the Twilio setup page to get detailed instructions on how to create a Flex account.

Install SIPREC connector add-on

The SIPREC connector add-on allows your Twilio Flex account to make SIPREC forks of voice call media streams to Agent Assist. Follow these steps to install the SIPREC connector add-on.

  1. Navigate to Twilio Home > Marketplace > Catalog > Twilio > Siprec Connector.
  2. Click Install > the terms and conditions acknowledgment checkbox > Install.

  3. On the Configure tab, configure the plugin as follows:

    • Unique Name: SipRec1

    • Session Recording Server:

      sip:+@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla

    • Work with your Google representative to provision the GTP number using the telephony integration overview documentation which has more details on the process. You can ignore the SBC configuration and validation steps as they are already completed for the Twilio Siprec Connector.

  4. Navigate to Twilio Home > Functions and Assets.

    • If Functions and Assets is not visible in the sidebar, pin it from Explore Products.

  5. Click Create Service.

  6. Name the new service ui-connector-auth.

  7. In the editor that appears, click Add + > Add Function.

  8. Name the function conversation-name.

  9. Click , and change the function visibility to Public.

  10. Copy and paste the entire contents of ui-connector-auth.js from the GitHub repository into the editor.

  11. Click Save.

  12. Click Deploy All.

Configure IVR with Flex Studio

The IVR consists of configuring a programmatic call flow with Twilio Studio to make the SIPREC fork of the media stream to Agent Assist. It also makes an HTTP post to share the phone number and conversation Id with Agent Assist. Follow these steps to configure IVR with Flex Studio.

  1. Navigate to the Twilio Console
  2. Click Develop > Phone Numbers > Manage > Active Numbers. There should be one row in the table with the default Twilio number provisioned for your Flex Account.
  3. In the Voice - Studio Workflow section, click Voice IVR.
  4. Drag a Make HTTP Request widget into the flow.
  5. Disconnect Incoming Call from the SendCallToAgent widget's input.
  6. Connect Incoming Call to the Make HTTP Request widget's input.

  7. Configure the Make HTTP Request widget with the following details:

    • Widget Name: register_twilio
    • Request Method: POST
    • Request URL: <your-ui-connector-cloud-run-url>.run.app/register-app
    • Content type: Application/JSON

    • Request body:

      {
"accountSid": "yourTwilioAccountSid",
"authToken": "yourTwilioAccountAuthToken"
}

  8. Drag a Run Function widget into the flow.

  9. Connect the Success and Fail outputs of the register_twilio widget to the input of the Run Function widget.

  10. Create a widget with the following details:

    • Widget Name: conversation_name
    • Service: ui-connector-auth
    • Environment: ui
    • Function: conversation-name

    • Function Parameters:

      • token:
      {{ widgets.register_twilio.parsed.token }}
      - **endpoint**: `.run.app/conversation-name` - **phone**: 
        {{ trigger.call.From | replace_first:'+','' }}
      - **conversationName**: 
        projects//locations//conversations/TW-{{trigger.call.From | replace_first:'+','' }}-{{trigger.call.CallSid}}

  11. Drag a Fork Stream widget from the sidebar into the flow.

  12. Connect the Success and Fail outputs of the Make HTTP Request widget to the input of the Fork Stream widget.

  13. Connect the Next node of the Fork Stream widget to the SendCallToAgent widget.

  14. Configure the Fork Stream widget as follows:

    • Stream Action: Start
    • Stream Type: Siprec
    • Connector Name: Siprec1
    • Tracks: Both Tracks

    • Stream Parameters:

      • Key: conversation

      • Value:

        projects//conversations/TW-{{trigger.call.From | replace_first:'+','' }}-{{trigger.call.CallSid}}

  15. Click Save > Publish.

Account Details

Follow this step to collect your Twilio Flex account details. You need this information to configure the Flex CTI in Salesforce later.

  1. Navigate to Twilio Home > Account Dashboard, and write down the following information:
    • Account SID
    • My Twilio phone number

Step 2: Set up your development 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 to download the UI modules JavaScript files which you deploy later as Static Resources. Salesforce requires the static resources to load 3rd party JS.

    npm run generate-static-resources
npm install

Step 3: Set up your Salesforce 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 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 4: Create a connected app

The Salesforce Lightning Web Component 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 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".
  2. 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: your_email@example.com
    • 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
  3. Click Save.
  4. Navigate to the menu bar > Setup Menu, then click Setup.
  5. Enter a Quick Find search for "Manage Connected Apps".
  6. Click your connected app's name > Edit.
  7. Navigate to Client Credentials Flow.
  8. For Run As, click the magnifying glass, then select your username.
  9. Click Save.
  10. Navigate to the menu bar > Setup Menu, then click Setup.
  11. Enter a Quick Find search for "App Manager".
  12. Find lwc auth and click .
  13. Click View > Manage Consumer Details.
  14. Enter the verification code sent to your email.
  15. Copy the Consumer Key and Consumer Secret somewhere secure, you need these for a later step.
  16. Navigate to the menu bar > Setup Menu, then click Setup.
  17. Enter a Quick Find search for "CORS", then click Edit.
  18. Check Enable CORS for OAuth endpoints.
  19. Click Save.
  20. Navigate to the menu bar > Setup Menu, then click Setup.
  21. Enter a Quick Find search for "Trusted URLs", then click New Trusted URL.
  22. Enter the API Name: ui_connector
  23. 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.
  24. Check all boxes in CSP Directives.
  25. Click Save & New.
  26. Enter the API Name: ui_connector_wss
  27. 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. Change the protocol to wss, for WebSockets traffic. For example: wss://UI_CONNECTOR_SUBDOMAIN.GCP-REGION.run.app.
  28. Check all boxes in CSP Directives.
  29. Click Save & New.
  30. Enter the API Name: salesforce_domain
  31. Enter the URL of your Salesforce Domain with the following format: https://YOUR_SUBDOMAIN.my.salesforce.com.
  32. Check all boxes in CSP Directives.
  33. Click Save.

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

Step 5: Install Twilio Flex CTI Plugin

Salesforce provides Salesforce Open CTIto allow integration of 3rd party softphones with your Salesforce instance.

Twilio Flex CTI uses Salesforce Open CTI to allow you to use Flex directly within your Salesforce instance. Follow Twilio's instructions to set up Twilo Flex CTI in your Salesforce instance.

Step 6 : Install the Salesforce Lightning Web Component

Follow these steps to use the Lightning Experience Editor to add the Salesforce Lightning Web Component into the contact page where your Twilio Flex CTI opens when a new call comes in.

  1. Navigate to the Service Console, and select Contacts.
  2. Click the Setup Menu > Edit Page.
  3. Click Template > Change.
    • Select Header and Two Equal Regions.
    • Click Next.
    • Map each region to a new region.
    • Click Done.
  4. From the Components sidebar, move the agentAssistContainerModule into the sidebar. Note: The npm deploy command provided this component.
  5. Click the component you placed in the previous step and 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, and AGENT_COACHING. Note that some features, like SMART_REPLY, are not available for voice-twilio.
    • channel: Indicate that the integration is for voice.
    • channelType: Indicate that the voice integration type is twilio.
    • conversationProfile: Your Agent Assistconversation 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.

Step 7: Test the integration

You can test the voice integration with a test call to the Salesforce call center.

  1. Log into Twilio Flex from your Salesforce service console.
  2. Call your Twilio Flex number. You made a note of this in Step 1.
  3. In your Salesforce service console, accept the call. The screen should open a new or existing contact page for the number that called.
  4. If it is a new contact page, save the contact. When the Contact page loads, the Salesforce Lightning Web Component should load in the sidebar.
  5. Test both sides of the conversation, ensuring that Agent Assist features are working as you've configured them.