Console
    Contact Us Start free

    Salesforce voice integration with Twilio Flex

    This 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 Findsearch 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 Findsearch 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 to SalesforceLWC
        • 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 acknowledgmentcheckbox > Install.
    3. On the Configuretab, configure the plugin as follows:
      • Unique Name: SipRec1
      • Session Recording Server: 
        sip:+<GTP-provisioned-phone-number>@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 Assetsis 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 Workflowsection, click Voice IVR.
    4. Drag a Make HTTP Requestwidget into the flow.
    5. Disconnect Incoming Callfrom the SendCallToAgentwidget's input.
    6. Connect Incoming Callto the Make HTTP Requestwidget's input.
    7. Configure the Make HTTP Requestwidget 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 Functionwidget into the flow.
    9. Connect the Successand Failoutputs of the register_twiliowidget to the input of the Run Functionwidget.
    10. Create a widget with the following details:
      • Widget Name: conversation_name
      • Service: ui-connector-auth
      • Environment: ui
      • Function: conversation-name
      • Function Parameters:
        • token: 
          &lcub;&lcub; widgets.register_twilio.parsed.token &rcub;&rcub;
        • endpoint: <your-ui-connector-cloud-run-url>.run.app/conversation-name
        • phone: 
          &lcub;&lcub; trigger.call.From | replace_first:'+','' &rcub;&rcub;
        • conversationName: 
          projects/<project>/locations/<location>/conversations/TW-&lcub;&lcub; trigger.call.From | replace_first:'+','' &rcub;&rcub;-&lcub;&lcub; trigger.call.CallSid &rcub;&rcub;
    11. Drag a Fork Streamwidget from the sidebar into the flow.
    12. Connect the Success and Failoutputs of the Make HTTP Requestwidget to the input of the Fork Streamwidget.
    13. Connect the Nextnode of the Fork Streamwidget to the SendCallToAgentwidget.

    14. Configure the Fork Streamwidget as follows:

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

      • Stream Parameters:

        • Key: conversation

        • Value:

          projects/<gcp-project-id>/conversations/TW-&lcub;&lcub;trigger.call.From | replace_first:'+','' &rcub;&rcub;-&lcub;&lcub;trigger.call.CallSid&rcub;&rcub;

    15. Click Save> Publish.

    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.

    Configure basic settings

    1. Navigate to the menu bar > Setup Menu, then click Setup. Enter a Quick Findsearch 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.

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

    Set run authorization and credentials

    1. Navigate to the menu bar > Setup Menu, then click Setup.
    2. Enter a Quick Findsearch for "Manage Connected Apps".
    3. Click your connected app's name > Edit.
      • Navigate to Client Credentials Flow.
      • For Run As, click the magnifying glass, then select your username.
      • Click Save.
    4. Navigate to the menu bar > Setup Menu, then click Setup.
    5. Enter a Quick Findsearch for "App Manager".
    6. Find lwc auth and click .
      • Click View> Manage Consumer Details.
      • Enter the verification code sent to your email.
      • Copy the Consumer Keyand Consumer Secretsomewhere secure, you need these for a later step.

    Establish CORS and content security policies

    1. Navigate to the menu bar > Setup Menu, then click Setup.
    2. Enter a Quick Findsearch for "CORS", then click Edit.
      • Check Enable CORS for OAuth endpoints.
      • Click Save.
    3. Navigate to the menu bar > Setup Menu, then click Setup.
    4. Enter a Quick Findsearch for "Trusted URLs", then click New Trusted URL.
    5. Enter the API Name: ui_connector
      • Enter the URLof 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 .
      • Check all boxes in CSP Directives.
      • Click Save & New.
    6. Enter the API Name: ui_connector_wss
      • Enter the URLof 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 .
      • Check all boxes in CSP Directives.
      • Click Save & New.
    7. Enter the API Name: salesforce_domain
      • Enter the URLof your Salesforce Domain with the following format: https://YOUR_SUBDOMAIN.my.salesforce.com .
      • Check all boxes in CSP Directives.
      • Click Save.

    Step 5: Install Twilio Flex CTI plugin

    Salesforce provides Salesforce Open CTI to 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. Select a Contact record.
    3. Click the Setup Menu > Edit Page.
    4. Click Template> Change.
      • Select Headerand Two Equal Regions.
      • Click Next.
      • Map each region to a new region.
      • Click Done.
    5. From the Componentssidebar, move the agentAssistContainerModule into the sidebar. Note: The npm deploy command provided this component.
    6. 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 integration backend's 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 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.

    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.
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: