Flex Mobile: Ermöglicht Contact-Center-Teams das Arbeiten von überall

Das Schöne an Twilio Flex, dem Cloud Contact Center von Twilio, ist seine vollständige Programmierbarkeit. Sie müssen nicht darauf warten, dass der Anbieter die Funktion bereitstellt, sondern können sie selbst entwickeln!

Flex bietet standardmäßig keine sofort einsetzbaren Funktionen für die Ausführung auf Mobilgeräten. Da Flex jedoch viele Produkte von Twilio vereint, z. B.TaskRouter, Conversations, und Studio, können Sie alle APIs und SDKs einsetzen, um Flex mit eigenen Weiterentwicklungen ganz an Ihre geschäftlichen Anforderungen anzupassen.

Dieser Blogbeitrag zeigt ein Proof of Concept, das den Innovationsgedanken aufgreift, indem es Teammitgliedern die Möglichkeit gibt, sich vom Computer zu entfernen und weiterhin Chats und Anrufe über ihr Mobiltelefon abzuwickeln. Ich stelle Ihnen Flex Mobile vor, eine React Native-Anwendung, die sich nahtlos in Flex und seine untergeordneten Systeme einfügt, darunter auch Flex Insights, unser Reporting-Tool.

Legen wir los!

Leistungsmerkmale und Funktionen

Für wen ist Flex Mobile gedacht?

• Anwendungsfälle: Flex Mobile eignet sich für Unternehmen, deren Teammitglieder im Verlauf des Arbeitstages nicht immer am Computer sind.
• Team: Dieses Projekt ist am besten für Unternehmen mit React-Entwicklungsteams geeignet. Für die meisten Unternehmen, die mit Flex arbeiten, sollte dies kein Problem darstellen, da sie zur Erweiterung von Flex-Funktionen Flex-Plug-Ins einsetzen, die mit React erstellt werden.

Wenn Sie kein React-Entwicklungsteam haben, wenden Sie sich an eines unserer ausgezeichneten Twilio-Partnerunternehmen, das Sie bei diesem Projekt unterstützt.

Kann Flex Mobile direkt in der Produktion eingesetzt werden?

Flex Mobile ist ein Proof of Concept, für das Sie ein Entwicklungsteam oder ein Twilio-Partnerunternehmen brauchen, um seine Funktionen weiterzuentwickeln und zu pflegen.

Es ist ein hervorragender Ausgangspunkt, insbesondere um Ihr Entwicklungsteam schnell in die APIs und die Orchestrierung von Flex einzuführen.

Voraussetzungen

Gefällt Ihnen die Idee von Flex Mobile? Bevor es losgehen kann, brauchen Sie einige Konten und sollten sich mit den Voraussetzungen und Preisen vertraut machen. Gehen Sie bitte alle unten aufgeführten Schritte durch:

1. Flex-Instanz: Sie brauchen ein Twilio-Konto mit einer Flex-Instanz
2. Flex UI 2.0: Achten Sie darauf, eine Flex-Instanz mit UI 2.0 aktiviert zu haben
3. Flex Conversations: Achten Sie darauf, dass Sie Flex Conversations aktiviert haben.
4. SSO IdP: Prüfen Sie, ob Sie mit der Verwendung eines angepassten Identity Providers (IdP) für die Authentifizierung in Flex einverstanden sind, statt mit einem marktüblichen SSO-Anbieter. Sie können nur einen IdP für Flex verwenden, daher muss dies ein benutzerdefinierter IdP für die mobile Authentifizierung sein.
5. Flex-Preismodell: Ihre Teammitglieder müssen in Flex ständig online sein, wenn sie Push-Benachrichtigungen erhalten möchten, sobald ein neuer Chat vorliegt. Daher empfehlen wir Ihnen, die Abrechnung nach namentlich genanntem Benutzer und nicht nach „aktiven Benutzerstunden“ zu verwenden.

Hinter den Kulissen

Werfen wir einen Blick darauf, wie dieses Projekt mit Twilio-Produkten strukturiert ist:

Authentifizierungsprozess

Dieses Diagramm stellt die Schritte des Authentifizierungsvorgangs für Flex Mobile dar.

