twilio contact center
1.0.0
L'essence d'un centre de contact moderne consiste à servir les clients sur plusieurs canaux (voix, chat Web, vidéo, e-mail, médias sociaux, etc.), leur permettre de se déplacer de manière transparente sur les canaux et de maintenir le contexte des conversations.
La démo du centre de contact Twilio est une architecture de référence pour construire un centre de contact moderne. L'objectif de la démo est de montrer comment construire un centre de contact basé sur la plate-forme Twilio et les différents composants backend et frontend nécessaires.
Remarque: Nous avons fait le travail de base dans une perspective UX et beaucoup d'opportunités restent à améliorer. Il a été conçu à des fins de démonstration et n'a pas été vérifié séparément.
Cette application est fournie tel quel. Twilio ne le soutient pas officiellement.
Le client remplit la demande d'appel en ligne -> Formulaire soumis au serveur -> Tâche sur TaskRouter Créé -> Trouver Agent disponible et assorti -> L'agent accepte la réservation et compose le client (PSTN) -> Connecter le client à l'agent (WebBrTC)
Client appelle Twilio Numéro de téléphone -> Twilio Demandes WebHook -> Le serveur génère TWIML pour IVR -> L'appelant sélectionne l'option IVR -> Tâche sur TaskRouter Créé -> Trouver Agent disponible et correspondant -> L'agent accepte la réservation -> Connecter le client à l'agent (WeBrTC)
Le client remplit le formulaire de demande de chat Web en ligne -> Formulaire soumis au serveur -> Tâche sur TaskRouter Créé -> Trouver Agent disponible et assorti -> L'agent accepte la réservation -> Démarrer le chat entre le client et l'agent
Le client remplit le formulaire de demande d'appel vidéo -> Formulaire soumis au serveur -> tâche sur la salle de tâche et la salle vidéo créée -> Trouver Agent disponible et assorti -> L'agent accepte la réservation -> Agent rejoint la salle vidéo
Affichage en temps réel des métriques du centre de contact opérationnel (par exemple: le temps moyen de la poignée des appels, la productivité des agents, les mesures d'appel, les statistiques de taskRouter, et plus, etc.). Veuillez consulter le dépôt suivant: https://github.com/ameerbadri/twilio-taskrouter-realtime-dashboard
Si vous n'avez pas utilisé Twilio auparavant, bienvenue! Vous devrez vous inscrire à un compte Twilio.
Nous vous recommandons de créer un projet distinct au sein de Twilio et d'installer cette application en utilisant ce projet.
Remarque: il est recommandé d'avoir un compte Twilio mis à niveau pour expérimenter pleinement cette démo.
Avant de démarrer l'installation, vous devrez collecter les variables suivantes dans le portail du compte Twilio.
TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENTWILIO_WORKSPACE_SIDPour le compte SID et AUTH TOKEN, veuillez cliquer ici: https://www.twilio.com/console
Acheter un numéro de téléphone ou utiliser un existant (l'application configurera le numéro pour vous plus tard)
Créez un nouvel espace de travail Twilio TaskRouter et sélectionnez le modèle personnalisé.
Pour la clé de l'API Twilio SID et le secret de la clé de l'API Twilio, cliquez ici: https://www.twilio.com/console/dev-tools/API-Keys
TWILIO_API_KEY_SIDTWILIO_API_KEY_SECRETPour le chat Web, vous devez définir les variables d'environnement de chat programmables Twilio:
TWILIO_CHAT_SERVICE_SIDL'interface utilisateur de l'agent ne prend pas en charge la gestion de plusieurs tâches simultanément, donc toutes les tâches sont acheminées sur le même canal de tâche avec la capacité d'une tâche simultanée. Pour plus de détails, veuillez consulter TaskRouter Multitasking
Vous pouvez déployer ce projet avec toutes les dépendations sur Heroku avec Terraform, une infrastructure open source en tant qu'outil de logiciel de code.
Créez la clé API pour Heroku, consultez le Guide de l'API de la plate-forme Heroku pour obtenir de l'aide.
Ajoutez la clé API Heroku et votre adresse e-mail à terraform.tfvars .
Initialiser les fichiers de configuration Terraform et exécuter
terraform init
Si vous n'avez pas installé Terraform, suivez le démarrage de Terraform.
Ajoutez les variables Twilio répertoriées dans les variables de configuration de la section au fichier de variables terraform.tfvars .
Définissez le nom de votre application Heroku dans l'infrastructure Description Fichier terraform_heroku.tf
Créer un plan d'exécution
terraform plan
Installez le projet sur Heroku en exécutant
terraform apply
Une fois l'installation terminée, veuillez ouvrir https://<your-application-name>.herokuapp.com/setup et configurer l'application. L'aperçu de la démonstration sera accessible sur https://<your-application-name>.herokuapp.com .
Cela installera l'application et toutes les dépendances sur Heroku (connexion requise) pour vous. Dans le cadre de l'installation, l'application Heroku vous guidera à travers la configuration des variables environnementales. Veuillez cliquer sur le bouton suivant pour déployer l'application.
Une fois l'installation terminée, veuillez ouvrir https://<your-application-name>.herokuapp.com/setup et configurer l'application. L'aperçu de la démonstration sera accessible sur https://<your-application-name>.herokuapp.com .
Téléchargez et installez le SDK Google Cloud.
Créer un nouveau projet
gcloud projects create <your-project-id> --set-as-default
Initialisez votre application d'applications avec votre projet et choisissez sa région:
gcloud app create --project=<your-project-id>
Ajoutez les variables Twilio répertoriées dans les variables de configuration de la section au fichier de variables app.yaml .
Déployez l'application sur l'application moteur en exécutant la commande suivante.
gcloud app deploy
Pour afficher votre application Exécution
gcloud app browse
Une fois l'installation terminée, veuillez ouvrir https://<your-project-id>.appspot.com/setup et configurer l'application. L'aperçu de la démonstration sera accessible sur https://<your-project-id>.appspot.com .
Fork et cloner le référentiel. Ensuite, installez les dépendances avec
npm install
Si vous souhaitez charger des variables d'environnement à partir d'un fichier, installez le package Dotenv pour gérer les variables d'environnement locales.
npm install dotenv
Dans le répertoire racine, créer un fichier appelé '.env', puis ajouter ce qui suit sur le haut de App.js
require('dotenv').config()
Afin d'exécuter la démo, vous devrez définir les variables d'environnement Liste dans les variables de configuration] (# Configuration-Variables)
Démarrer la demande
npm start
Avant de pouvoir utiliser la démo, veuillez ouvrir http://<your-application-name>/setup et configurer l'application. L'aperçu de la démonstration sera accessible sur http://<your-application-name> . Veuillez noter que si Process.env.port n'est pas défini, les applications s'exécutent sur le port 5000.
Si vous exécutez la démo localement, n'oubliez pas que Twilio a besoin d'une adresse publiquement accessible pour WebHooks, et le processus de configuration les enregistre avec Twilio. En tant que tel, vous devrez exécuter quelque chose comme ngrok au lieu de simplement frapper http: // localhost: 5000 /. Au fur et à mesure que vous obtenez de nouvelles adresses de NGROK, vous devrez également relancer le processus de configuration pour enregistrer l'adresse mise à jour avec Twilio.
Configuration de Ngrok
Installation à l'échelle du système
Télécharger et installer à partir de ngrok
Installer avec NPM npm install ngrok -g
Exécutez ngrok (si le port est défini dans votre mise à jour .env en conséquence)
./ngrok http 5000
Installation du projet uniquement
Installer le package Ngrok
npm install ngrok --dev
Ajoutez ce qui suit en haut 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)
}
Dans app.js, appelez ngrokurl dans app.Listen pour enregistrer l'URL Ngrok sur le serveur Spin Up up
ngrokUrl()
Remarque: Sur Google Chrome, une connexion HTTPS sécurisée est nécessaire pour effectuer des appels téléphoniques via WeBrTC. Utilisez un tunnel qui prend en charge HTTPS tels que Ngrok, qui peut transmettre le trafic vers votre serveur Web.
Les contributions sont les bienvenues et généralement acceptées. Pour les modifications non triviales, il est une bonne idée de soumettre un problème expliquant les modifications proposées devant un RP. Cela permet aux mainteneurs de donner des conseils et d'éviter que vous fassiez du travail dupliqué.
Vos modifications doivent adhérer un style de code de projet commun.
# please run this before "git commit"
npm run lint
# try automatic fix
./node_modules/.bin/eslint controllers --fix
./node_modules/.bin/eslint public --fix
Pour faciliter la vie des autres contributeurs et examinateurs, veuillez réprimander votre engagement dans le même PR
git rebase -i HEAD^^^^^^
# then squash or fixup your shards
# and force push into your fork
git push origin [YOUR BRANCH] -f
Vous pouvez me suivre sur Twitter - @mdamm_de
Mit
