Integración de voz de Salesforce con Twilio Flex

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

Asistencia de agente usa el flujo multimedia de la llamada de Twilio Flex para proporcionar sugerencias a tus agentes en Salesforce Lightning Service Console.

Antes de empezar

Para integrar los módulos de la interfaz de usuario de Asistente con agente en 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 siguiendo las instrucciones y autentícate con gcloud auth login.

  • Salesforce

    1. Inicia sesión en la URL de tu instancia o en la página de inicio de sesión de Salesforce y anota lo siguiente:
    2. La URL Mi dominio de Salesforce. Sigue estos pasos para encontrar la URL de Mi dominio:
      1. Ve a la barra de menú > menú Configuración.
      2. Haz clic en Configurar.
      3. En el cuadro Búsqueda rápida, introduce Mi dominio. El nombre de dominio tiene el siguiente formato: MY-DOMAIN-NAME.develop.my.salesforce.com.
    3. Tu ID de organización de Salesforce. Sigue estos pasos para encontrar el ID de la organización:
      1. Ve a la barra de menú > menú Configuración.
      2. Haz clic en Configurar.
      3. En el cuadro Búsqueda rápida, introduce Información de la empresa. Nota: Estos pasos de integración solo se han probado con Salesforce Developer Edition. Si usas otra edición, puede que haya diferencias en las licencias de las funciones y en la interfaz de Salesforce.

  • Backend de la 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:
    3. AUTH_OPTION: asigna el valor SalesforceLWC.
    4. SALESFORCE_DOMAIN: un nombre de dominio similar a YOUR_SUBDOMAIN.develop.lightning.force.com. Has anotado este valor en el requisito previo de Salesforce. Ten en cuenta que no debes incluir https://.
    5. SALESFORCE_ORGANIZATION_ID: Has anotado este valor en el requisito previo de Salesforce.
    6. APP_AUTH_OPTION: asigna el valor Twilio.
    7. TWILIO_ACCOUNT_SID: asigna el valor de tu SID de cuenta de Twilio.

Paso 1: Configura Twilio Flex

Twilio Flex actúa como softphone en esta integración. Puedes iniciar sesión en 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.

Instalar el complemento del conector SIPREC

El complemento del conector SIPREC permite que tu cuenta de Twilio Flex cree bifurcaciones SIPREC de las secuencias multimedia de llamadas de voz para Asistente del agente. Sigue estos pasos para instalar el complemento del conector SIPREC.

  1. Ve a Inicio de Twilio > Marketplace > Catálogo > Twilio > Conector Siprec.
  2. Haz clic en Instalar > la casilla de verificación de aceptación de los términos y condiciones > Instalar.
  3. En la pestaña Configurar, configura el complemento de la siguiente manera:
    1. Nombre único: SipRec1
    2. Servidor de grabación de sesiones: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    3. Consulta la documentación sobre la integración de telefonía para obtener más información sobre cómo aprovisionar un número de GTP. Puedes omitir los pasos de configuración y validación de SBC, ya que se han completado para el conector Twilio Siprec.
  4. Vaya a Inicio de Twilio > Funciones y recursos.
    • Si Funciones y recursos no está visible en la barra lateral, fíjalo desde Explorar productos.
  5. Haz clic en Crear servicio.
  6. Asigna el nombre ui-connector-auth al nuevo servicio.
  7. En el editor que aparece, haz clic en Añadir + > Añadir función.
  8. Asigna el nombre conversation-name a la función.
  9. Haz clic en y cambia la visibilidad de la función a Pública.
  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 Deploy All (Desplegar todo).

Configurar una IVR con Flex Studio