1. Das Teammitglied öffnet die Flex Mobile App
2. Hat sich das Teammitglied in der letzten Stunde bei Flex angemeldet? Wenn ja, wird ein gültiges, auf dem Gerät des Teammitglieds gespeichertes Flex-Token verwendet, und der Vorgang springt direkt zum letzten Schritt.
3. Hat sich das Teammitglied in den letzten 7 Tagen bei Flex angemeldet? Wenn ja, wird ein gültiges, langlebiges Token auf dem Gerät des Teammitglieds verwendet, um den manuellen Authentifizierungsablauf zu überspringen.
4. Andernfalls wird ein manueller Authentifizierungsvorgang gestartet. Er verwendet Twilio Verify, um dem Teammitglied ein Einmalpasswort per SMS zu senden.
5. Sobald das Teammitglied validiert ist (entweder über ein langlebiges Token oder über den manuellen Authentifizierungsvorgang), wird eine Funktion aufgerufen, um ein frisches langlebiges Token in Sync zu speichern und ein Update zu erzwingen. Dieses Update des langlebigen Tokens nach jeder Anmeldung ist wichtig für den Fall, dass ein Teammitglied zwei Handys hat und eines davon verliert (oder verkauft): Das letzte Gerät, das sich bei Flex anmeldet, deaktiviert automatisch die Authentifizierung der älteren Geräte.
6. Sync speichert das langlebige Token für 7 Tage. Das bedeutet, dass das Teammitglied, solange er sich jede Woche anmeldet, den manuellen Authentifizierungsvorgang nie wieder durchlaufen muss.

Webhooks

Webhooks sind für die Verarbeitung von Ereignissen von Twilio zuständig, wenn Kunden anrufen oder eine SMS an Ihr Contact Center senden. Sie können damit beispielsweise eine Push-Benachrichtigung senden oder den Anruf an ein Teammitglied weiterleiten.

1. Sobald ein Kunde eine Nachricht sendet oder anruft, wird eines der beiden Ereignisse ausgelöst: onMessageAdded (für Conversations) oder ReservationCreated(für TaskRouter).
2. Diese Ereignisse rufen eine Funktion (Webhook) auf. Wenn das Teammitglied zu diesem Zeitpunkt nicht „Auf Mobilgerät verfügbar“ ist, bricht der Vorgang ab, da das Teammitglied (höchstwahrscheinlich) Flex auf dem Desktop verwendet und keine Benachrichtigungen auf seinem Handy erhalten möchte.
3. Diese Funktion wertet aus, ob es sich um einen Chat oder einen Anruf handelt.
4. Bei einem Chat wird eine Push-Benachrichtigung an Firebase gesendet.
5. Bei Anrufen aktualisiert die Funktion die Aufgabenattribute, um den Anruf in eine Telekonferenz mit dem Teammitglied aufzunehmen, dazu ruft Twilio das Teammitglied intern über das öffentliche Telefonnetz an.

Mobile App

Die App ist ein React Native-Projekt, das auf Expo basiert. Expo ist eine fantastische Open-Source-Plattform, mit der sich leicht universelle native Apps für Android und iOS erstellen lassen.

Es werden dieselben Bibliotheken und APIs wie in Flex verwendet, darunter TaskRouter, Conversations und Flex Interactions APIs, wodurch dieses Projekt vollständig mit Flex kompatibel ist, auch mit Flex Insights, das sofort ohne spezielle Einrichtung funktioniert.

Technisch gesehen ist Flex Mobile nichts anderes als „das herkömmliche Flex mit einer neuen Aktivität, die Flex on Mobile heißt“. Dank dieses einfachen Konzepts ist es vollkommen kompatibel mit Flex.

Bislang wurde Flex Mobile nur für Android-Geräte entwickelt und getestet. Eine Funktion mit iOS ist trotzdem möglich, Sie müssen jedoch die Push-Benachrichtigungsen für iOS selbst programmieren, wenn Sie die volle Funktionalität der App auf Apple-Geräten erzielen möchten.

Flex Mobile installieren

Legen wir los.

Klonen Sie das Flex Mobile Repository. Es besteht aus 4 Ordnern, die alle einzeln installiert und bereitgestellt werden müssen.

Lassen Sie uns jeden dieser Ordner genauer betrachten:

Schritt 1 von 4: flex-plugin-sso

