Integración de voz de Salesforce con Twilio Flex

Arquitectura para la integración de Agent Assist y Twilio Flex con Salesforce

Esta integración de voz usa la integración de Twilio Open CTI para incorporar un centro de llamadas de Twilio Flex a tu instancia de Salesforce.

Agent Assist usa la transmisión de medios de la llamada de Twilio Flex para proporcionar sugerencias a tus agentes en la consola de servicio de Salesforce Lightning.

Antes de comenzar

Para integrar los módulos de la IU de Agent Assist con Salesforce, necesitas acceder a los siguientes recursos:

  • Node.js

    Sigue las instrucciones de instalación recomendadas para tu sistema operativo.

  • CLI de Salesforce

    Sigue las instrucciones de instalación recomendadas para tu sistema operativo.

  • Google Cloud CLI

    Instala el comando gcloud según las instrucciones y autentica con gcloud auth login.

  • Salesforce

    Accede a la URL de tu instancia o a la página de acceso de Salesforce y ten en cuenta lo siguiente:

    • La URL de Mi dominio de Salesforce. Sigue estos pasos para encontrar la URL de Mi dominio:
      1. Navega a la barra de menú > menú Configuración.
      2. Haz clic en Configuración.
      3. En el cuadro Búsqueda rápida, ingresa Mi dominio. El nombre de dominio está en el siguiente formato: MY-DOMAIN-NAME.develop.my.salesforce.com.
    • El ID de tu organización de Salesforce. Sigue estos pasos para encontrar el ID de la organización:
      1. Navega a la barra de menú > menú Configuración.
      2. Haz clic en Configuración.
      3. En el cuadro Búsqueda rápida, ingresa Información de la empresa. Nota: Estos pasos de integración solo se probaron con Salesforce Developer Edition. Si usas otra edición, es posible que surjan diferencias en las licencias de funciones y la interfaz de Salesforce.

  • Backend de integración de Agent Assist

    1. Sigue las instrucciones para configurar la integración.
    2. Antes de ejecutar la secuencia de comandos de implementación, configura las siguientes variables de entorno con deploy.sh o en un archivo .env en la raíz del proyecto:
      • AUTH_OPTION: Configura esto como SalesforceLWC.
      • SALESFORCE_DOMAIN: Un nombre de dominio similar a YOUR_SUBDOMAIN.develop.lightning.force.com. Anotaste este valor en el requisito previo de Salesforce. Ten en cuenta que no debes incluir https://.
      • SALESFORCE_ORGANIZATION_ID: Anotaste este valor en el requisito previo de Salesforce.
      • APP_AUTH_OPTION: Configura esto como Twilio.
      • TWILIO_ACCOUNT_SID: Configura esto como tu SID de la cuenta de Twilio.

Paso 1: Configura Twilio Flex

Twilio Flex funciona como el softphone en esta integración. Puedes acceder a la consola de Twilio para configurar una cuenta de Flex. Visita la página de configuración de Twilio para obtener instrucciones detalladas sobre cómo crear una cuenta de Flex.

Instala el complemento del conector SIPREC

El complemento del conector SIPREC permite que tu cuenta de Twilio Flex realice bifurcaciones SIPREC de transmisiones de medios de llamadas de voz a Agent Assist. Sigue estos pasos para instalar el complemento del conector SIPREC.

  1. Navega a Twilio Home > Marketplace > Catalog > Twilio > Siprec Connector.
  2. Haz clic en Install > la casilla de verificación Terms and conditions acknowledgment > Install.
  3. En la pestaña Configure, configura el complemento con los siguientes detalles:
    • Nombre único: SipRec1
    • Servidor de grabación de sesión: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • Consulta la documentación de integración telefónica para obtener más detalles sobre el aprovisionamiento de un número de GTP. Puedes ignorar los pasos de configuración y validación de SBC, ya que están completos para el conector de Twilio Siprec.
  4. Navega a Twilio Home > Functions and Assets.
    • Si Functions and Assets no está visible en la barra lateral, fíjalo desde Explore Products.
  5. Haz clic en Crear servicio.
  6. Asigna el nombre ui-connector-auth al servicio nuevo.
  7. En el editor que aparece, haz clic en Add + > Add Function.
  8. Asigna el nombre conversation-name a la función.
  9. Haz clic en , y cambia la visibilidad de la función a Público.
  10. Copia y pega todo el contenido de ui-connector-auth.js del repositorio de GitHub en el editor.
  11. Haz clic en Guardar.
  12. Haz clic en Implementar todo.