La IVR consiste en configurar un flujo de llamadas programático con Studio de Twilio para bifurcar el flujo de medios de SIPREC a Asistente. También hace 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 la respuesta de voz interactiva con Flex Studio.

  1. Ve a la consola de Twilio.
  2. Haz clic en Desarrollar > Números de teléfono > Gestionar > Números activos. Debe haber una fila en la tabla con el número de Twilio predeterminado asignado a tu cuenta de Flex.
  3. En la sección Voz - Flujo de trabajo de Studio, haz clic en IVR de voz.
  4. Arrastra un widget Make HTTP Request (Hacer solicitud HTTP) al flujo.
  5. Desconecta Incoming Call de la entrada del widget SendCallToAgent.
  6. Conecta Llamada entrante a la entrada del widget Enviar solicitud HTTP.
  7. Configura el widget Hacer solicitud HTTP con los siguientes detalles:
    • Nombre del widget: register_twilio
    • Método de solicitud: POST
    • URL de 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 Ejecutar función al flujo.
  9. Conecta las salidas 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 la 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 Bifurcación de flujo de la barra lateral al flujo.
  12. Conecta las salidas Success y Fail del widget Make HTTP Request a la entrada del widget Fork Stream.
  13. Conecta el nodo Siguiente del widget Bifurcar flujo al widget SendCallToAgent.

  14. Configura el widget Bifurcar flujo de la siguiente manera:

    • Acción de la emisión: iniciar
    • Tipo de flujo: Siprec
    • Nombre del conector: Siprec1
    • Pistas: ambas pistas

    • Parámetros de emisión:

      • Clave: conversation

      • Valor:

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

  15. Haz clic en Guardar > Publicar.

Información de la cuenta

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

  1. Ve a Inicio de Twilio > Panel de control de la cuenta y anota la siguiente información:
    • SID de cuenta
    • Mi número de teléfono de Twilio

Paso 2: Configura tu proyecto de desarrollo

Para empezar a integrar los módulos de la interfaz de usuario de Asistente, 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 interfaz de usuario, 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 módulos de la interfaz de usuario de Asistente en un entorno específico, como el de producción o el de desarrollo. Salesforce llama organizaciones a estos entornos.

Configurar 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 Asistente.

  1. Ejecuta el siguiente código y autentica la CLI con las credenciales de inicio de sesión 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 aplicación para configurar el componente web ligero (LWC) de Salesforce y autenticar a los usuarios con Salesforce.

  1. Ve a la barra de menú > menú Configuración y, a continuación, haz clic en Configuración. En el cuadro Búsqueda rápida, introduce Gestor de aplicaciones cliente externas.
    1. Haga clic en Gestor de aplicaciones de cliente externas > Nueva aplicación de cliente externa > Crear y, a continuación, introduzca la siguiente información.
    2. Nombre de la aplicación cliente externa: lwc auth
    3. Nombre de la API: lwc_auth
    4. Correo de contacto: your_email@example.com
    5. API (Habilitar ajustes de OAuth) > Habilitar OAuth: seleccionado
    6. API (Enable OAuth Settings) > Callback URL: https://login.salesforce.com/services/oauth2/callback
    7. API (Habilitar ajustes de OAuth) > Permisos de OAuth seleccionados: acceder al servicio de URL de identidad
    8. API (Enable OAuth Settings) > Enable Client Credentials Flow: seleccionado
    9. Haz clic en Crear.
  2. Ve a la barra de menú > menú Configuración y, a continuación, haz clic en Configuración. En el cuadro Búsqueda rápida, introduce Gestor de aplicaciones cliente externas.
    1. Haz clic en el nombre de tu aplicación cliente externa > Editar.
    2. Ve a OAuth Policies > OAuth Flows and External Client App Enhancements (Políticas de OAuth > Mejoras de flujos de OAuth y aplicaciones cliente externas).
    3. Asegúrate de que la opción Habilitar flujo de credenciales de cliente esté seleccionada.
    4. En Ejecutar como, introduce tu nombre de usuario de inicio de sesión.
    5. Haz clic en Guardar.
  3. Ve a la barra de menú > menú Configuración y, a continuación, haz clic en Configuración. En el cuadro Búsqueda rápida, introduce Gestor de aplicaciones cliente externas.
    1. Haz clic en el nombre de tu aplicación cliente externa > Editar.
    2. Ve a Configuración de OAuth > Configuración de la aplicación > Clave y secreto del consumidor.
    3. Introduce el código de verificación que se ha enviado a tu correo.
    4. Copia la clave y el secreto del consumidor en un lugar seguro. Los necesitarás en un paso posterior.