• Darum geht es: Das benutzerdefinierte Flex-Plug-in, das die Authentifizierung übernimmt.
• Deshalb ist es wichtig: Auf Mobilgeräten benötigen wir langlebige Token. Auf dem Desktop hat Flex eine Token-Aktualisierungslogik, die Ihr Token stündlich erneuert. Diese Token-Aktualisierungslogik funktioniert auf dem Desktop perfekt, aber auf Flex Mobile muss berücksichtigt werden, dass die Anwendung zwischen den Gesprächen komplett geschlossen ist. Wenn ein Teammitglied die Anwendung wieder öffnet, soll es aber nicht jedes Mal den Authentifizierungsvorgang durchlaufen müssen.
• Installation: Folgen Sie der Anleitung zur Installation des Flex-Plug-in SSO hier. Am Ende sollten Sie sich selbst mit Ihrer Handynummer hinzufügen können, um zu testen, ob Sie sich an Flex Desktop anmelden können (ja, am Desktop, der Anwendungsfall für Mobilgeräte folgt noch).

Schritt 2 von 4: install-script

• Darum geht es: Dieses Skript muss einmal für Ihre Flex-Instanz ausgeführt werden. Es erstellt einfach eine neue Aktivität namens „Flex for Mobile“.
• Deshalb ist es wichtig:

• Flex muss wissen, ob der Anruf an das Mobiltelefon oder den Desktop des Teammitglieds gesendet werden soll.
• Flex sollte nur dann eine Push-Benachrichtigung an das Mobiltelefon eines Teammitglieds senden, wenn dieses mobil arbeitet.
• Vorarbeiter müssen benutzerdefinierte Berichte in Flex Insights erstellen können und dabei die Ansicht und die Messwerte der Teammitglieder am Desktop von denen am Mobiltelefon trennen, denn beispielsweise sind die „durchschnittliche Bearbeitungszeit“ und andere Messwerte auf diesen Geräten völlig unterschiedlich.

• Installation: Folgen Sie der Ausführungsanleitung hier, dieser Schritt ist ganz einfach.

Schritt 3 von 4: react-native

• Darum geht es: Dies ist ein React Native-Projekt.
  
  Fun Fact: Ich hatte vor diesem Projekt keine Erfahrung mit React Native, aber Expo hat mir den Einstieg sehr erleichtert. Wenn Sie Erfahrung mit React haben, dürften Sie auch mit React Native zurechtkommen.
• Deshalb ist es wichtig: Dies ist die eigentliche mobile App, die auf den Mobiltelefonen der Teammitglieder ausgeführt wird.
• Installation: Folgen Sie der Anleitung hier, um sie zu installieren und lokal auszuführen.

Schritt 4 von 4: twilio-functions

• Darum geht es: Diese Funktionen müssen auf Twilio Functions bereitgestellt werden.
• Deshalb ist es wichtig: Diese Funktionen bilden die Grundlage für Push-Benachrichtigungen und eingehende Anrufe. Sie werden ausgeführt, sobald das Teammitglied im Modus „Auf Mobilgerät verfügbar“ ist. Befindet sich das Teammitglied in einem anderen Aktivitätsmodus („Offline“ oder „Verfügbar“), werden diese Funktionen nicht ausgeführt, sodass keine Push-Benachrichtigungen gesendet werden, während das Teammitglied am Flex Desktop arbeitet.
• Installation: Folgen Sie den Anweisungen hier, um diese Funktionen einzurichten.

Zusammenfassung

Das war es schon! Ich hoffe, Flex Mobile hat Ihnen genauso viel Spaß gemacht wie mir die Entwicklung.

Wenn Sie Hilfe brauchen, erstellen Sie eine Issue in Github und ich sehe mir das an. Ich kann allerdings nicht versprechen, wie schnell ich dazu komme, wenn Sie ein SLA oder Hilfe beim Projekt benötigen, wenden Sie sich bitte an ein Twilio-Partnerunternehmen.

Bruno Kilian ist Senior Solutions Engineer bei Twilio. Derzeit unterstützt er Unternehmen in EMEA bei der Entwicklung erfolgreicher Customer Engagement-Lösungen auf Basis von Twilio. Zuvor arbeitete Bruno Kilian als Tech-Lead im Contact Center einer Versicherung mit rund 600 Teammitgliedern in 4 Ländern. Sie erreichen ihn auf Linkedin oder können mit ihm auf Github zusammenarbeiten.

Marius Obert ist Developer Evangelist bei Twilio. Dabei arbeitet er an inspirierende Demoszenarien, deren Open-source Code er mit der Welt auf GitHub teilt. Außerdem ist er recht häufig auf verschiedensten Entwicklerkonferenzen in der DACH-Region zu finden und redet gerne über die neusten Trends in der Webtechnologie.