Configura IVR con Flex Studio

El IVR consiste en configurar un flujo de llamadas programático con Twilio Studio para realizar la bifurcación SIPREC de la transmisión de medios a Agent Assist. También realiza una publicación HTTP para compartir el número de teléfono y el ID de conversación con Agent Assist. Sigue estos pasos para configurar IVR con Flex Studio.

  1. Navega a la consola de Twilio.
  2. Haz clic en Develop > Phone Numbers > Manage > Active Numbers. Debe haber una fila en la tabla con el número predeterminado de Twilio aprovisionado para tu cuenta de Flex.
  3. En la sección Voice - Studio Workflow, haz clic en Voice IVR.
  4. Arrastra un widget Make HTTP Request al flujo.
  5. Desconecta Incoming Call de la entrada del widget SendCallToAgent.
  6. Conecta Incoming Call a la entrada del widget Make HTTP Request.
  7. Configura el widget Make HTTP Request con los siguientes detalles:
    • Nombre del widget: register_twilio
    • Método de solicitud: POST
    • URL de la solicitud: <your-ui-connector-cloud-run-url>.run.app/register-app
    • Tipo de contenido: Application/JSON
    • Cuerpo de la solicitud: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. Arrastra un widget Run Function al flujo.
  9. Conecta los resultados Success y Fail del widget register_twilio a la entrada del widget Run Function.
  10. Crea un widget con los siguientes detalles:
    • Nombre del widget: conversation_name
    • Servicio: ui-connector-auth
    • Entorno: ui
    • Función: conversation-name
    • Parámetros de función:
      • token: 
        {{ widgets.register_twilio.parsed.token }}
      • endpoint: <your-ui-connector-cloud-run-url>.run.app/conversation-name
      • phone: 
        {{ trigger.call.From | replace_first:'+','' }}
      • conversationName: 
        projects/<project>/locations/<location>/conversations/TW-{{ trigger.call.From | replace_first:'+','' }}-{{ trigger.call.CallSid }}
  11. Arrastra un widget Fork Stream de la barra lateral al flujo.
  12. Conecta los resultados Success and Fail del widget Make HTTP Request a la entrada del widget Fork Stream.
  13. Conecta el nodo Next del widget Fork Stream al widget SendCallToAgent.

  14. Configura el widget Fork Stream de la siguiente manera:

    • Acción de transmisión: Start
    • Tipo de transmisión: Siprec
    • Nombre del conector: Siprec1
    • Pistas: Both Tracks

    • Parámetros de transmisión:

      • Key: conversation

      • Valor:

        projects/<gcp-project-id>/conversations/TW-{{trigger.call.From | replace_first:'+','' }}-{{trigger.call.CallSid}}

  15. Haz clic en Guardar > Publicar.

Detalles de la cuenta

Sigue este paso para recopilar los detalles de tu cuenta de Twilio Flex. Necesitarás esta información para configurar el CTI de Flex en Salesforce más adelante.

  1. Navega a Twilio Home > Account Dashboard y anota la siguiente información:
    • SID de la cuenta
    • Mi número de teléfono de Twilio

Paso 2: Configura tu proyecto de desarrollo de Salesforce

Para comenzar a integrar los módulos de la IU de Agent Assist, sigue estos pasos.

  1. Ejecuta el siguiente código para clonar el repositorio de integración de Agent Assist y abrir tu proyecto:

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

  2. Ejecuta los siguientes comandos para descargar los archivos JavaScript de los módulos de la IU que implementarás más adelante como recursos estáticos. Salesforce requiere recursos estáticos para cargar JavaScript de terceros.

    npm run generate-static-resources