Establecer políticas de seguridad de contenido y CORS

  1. Ve a la barra de menú > menú Configuración y haz clic en Configuración.
  2. En el cuadro Búsqueda rápida, introduce CORS y, a continuación, haz clic en Editar.
    1. Selecciona Habilitar CORS para los endpoints de OAuth.
    2. Haz clic en Guardar.
  3. Ve a la barra de menú > menú Configuración y haz clic en Configuración.
  4. En el cuadro Búsqueda rápida, introduce URLs de confianza y, a continuación, haz clic en Nueva URL de confianza.
  5. Introduce el nombre de la API: ui_connector.
    1. Introduce la URL del endpoint del servicio Cloud Run del conector de interfaz de usuario que has implementado con tu backend de integración de Asistente. Puedes encontrar esta URL en la consola de Cloud Run. Por ejemplo: https://<var>UI_CONNECTOR_SUBDOMAIN</var>.<var>GCP_REGION</var>.run.app.
    2. Selecciona todas las casillas de Directivas de CSP.
    3. Haz clic en Guardar y crear.
  6. Introduce el nombre de la API: ui_connector_wss.
    1. Introduce la URL del endpoint del servicio Cloud Run del conector de interfaz de usuario que has implementado con tu backend de integración de Asistente. Puedes encontrar esta URL en la consola de Cloud Run. Cambia el protocolo a wss para el tráfico de WebSockets. Por ejemplo: wss://<var>UI_CONNECTOR_SUBDOMAIN</var>.<var>GCP_REGION</var>.run.app.
    2. Selecciona todas las casillas de Directivas de CSP.
    3. Haz clic en Guardar y crear.
  7. Introduce el nombre de la API: salesforce_domain.
    1. Introduce la URL de tu dominio de Salesforce con el siguiente formato: https://<var>YOUR_SUBDOMAIN</var>.my.salesforce.com.
    2. Selecciona todas las casillas de Directivas de CSP.
    3. Haz clic en Guardar.

Paso 5: Instala el complemento CTI de Twilio Flex

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

CTI de Twilio Flex usa Salesforce Open CTI para que puedas usar Flex directamente en tu instancia de Salesforce. Sigue las instrucciones de Twilio para configurar Twilio Flex CTI en tu instancia de Salesforce.

Paso 6: Instala el componente web Lightning de Salesforce

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

  1. Ve 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 nueva.
    4. Haz clic en Listo.
  5. En la barra lateral Componentes, mueva el agentAssistContainerModule a la barra lateral. Nota: El comando npm deploy ha proporcionado este componente.
  6. Haga clic en el componente que ha colocado en el paso anterior y rellene los campos del formulario de la siguiente manera para añadir los detalles de configuración.
    • endpoint: la URL del conector de interfaz de usuario de tu backend de integración. Por ejemplo, una URL de la consola de Cloud Run, como https://<var>UI_CONNECTOR_ENDPOINT</var>.<var>GCP_REGION</var>.run.app.
    • Funciones: funciones de Asistente del agente que se van a incluir. Deben estar habilitadas en tu perfil de conversación. Entre las funciones disponibles se incluyen CONVERSATION_SUMMARIZATION, KNOWLEDGE_ASSIST_V2 y AGENT_COACHING. Ten en cuenta que algunas funciones, como SMART_REPLY, no están disponibles para voice.
    • channel: indica que la integración es para voice.
    • Plataforma: indica que la plataforma es twilio.
    • conversationProfile nombre del recurso de tu perfil de conversación de Agent Assist. Por ejemplo, projects/<var>GCP_PROJECT_ID</var>/locations/<var>GCP_REGION</var>/conversationProfiles/<var>CONVERSATION_PROFILE_ID</var>
    • consumerKey la clave de consumidor del cliente externo del paso 3.
    • consumerSecret el secreto de consumidor de la aplicación cliente externa del paso 3.

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. Inicia sesión en Twilio Flex desde tu consola de servicio.
  2. Llama a tu número de Twilio Flex. Ya lo has hecho en el paso 1.
  3. En tu consola de servicio, acepta la llamada. En la pantalla se abrirá una página de contacto nueva o ya creada con el número que ha llamado.
  4. Si se trata de una página de contacto nueva, guarda el contacto. Cuando se cargue la página de contacto, el componente web Lightning de Salesforce debería cargarse en la barra lateral.
  5. Prueba ambas partes de la conversación y asegúrate de que las funciones de Asistencia del agente funcionan como las has configurado.