twilio contact center
1.0.0
Die Essenz eines modernen Kontaktzentrums besteht darin, Kunden auf mehreren Kanälen (Sprachkanal, Web -Chat, Video, E -Mail, soziale Medien usw.) zu bedienen, sie nahtlos über Kanäle zu ziehen und vor allem den Kontext der Konversationen beizubehalten.
Die Twilio Contact Center Demo ist Referenzarchitektur für den Bau eines modernen Kontaktzentrums. Der Schwerpunkt der Demo liegt auf der Erstellung eines Twilio -Plattform -basierten kontaktiven Contact Centers und der verschiedenen benötigten Backend- und Frontend -Komponenten.
Hinweis: Wir haben die grundlegende Arbeit aus einer UX -Perspektive geleistet, und es bleibt viele Möglichkeiten, sie zu verbessern. Es wurde für Demo -Zwecke entwickelt und nicht separat überprüft.
Diese Anwendung wird als IS bereitgestellt. Twilio unterstützt es nicht offiziell.
Kunden füllen Online -Anrufanfragen aus -> Formular an Server -> Aufgabe auf Taskrouter Erstellt -> verfügbar und übereinstimmendem Agenten finden
Kundenanrufe Twilio Telefonnummer -> Twilio Requests Webhook -> Server generiert Twiml für IVR -> Anrufer wählt IVR -Option -> Aufgabe auf Taskrouter Erstellt -> verfügbar und übereinstimmende Agent -> Agent akzeptiert Reservierung -> Customer mit Agent (WEBRTC) anschließen (WEBRTC).
Kunde füllt Online -Web -Chat -Anfrageformular aus -> Formular an Server -> Aufgabe auf Taskrouter Erstellt -> Verfügbare und übereinstimmende Agent -> Agent akzeptiert Reservierung -> Chat zwischen Kunden und Agent starten
Kunde füllt Videoanfragenanforderungsformular aus -> Formular an Server -> Aufgabe auf Taskrouter und Videoraum erstellt -> verfügbar und passender Agent -> Agent akzeptiert Reservierung -> Agent beitritts Video Room
Echtzeit-Anzeige von Metriken des operativen Contact Centers (z. B. durchschnittliche Anrufverhandlungszeit, Agentenproduktivität, Anrufmetriken, Taskrouter-Statistiken und mehr usw.). Bitte lesen Sie das folgende Repo: https://github.com/ameerbadri/twilio-taskrouter-realtime-dashboard
Wenn Sie Twilio noch nie benutzt haben, willkommen! Sie müssen sich für ein Twilio -Konto anmelden.
Wir empfehlen Ihnen, ein separates Projekt innerhalb von Twilio zu erstellen und diese App mit diesem Projekt zu installieren.
Hinweis: Es wird empfohlen, dass Sie ein aktualisiertes Twilio -Konto haben, um diese Demo vollständig zu erleben.
Bevor Sie mit der Installation beginnen, müssen Sie die folgenden Variablen aus dem Twilio -Kontoportal sammeln.
TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENTWILIO_WORKSPACE_SIDFür das Konto Sid und Auth Token klicken Sie bitte hier: https://www.twilio.com/console
Kaufen Sie eine Telefonnummer oder verwenden Sie eine vorhandene (die Anwendung konfiguriert die Nummer für Sie später).
Erstellen Sie einen neuen Twilio Taskrouter -Arbeitsbereich und wählen Sie die benutzerdefinierte Vorlage aus.
Klicken Sie hier
TWILIO_API_KEY_SIDTWILIO_API_KEY_SECRETFür Web -Chat müssen Sie Twilio -Variablen für programmierbare Chat -Umgebungen festlegen:
TWILIO_CHAT_SERVICE_SIDDie Agent -UI unterstützt nicht gleichzeitig die Handhabung mehrerer Aufgaben, daher werden alle Aufgaben auf demselben Task -Kanal mit Kapazität einer gleichzeitigen Aufgabe geleitet. Weitere Informationen finden Sie unter Taskrouter Multitasking
Sie können dieses Projekt mit allen Abhängigkeiten auf Heroku mit Terraform, einer Open-Source-Infrastruktur als Code-Softwaretool, bereitstellen.
Erstellen Sie den API -Schlüssel für Heroku und überprüfen Sie den API -Leitfaden der Heroku -Plattform, um Hilfe zu erhalten.
Fügen Sie den Heroku -API -Schlüssel und Ihre E -Mail -Adresse zu terraform.tfvars hinzu.
Initialisieren Sie die Terraform -Konfigurationsdateien und führen Sie aus
terraform init
Wenn Sie Terraform nicht installiert haben, folgen Sie dem Terraform -Start.
Fügen Sie die in Abschnittskonfigurationsvariablen aufgeführten Twilio -Variablen zur Datei der Variablen terraform.tfvars hinzu.
Legen Sie Ihren Heroku -Anwendungsnamen in der Infrastrukturbeschreibung Datei terraform_heroku.tf ein
Erstellen Sie einen Ausführungsplan
terraform plan
Installieren Sie das Projekt auf Heroku durch Ausführung
terraform apply
Nach Abschluss der Installation öffnen Sie bitte https://<your-application-name>.herokuapp.com/setup und konfigurieren Sie die Anwendung. Die Demo-Übersicht ist unter https://<your-application-name>.herokuapp.com zugegriffen.
Dadurch wird die Anwendung und alle Abhängigkeiten von Heroku (Anmeldung erforderlich) für Sie installiert. Im Rahmen der Installation führt die Heroku -App Sie durch die Konfiguration von Umgebungsvariablen. Klicken Sie auf die folgende Schaltfläche, um die Anwendung bereitzustellen.
Nach Abschluss der Installation öffnen Sie bitte https://<your-application-name>.herokuapp.com/setup und konfigurieren Sie die Anwendung. Die Demo-Übersicht ist unter https://<your-application-name>.herokuapp.com zugegriffen.
Laden Sie die Google Cloud SDK herunter und installieren Sie sie.
Erstellen Sie ein neues Projekt
gcloud projects create <your-project-id> --set-as-default
Initialisieren Sie Ihre App Engine -App mit Ihrem Projekt und wählen Sie seine Region aus:
gcloud app create --project=<your-project-id>
Fügen Sie die in den Abschnittskonfigurationsvariablen aufgeführten Twilio -Variablen zur Datei der app.yaml -Variablen hinzu.
Stellen Sie die App in App Engine ein, indem Sie den folgenden Befehl ausführen.
gcloud app deploy
So sehen Sie Ihren Bewerbungslauf an
gcloud app browse
Nach Abschluss der Installation öffnen Sie bitte https://<your-project-id>.appspot.com/setup und konfigurieren Sie die Anwendung. Die Demo-Übersicht ist unter https://<your-project-id>.appspot.com zugänglich.
Gabel und klonen Sie das Repository. Installieren Sie dann Abhängigkeiten mit
npm install
Wenn Sie Umgebungsvariablen aus einer Datei laden möchten, installieren Sie das DOTENV -Paket, um lokale Umgebungsvariablen zu verarbeiten.
npm install dotenv
Erstellen Sie im Root -Verzeichnis eine Datei namens '.env' und fügen Sie Folgendes zu App.js hinzu
require('dotenv').config()
Um die Demo auszuführen, müssen Sie die Umgebungsvariablenliste in Konfigurationsvariablen einstellen (#Konfiguration-Variablen).
Starten Sie die Anwendung
npm start
Bevor Sie die Demo verwenden können, öffnen Sie bitte http://<your-application-name>/setup und konfigurieren Sie die Anwendung. Die Demo-Übersicht ist unter http://<your-application-name> zugänglich. Bitte beachten Sie, dass die Anwendungen auf Port 5000 nicht festgelegt sind, wenn process.env.port nicht festgelegt wird.
Wenn Sie die Demo lokal ausführen, denken Sie bitte daran, dass Twilio eine öffentlich zugängliche Adresse für Webhooks benötigt, und der Setup-Prozess registriert diese mit Twilio. Als solches müssen Sie so etwas wie NGROK ausführen, anstatt nur http: // localhost: 5000/zu treffen. Wenn Sie neue Adressen von NGROK erhalten, müssen Sie auch den Setup -Prozess erneut ausführen, um die aktualisierte Adresse bei Twilio zu registrieren.
Ngrok Setup
Systemweit Installation
Laden Sie NGROK herunter und installieren Sie sie
Installieren Sie mit NPM npm install ngrok -g
Führen Sie NGROK aus (wenn der Port in Ihrem .EnV -Update entsprechend definiert ist)
./ngrok http 5000
Projekt nur installieren
Installieren Sie das NGROK -Paket
npm install ngrok --dev
Fügen Sie Folgendes an die Spitze von App.js hinzu
const ngrok = require('ngrok')
const ngrokUrl = async function () {
const url = await ngrok.connect((process.env.PORT || 5000))
console.log('ngrok url ->', url)
}
In app.js rufen Sie NGROKURL in app.listen an, um die NGROK -URL auf dem Server -Spin -up zu protokollieren
ngrokUrl()
HINWEIS: Auf Google Chrome ist eine sichere HTTPS -Verbindung erforderlich, um Telefonanrufe über WEBRTC auszuführen. Verwenden Sie einen Tunnel, der HTTPS wie NGROK unterstützt und den Datenverkehr an Ihren Webserver weiterleiten kann.
Beiträge sind willkommen und allgemein anerkannt. Für keine trivialen Änderungen ist es eine gute Idee, ein Problem zu einreichen, das die vorgeschlagenen Änderungen vor einer PR erläutert. Dies ermöglicht es den Wartenden, Anleitung zu geben und zu vermeiden, dass Sie doppelte Arbeiten erledigen.
Ihre Änderungen müssen einen gemeinsamen Projektcode -Stil einhalten.
# please run this before "git commit"
npm run lint
# try automatic fix
./node_modules/.bin/eslint controllers --fix
./node_modules/.bin/eslint public --fix
Um anderen Mitwirkenden und Rezensenten das Leben leichter zu erleichtern
git rebase -i HEAD^^^^^^
# then squash or fixup your shards
# and force push into your fork
git push origin [YOUR BRANCH] -f
Sie können mir auf Twitter folgen - @mdamm_de
MIT