npm install

Paso 3: Configura tu entorno de Salesforce

Puedes integrar los módulos de la IU de Agent Assist en un entorno específico, como producción o desarrollo. Salesforce llama a estos entornos organizaciones (orgs).

Configura tu organización con la CLI de Salesforce

Sigue estos pasos para usar la CLI de Salesforce y configurar tu organización para la integración de Agent Assist.

  1. Ejecuta el siguiente código y autentica la CLI con login details de Salesforce que usas normalmente. 
    npm run login
  2. Ejecuta el siguiente código para implementar el LWC en la organización. 
    npm run deploy

Paso 4: Crea una aplicación cliente externa

El LWC de Salesforce usa el flujo de credenciales de cliente de OAuth 2.0 para autenticarte. Una aplicación cliente externa habilita el flujo de credenciales de cliente. Usa la clave de consumidor y el secreto de consumidor de la app para configurar el LWC de Salesforce para autenticar a los usuarios con Salesforce.

  1. Navega a la barra de menú > menú Configuración y, luego, haz clic en Configuración. En el cuadro Búsqueda rápida, ingresa Administrador de la aplicación cliente externa.
    1. Haz clic en Administrador de la aplicación cliente externa > Nueva aplicación cliente externa > Crear y, luego, ingresa la siguiente información.
      • Nombre de la aplicación cliente externa: lwc auth
      • Nombre de la API: lwc_auth
      • Correo electrónico de contacto: your_email@example.com
      • API (Enable OAuth Settings) > Enable OAuth: Seleccionado
      • API (Enable OAuth Settings) > Callback URL: https://login.salesforce.com/services/oauth2/callback
      • API (Enable OAuth Settings) > Selected OAuth Scopes: Access the identity URL service
      • API (Enable OAuth Settings) > Enable Client Credentials Flow: Seleccionado
    2. Haz clic en Crear.
  2. Navega a la barra de menú > menú Configuración y, luego, haz clic en Configuración. En el cuadro Búsqueda rápida, ingresa Administrador de la aplicación cliente externa.
    1. Haz clic en el nombre de tu aplicación cliente externa > Editar.
    2. Navega a OAuth Policies > OAuth Flows and External Client App Enhancements.
    3. Asegúrate de que esté seleccionado Enable Client Credentials Flow.
    4. En Run As, ingresa tu nombre de usuario de acceso.
    5. Haz clic en Guardar.
  3. Navega a la barra de menú > menú Configuración y, luego, haz clic en Configuración. En el cuadro Búsqueda rápida, ingresa Administrador de la aplicación cliente externa.
    1. Haz clic en el nombre de tu aplicación cliente externa > Editar.
    2. Navega a OAuth Settings > App Settings > Consumer Key and Secret.
    3. Ingresa el código de verificación que se envió a tu correo electrónico.
    4. Copia la clave de consumidor y el secreto de consumidor en un lugar seguro. Los necesitarás para un paso posterior.

