twilio contact center
1.0.0
La esencia de un centro de contacto moderno es servir a los clientes en múltiples canales (voz, chat web, video, correo electrónico, redes sociales, etc.), les permita moverse sin problemas a través de los canales y, lo más importante, mantener el contexto de las conversaciones.
La demostración del centro de contacto de Twilio es una arquitectura de referencia para construir un centro de contacto moderno. El enfoque de la demostración es mostrar cómo construir un centro de contacto basado en la plataforma Twilio y los diversos componentes de backend y frontend necesarios.
Nota: Hemos realizado el trabajo básico desde una perspectiva UX y quedan muchas oportunidades para mejorarlo. Ha sido diseñado para fines de demostración y no se ha verificado por separado.
Esta aplicación se proporciona AS-IS. Twilio no lo apoya oficialmente.
El cliente llena la solicitud de llamadas en línea -> Formulario enviado al servidor -> Tarea en TaskRouter creado -> Buscar agente disponible y coincidente -> Agente acepta reservas y marca el cliente (PSTN) -> Conecte el Cliente al Agente (WEBRTC)
El cliente llama al número de teléfono de Twilio -> Solicitudes de Twilio Webhook -> El servidor genera TWIML para IVR -> La persona que llama selecciona la opción IVR -> Tarea en TaskRouter creado -> Encuentre el agente disponible y coincidente -> Agente acepta reserva -> Conecte el cliente al agente (WEBRTC)
El cliente llena el formulario de solicitud de chat web en línea -> Formulario enviado al servidor -> Tarea en TaskRouter creado -> Encuentre el agente disponible y coincidente -> Agente acepta la reserva -> Inicie el chat entre el cliente y el agente
El cliente llena el formulario de solicitud de llamada de video -> Formulario enviado al servidor -> Tarea en Taskrouter y sala de video creado -> Encuentre el agente disponible y correspondiente -> Agente acepta la reserva -> Agente se une a la sala de video
Visualización en tiempo real de métricas de centro de contacto operativo (por ejemplo: tiempo promedio de manejo de llamadas, productividad de agentes, métricas de llamadas, estadísticas de Taskrouter y más, etc.). Consulte el siguiente repositorio: https://github.com/ameerbadri/twilio-taskrouter-realtime-dashboard
Si no has usado Twilio antes, ¡bienvenido! Deberá registrarse para obtener una cuenta de Twilio.
Le recomendamos que cree un proyecto separado dentro de Twilio e instale esta aplicación utilizando ese proyecto.
Nota: Se recomienda que tenga una cuenta Twilio actualizada para experimentar completamente esta demostración.
Antes de comenzar la instalación, deberá recopilar las siguientes variables del portal de cuenta de Twilio.
TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENTWILIO_WORKSPACE_SIDPara obtener una cuenta SID y Auth Token, haga clic aquí: https://www.twilio.com/console
Compre un número de teléfono o use uno existente (la aplicación configurará el número para usted más adelante)
Cree un nuevo espacio de trabajo de TaskRouter de Twilio y seleccione la plantilla personalizada.
Para el secreto de la tecla API de la API de Twilio Sid y Twilio, haga clic aquí: https://www.twilio.com/console/dev-tools/api-keys
TWILIO_API_KEY_SIDTWILIO_API_KEY_SECRETPara el chat web debe establecer variables de entorno de chat programables de Twilio:
TWILIO_CHAT_SERVICE_SIDLa interfaz de usuario del agente no admite el manejo de múltiples tareas simultáneamente, por lo tanto, todas las tareas se enrutan en el mismo canal de tareas con la capacidad de una tarea simultánea. Para obtener más detalles, consulte la multitarea de TaskRouter
Puede implementar este proyecto con todos los dependientes en Heroku con Terraform, una infraestructura de código abierto como herramienta de software de código.
Cree la clave API para Heroku, consulte la Guía API de la plataforma Heroku para obtener ayuda.
Agregue la clave API de Heroku y su dirección de correo electrónico a terraform.tfvars .
Inicializar los archivos de configuración de Terraform y ejecutar
terraform init
Si no ha instalado Terraform, siga el comienzo de Terraform.
Agregue las variables de Twilio enumeradas en las variables de configuración de la sección al archivo de variables terraform.tfvars .
Establezca el nombre de su aplicación Heroku en el archivo de descripción de infraestructura terraform_heroku.tf
Crear un plan de ejecución
terraform plan
Instale el proyecto en Heroku ejecutando
terraform apply
Una vez que se haya completado la instalación, abra https://<your-application-name>.herokuapp.com/setup y configurar la aplicación. Se puede acceder a la descripción de la demostración en https://<your-application-name>.herokuapp.com .
Esto instalará la aplicación y todas las dependencias de Heroku (se requiere inicio de sesión) para usted. Como parte de la instalación, la aplicación Heroku lo guiará a través de la configuración de las variables de entorno. Haga clic en el siguiente botón para implementar la aplicación.
Una vez que se haya completado la instalación, abra https://<your-application-name>.herokuapp.com/setup y configurar la aplicación. Se puede acceder a la descripción de la demostración en https://<your-application-name>.herokuapp.com .
Descargue e instale el SDK de Google Cloud.
Crea un nuevo proyecto
gcloud projects create <your-project-id> --set-as-default
Inicialice la aplicación de su motor de aplicaciones con su proyecto y elija su región:
gcloud app create --project=<your-project-id>
Agregue las variables de Twilio enumeradas en las variables de configuración de la sección al archivo de variables app.yaml .
Implemente la aplicación en el motor de la aplicación ejecutando el siguiente comando.
gcloud app deploy
Para ver la ejecución de su aplicación
gcloud app browse
Una vez que se haya completado la instalación, abra https://<your-project-id>.appspot.com/setup y configurar la aplicación. Se puede acceder a la descripción de la demostración en https://<your-project-id>.appspot.com .
Bifurca y clona el repositorio. Luego, instale dependencias con
npm install
Si desea cargar variables de entorno desde un archivo, instale el paquete Dotenv para manejar las variables de entorno local.
npm install dotenv
En el directorio raíz, cree un archivo llamado '.env', luego agregue lo siguiente a la parte superior de App.js
require('dotenv').config()
Para ejecutar la demostración, deberá establecer las variables de entorno liste en las variables de configuración] (#Configuración-Variables)
Iniciar la aplicación
npm start
Antes de que pueda usar la demostración, abra http://<your-application-name>/setup y configure la aplicación. Se puede acceder a la descripción de la demostración en http://<your-application-name> . Tenga en cuenta que si Process.env.port no se establece que las aplicaciones se ejecutan en el puerto 5000.
Si está ejecutando la demostración localmente, recuerde que Twilio necesita una dirección públicamente accesible para Webhooks, y el proceso de configuración los registra con Twilio. Como tal, deberá ejecutar algo como ngrok en lugar de solo golpear http: // localhost: 5000/. A medida que obtenga direcciones nuevas de NGROK, también deberá volver a ejecutar el proceso de configuración para registrar la dirección actualizada con Twilio.
Configuración de Ngrok
Instalación de todo el sistema
Descargar e instalar desde ngrok
Instalar con NPM npm install ngrok -g
Ejecute ngrok (si el puerto se define en su actualización .env en consecuencia)
./ngrok http 5000
Instalar solo el proyecto
Instalar el paquete NGROK
npm install ngrok --dev
Agregue lo siguiente a la parte superior de App.js
const ngrok = require('ngrok')
const ngrokUrl = async function () {
const url = await ngrok.connect((process.env.PORT || 5000))
console.log('ngrok url ->', url)
}
En App.js llame a Ngrokurl en App.Listen para registrar la URL NGROK en el servidor Spin Up Up
ngrokUrl()
Nota: En Google Chrome, se requiere una conexión HTTPS segura para hacer llamadas telefónicas a través de WebRTC. Use un túnel que admite HTTPS como NGROK, que puede reenviar el tráfico a su servidor web.
Las contribuciones son bienvenidas y generalmente aceptadas. Para las enmiendas no triviales, es una buena idea presentar un problema que explique los cambios propuestos antes de un PR. Esto permite a los mantenedores dar orientación y evitar que realice un trabajo duplicado.
Sus cambios deben cumplir con un estilo de código de proyecto común.
# please run this before "git commit"
npm run lint
# try automatic fix
./node_modules/.bin/eslint controllers --fix
./node_modules/.bin/eslint public --fix
Para facilitar la vida de otros contribuyentes y revisores, rebote su compromiso en el mismo PR
git rebase -i HEAD^^^^^^
# then squash or fixup your shards
# and force push into your fork
git push origin [YOUR BRANCH] -f
Puedes seguirme en Twitter - @mdamm_de
MIT