Establece políticas de CORS y de seguridad del contenido

  1. Navega a la barra de menú > menú Configuración y, luego, haz clic en Configuración.
  2. En el cuadro Búsqueda rápida , ingresa CORS y, luego, haz clic en Editar.
    1. Selecciona Habilitar CORS para los extremos de OAuth.
    2. Haz clic en Guardar.
  3. Navega a la barra de menú > menú Configuración y, luego, haz clic en Configuración.
  4. En el cuadro Búsqueda rápida , ingresa URLs de confianza y, luego, haz clic en Nueva URL.
  5. Ingresa la siguiente información:
    • Nombre de la API: ui_connector
    • URL: Ingresa la URL del extremo del servicio de Cloud Run del conector de la IU que implementaste con tu backend de integración de Agent Assist. Puedes encontrar esta URL en la consola de Cloud Run. Por ejemplo: https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • Directivas de CSP: Selecciona todas las casillas de verificación.
    • Haz clic en Guardar y crear.
  6. Ingresa la siguiente información:
    • Nombre de la API: ui_connector_wss
    • URL: Ingresa la URL del extremo del servicio de Cloud Run del conector de la IU que implementaste con tu backend de integración de Agent Assist. Puedes encontrar esta URL en la consola de Cloud Run. Cambia el protocolo a wss para el tráfico de WebSockets. Por ejemplo: wss://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • Directivas de CSP: Selecciona todas las casillas de verificación.
    • Haz clic en Guardar y crear.
  7. Ingresa la siguiente información:
    • Nombre de la API: salesforce_domain
    • URL: Ingresa la URL de tu dominio de Salesforce con el siguiente formato: https://YOUR_SUBDOMAIN.my.salesforce.com.
    • Directivas de CSP: Selecciona todas las casillas de verificación.
    • Haz clic en Guardar y crear.
  8. Ingresa la siguiente información:
    • Nombre de la API: twilio_flex
    • URL: https://flex.twilio.com
    • Directivas de CSP: Selecciona todas las casillas de verificación.
    • Haz clic en Guardar.

Paso 5: Instala el complemento de CTI de Twilio Flex

Salesforce proporciona Salesforce Open CTI para permitir la integración de softphones de terceros con tu instancia de Salesforce.

El CTI de Twilio Flex usa Salesforce Open CTI para permitirte usar Flex directamente en tu instancia de Salesforce. Sigue las instrucciones de Twilio para configurar el CTI de Twilio Flex en tu instancia de Salesforce.

Paso 6: Instala el componente web de Salesforce Lightning

Sigue estos pasos para usar el editor de Lightning Experience y agregar el componente web de Salesforce Lightning a la página de contacto en la que se abre el CTI de Twilio Flex cuando entra una llamada nueva.

  1. Navega a la consola de servicio y selecciona Contactos.
  2. Selecciona un registro de contacto.
  3. Haz clic en el menú Configuración > Editar página.
  4. Haz clic en Plantilla > Cambiar.
    1. Selecciona Encabezado y Dos regiones iguales.
    2. Haz clic en Siguiente.
    3. Asigna cada región a una región nueva.
    4. Haz clic en Listo.
  5. En la barra lateral Componentes, mueve agentAssistContainerModule a la barra lateral. Nota: El comando npm deploy proporcionó este componente.
  6. Haz clic en el componente que colocaste en el paso anterior y completa los campos del formulario de la siguiente manera para agregar detalles de configuración.
    • endpoint: La URL de tu conector de la IU del backend de integración de Agent, como una URL de la consola de Cloud Run, como: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • channel: Indica que la integración es para voice.
    • platform: Indica que la plataforma es twilio.
    • conversationProfile: El nombre del recurso de tu perfil de conversación de Agent Assist (ejemplo: projects/GCP_PROJECT_ID/locations/GCP_REGION/conversationProfiles/CONVERSATION_PROFILE_ID)
    • consumerKey: La clave de consumidor de la aplicación cliente externa de un paso anterior.
    • consumerSecret: El secreto de consumidor de la aplicación cliente externa de un paso anterior.
    • containerHeight: La altura del contenedor de Agent Assist.

Paso 7: Prueba la integración

Puedes probar la integración de voz con una llamada de prueba al centro de llamadas de Salesforce.

  1. Accede a Twilio Flex desde tu consola de servicio.
  2. Llama a tu número de Twilio Flex. Anotaste esto en el Paso 1.
  3. En tu consola de servicio, acepta la llamada. La pantalla debería abrir una página de contacto nueva o existente para el número que llamó.
  4. Si es una página de contacto nueva, guarda el contacto. Cuando se cargue la página de contacto, el componente web de Salesforce Lightning debería cargarse en la barra lateral.
  5. Prueba ambos lados de la conversación y asegúrate de que las funciones de Agent Assist funcionen según lo configuraste.