Salesforce-Sprachintegration mit Twilio Flex

Architektur für die Integration von Agent Assist und Twilio Flex in Salesforce

Bei dieser Voice-Integration wird die Twilio Open CTI-Integration verwendet, um ein Twilio Flex-Callcenter in Ihre Salesforce-Instanz zu integrieren.

Agent Assist verwendet den Media-Stream aus dem Twilio Flex-Anruf, um Ihren Kundenservicemitarbeitern Vorschläge in der Salesforce Lightning Service Console zu machen.

Hinweise

Wenn Sie Agent Assist-UI-Module in Salesforce einbinden möchten, benötigen Sie Zugriff auf die folgenden Ressourcen:

  • Node.js

    Folgen Sie der empfohlenen Installationsanleitung für Ihr Betriebssystem.

  • Salesforce-Befehlszeile

    Folgen Sie der empfohlenen Installationsanleitung für Ihr Betriebssystem.

  • Google Cloud CLI

    Installieren Sie den gcloud-Befehl wie beschrieben und authentifizieren Sie sich mit gcloud auth login.

  • Salesforce

    Melden Sie sich über Ihre Instanz-URL oder die Salesforce-Anmeldeseite an und beachten Sie Folgendes:

    • Ihre Salesforce-URL „Meine Domain“. So finden Sie die Meine Domäne-URL:
      1. Gehen Sie zur Menüleiste > Menü Einrichtung.
      2. Klicken Sie auf Einrichten.
      3. Geben Sie im Feld Schnellsuche Meine Domain ein. Der Domainname hat das folgende Format: MY-DOMAIN-NAME.develop.my.salesforce.com.
    • Ihre Salesforce-Organisations-ID. So finden Sie die Organisations-ID:
      1. Gehen Sie zur Menüleiste > Menü Einrichtung.
      2. Klicken Sie auf Einrichten.
      3. Geben Sie im Feld Schnellsuche Unternehmensinformationen ein. Hinweis: Diese Integrationsschritte wurden nur mit der Salesforce Developer Edition getestet. Wenn Sie eine andere Edition verwenden, kann es zu Unterschieden bei den Funktionslizenzen und der Salesforce-Benutzeroberfläche kommen.

  • Back-End für die Agent Assist-Integration

    1. Folgen Sie der Anleitung, um die Integration einzurichten.
    2. Bevor Sie das Bereitstellungsskript ausführen, konfigurieren Sie die folgenden Umgebungsvariablen mit deploy.sh oder in einer .env-Datei im Projektstammverzeichnis:
      • AUTH_OPTION: Setzen Sie dies auf SalesforceLWC.
      • SALESFORCE_DOMAIN: Ein Domainname, der YOUR_SUBDOMAIN.develop.lightning.force.com ähnelt. Diesen Wert haben Sie in der Salesforce-Voraussetzung notiert. https:// darf nicht enthalten sein.
      • SALESFORCE_ORGANIZATION_ID: Sie haben diesen Wert in der Salesforce-Voraussetzung notiert.
      • APP_AUTH_OPTION: Setzen Sie dies auf Twilio.
      • TWILIO_ACCOUNT_SID: Setzen Sie dies auf Ihre Twilio-Konto-SID.

Schritt 1: Twilio Flex einrichten

Twilio Flex dient in dieser Integration als Softphone. Sie können sich in der Twilio-Konsole anmelden, um ein Flex-Konto einzurichten. Auf der Twilio-Einrichtungsseite finden Sie eine detaillierte Anleitung zum Erstellen eines Flex-Kontos.

SIPREC-Connector-Add-on installieren

Mit dem SIPREC-Connector-Add-on kann Ihr Twilio Flex-Konto SIPREC-Forks von Sprachanruf-Media-Streams an Agent Assist senden. So installieren Sie das SIPREC-Connector-Add-on:

  1. Rufen Sie Twilio Home > Marketplace > Catalog > Twilio > Siprec Connector auf.
  2. Klicken Sie auf Installieren > das Kästchen Bestätigung der Nutzungsbedingungen > Installieren.
  3. Konfigurieren Sie das Plug-in auf dem Tab Konfigurieren mit den folgenden Details:
    • Eindeutiger Name: SipRec1
    • Server für die Sitzungsaufzeichnung: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • Weitere Informationen zum Bereitstellen einer GTP-Nummer finden Sie in der Dokumentation zur Telefonieintegration. Sie können die SBC-Konfigurations- und Validierungsschritte ignorieren, da sie für den Twilio Siprec-Connector abgeschlossen sind.
  4. Rufen Sie Twilio Home > Functions and Assets auf.
    • Wenn Funktionen und Assets nicht in der Seitenleiste angezeigt wird, können Sie es über Produkte entdecken anpinnen.
  5. Klicken Sie auf Dienst erstellen.
  6. Geben Sie dem neuen Dienst den Namen ui-connector-auth.
  7. Klicken Sie im angezeigten Editor auf Hinzufügen + > Funktion hinzufügen.
  8. Benennen Sie die Funktion conversation-name.
  9. Klicken Sie auf  und ändern Sie die Sichtbarkeit der Funktion in Öffentlich.
  10. Kopieren Sie den gesamten Inhalt von ui-connector-auth.js aus dem GitHub-Repository und fügen Sie ihn in den Editor ein.
  11. Klicken Sie auf Speichern.
  12. Klicken Sie auf Alle bereitstellen.

IVR mit Flex Studio konfigurieren

Die IVR besteht aus der Konfiguration eines programmatischen Anrufablaufs mit Twilio Studio, um den SIPREC-Fork des Media-Streams an Agent Assist zu senden. Außerdem wird ein HTTP-Post gesendet, um die Telefonnummer und die Unterhaltungs-ID mit Agent Assist zu teilen. So konfigurieren Sie IVR mit Flex Studio.

  1. Öffnen Sie die Twilio Console.
  2. Klicken Sie auf Develop (Entwickeln) > Phone Numbers (Telefonnummern) > Manage (Verwalten) > Active Numbers (Aktive Nummern). Die Tabelle sollte eine Zeile mit der standardmäßigen Twilio-Nummer enthalten, die für Ihr Flex-Konto bereitgestellt wurde.
  3. Klicken Sie im Bereich Voice – Studio Workflow auf Voice IVR.
  4. Ziehen Sie das Widget HTTP-Anfrage stellen in den Ablauf.
  5. Trennen Sie die Verbindung von Incoming Call vom Eingang des Widgets SendCallToAgent.
  6. Verbinden Sie Incoming Call mit der Eingabe des Widgets Make HTTP Request.
  7. Konfigurieren Sie das Widget HTTP-Anfrage stellen mit den folgenden Details:
    • Widget-Name: register_twilio
    • Anfragemethode: POST
    • Anfrage-URL: <your-ui-connector-cloud-run-url>.run.app/register-app
    • Inhaltstyp: Application/JSON
    • Anfragetext: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. Ziehen Sie ein Run Function-Widget (Funktion ausführen) in den Ablauf.
  9. Verbinden Sie die Ausgaben Erfolg und Fehler des register_twilio-Widgets mit der Eingabe des Widgets Funktion ausführen.
  10. Erstellen Sie ein Widget mit den folgenden Details:
    • Widget-Name: conversation_name
    • Dienst: ui-connector-auth
    • Umgebung: ui
    • Funktion: conversation-name
    • Funktionsparameter:
      • 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. Ziehen Sie ein Fork Stream-Widget (Stream verzweigen) aus der Seitenleiste in den Ablauf.
  12. Verbinden Sie die Ausgaben Success and Fail des Widgets Make HTTP Request mit der Eingabe des Widgets Fork Stream.
  13. Verbinden Sie den Knoten Weiter des Widgets Stream aufteilen mit dem Widget SendCallToAgent.

  14. Konfigurieren Sie das Widget Fork Stream so:

    • Stream-Aktion: Starten
    • Stream Type (Streamtyp): Siprec
    • Connector Name (Connector-Name): Siprec1
    • Tracks: Beide Tracks

    • Stream-Parameter:

      • Key: conversation

      • Wert:

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

  15. Klicken Sie auf Speichern > Veröffentlichen.

Kontodetails

In diesem Schritt erfahren Sie, wie Sie die Details Ihres Twilio Flex-Kontos abrufen. Sie benötigen diese Informationen später, um Flex CTI in Salesforce zu konfigurieren.

  1. Rufen Sie Twilio Home > Account Dashboard auf und notieren Sie sich die folgenden Informationen:
    • Account SID (Konto-SID)
    • Meine Twilio-Telefonnummer

Schritt 2: Salesforce-Entwicklungsprojekt einrichten

So beginnen Sie mit der Integration von Agent Assist-UI-Modulen:

  1. Führen Sie den folgenden Code aus, um das Repository für die Agent Assist-Integration zu klonen und Ihr Projekt zu öffnen:

    git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations
cd salesforce/aa-lwc

  2. Führen Sie die folgenden Befehle aus, um die JavaScript-Dateien für UI-Module herunterzuladen, die Sie später als statische Ressourcen bereitstellen. Salesforce erfordert statische Ressourcen zum Laden von JavaScript von Drittanbietern.

    npm run generate-static-resources
npm install

Schritt 3: Salesforce-Umgebung einrichten

Sie können Agent Assist-UI-Module in eine bestimmte Umgebung einbinden, z. B. in die Produktions- oder Entwicklungsumgebung. Salesforce bezeichnet diese Umgebungen als Organisationen.

Organisation mit der Salesforce-Befehlszeile konfigurieren

So konfigurieren Sie Ihre Organisation mit der Salesforce CLI für die Agent Assist-Integration:

  1. Führen Sie den folgenden Code aus und authentifizieren Sie die Befehlszeile mit den Salesforce-Anmeldedaten, die Sie normalerweise verwenden. 
    npm run login
  2. Führen Sie den folgenden Code aus, um die LWC in der Organisation bereitzustellen. 
    npm run deploy

Schritt 4: Externe Client-App erstellen

Die Salesforce-LWC verwendet den OAuth 2.0-Flow für Clientanmeldedaten, um Sie zu authentifizieren. Eine externe Client-App ermöglicht den Ablauf für Clientanmeldedaten. Verwenden Sie den Consumer-Key und das Consumer-Secret der App, um die Salesforce-LWC zu konfigurieren, damit Nutzer bei Salesforce authentifiziert werden.

  1. Klicken Sie in der Menüleiste auf das Menü Einrichtung und dann auf Einrichtung. Geben Sie im Feld Schnellsuche Manager für externe Client-Apps ein.
    1. Klicken Sie auf External Client App Manager > New External Client App > Create und geben Sie die folgenden Informationen ein.
      • Name der externen Client-App: lwc auth
      • API-Name: lwc_auth
      • E‑Mail-Adresse für Kontakt: your_email@example.com
      • API (OAuth-Einstellungen aktivieren) > OAuth aktivieren: Ausgewählt
      • API (OAuth-Einstellungen aktivieren) > Callback-URL: https://login.salesforce.com/services/oauth2/callback
      • API (OAuth-Einstellungen aktivieren) > Ausgewählte OAuth-Bereiche: Greifen Sie auf den Identitäts-URL-Dienst zu.
      • API (OAuth-Einstellungen aktivieren) > Clientanmeldedatenfluss aktivieren: Ausgewählt
    2. Klicken Sie auf Erstellen.
  2. Klicken Sie in der Menüleiste auf das Menü Einrichtung und dann auf Einrichtung. Geben Sie im Feld Schnellsuche Manager für externe Client-Apps ein.
    1. Klicken Sie auf den Namen Ihrer externen Client-App > Bearbeiten.
    2. Rufen Sie OAuth-Richtlinien > OAuth-Abläufe und externe Client-App-Erweiterungen auf.
    3. Achten Sie darauf, dass Enable Client Credentials Flow (Ablauf für Clientanmeldedaten aktivieren) ausgewählt ist.
    4. Geben Sie unter Ausführen als Ihren Anmeldenamen ein.
    5. Klicken Sie auf Speichern.
  3. Klicken Sie in der Menüleiste auf das Menü Einrichtung und dann auf Einrichtung. Geben Sie im Feld Schnellsuche Manager für externe Client-Apps ein.
    1. Klicken Sie auf den Namen Ihrer externen Client-App > Bearbeiten.
    2. Gehen Sie zu OAuth-Einstellungen > App-Einstellungen > Consumer-Schlüssel und ‑Secret.
    3. Geben Sie den Bestätigungscode ein, der an Ihre E-Mail-Adresse gesendet wurde.
    4. Kopieren Sie den Consumer-Key und das Consumer-Secret an einen sicheren Ort. Sie benötigen diese für einen späteren Schritt.

CORS- und Content Security Policy festlegen

  1. Klicken Sie in der Menüleiste auf das Menü Einrichtung und dann auf Einrichtung.
  2. Geben Sie im Feld Schnellsuche CORS ein und klicken Sie dann auf Bearbeiten.
    1. Wählen Sie CORS für OAuth-Endpunkte aktivieren aus.
    2. Klicken Sie auf Speichern.
  3. Klicken Sie in der Menüleiste auf das Menü Einrichtung und dann auf Einrichtung.
  4. Geben Sie im Feld Schnellsuche Vertrauenswürdige URLs ein und klicken Sie dann auf Neue vertrauenswürdige URL.
  5. Geben Sie die folgenden Informationen ein:
    • API-Name: ui_connector
    • URL: Geben Sie die URL des UI Connector Cloud Run Service-Endpunkts ein, den Sie mit Ihrem Agent Assist Integration-Backend bereitgestellt haben. Sie finden diese URL in der Cloud Run-Konsole. Beispiel: https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • CSP Directives (CSP-Anweisungen): Wählen Sie alle Kästchen aus.
    • Klicken Sie auf Save & New (Speichern und neu).
  6. Geben Sie die folgenden Informationen ein:
    • API-Name: ui_connector_wss
    • URL: Geben Sie die URL des Cloud Run-Dienstendpunkts für den UI-Connector ein, den Sie mit Ihrem Agent Assist-Integrations-Backend bereitgestellt haben. Sie finden diese URL in der Cloud Run-Konsole. Ändern Sie das Protokoll in „wss“ für WebSockets-Traffic. Beispiel: wss://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • CSP Directives (CSP-Anweisungen): Wählen Sie alle Kästchen aus.
    • Klicken Sie auf Save & New (Speichern und neu).
  7. Geben Sie die folgenden Informationen ein:
    • API-Name: salesforce_domain
    • URL: Geben Sie die URL Ihrer Salesforce-Domain im folgenden Format ein: https://YOUR_SUBDOMAIN.my.salesforce.com.
    • CSP Directives (CSP-Anweisungen): Wählen Sie alle Kästchen aus.
    • Klicken Sie auf Save & New (Speichern und neu).
  8. Geben Sie die folgenden Informationen ein:
    • API-Name: twilio_flex
    • URL: https://flex.twilio.com
    • CSP Directives (CSP-Anweisungen): Wählen Sie alle Kästchen aus.
    • Klicken Sie auf Speichern.

Schritt 5: Twilio Flex CTI-Plug-in installieren

Salesforce bietet Salesforce Open CTI, um die Integration von Softphones von Drittanbietern in Ihre Salesforce-Instanz zu ermöglichen.

Twilio Flex CTI verwendet Salesforce Open CTI, damit Sie Flex direkt in Ihrer Salesforce-Instanz verwenden können. Folgen Sie der Anleitung von Twilio, um Twilio Flex CTI in Ihrer Salesforce-Instanz einzurichten.

Schritt 6: Salesforce Lightning-Webkomponente installieren

Führen Sie die folgenden Schritte aus, um mit dem Lightning Experience-Editor die Salesforce Lightning-Webkomponente auf der Kontaktseite hinzuzufügen, auf der das Twilio Flex CTI geöffnet wird, wenn ein neuer Anruf eingeht.

  1. Rufen Sie die Service Console auf und wählen Sie Kontakte aus.
  2. Wählen Sie einen Kontaktdatensatz aus.
  3. Klicken Sie auf das Menü „Einrichtung“ > Seite bearbeiten.
  4. Klicken Sie auf Vorlage > Ändern.
    1. Wählen Sie Kopfzeile und Zwei gleich große Bereiche aus.
    2. Klicken Sie auf Weiter.
    3. Ordnen Sie jede Region einer neuen Region zu.
    4. Klicken Sie auf Fertig.
  5. Verschieben Sie agentAssistContainerModule aus der Seitenleiste Komponenten in die Seitenleiste. Hinweis: Diese Komponente wurde mit dem Befehl npm deploy bereitgestellt.
  6. Klicken Sie auf die Komponente, die Sie im vorherigen Schritt platziert haben, und füllen Sie die Formularfelder wie folgt aus, um Konfigurationsdetails hinzuzufügen.
    • Endpunkt: Die URL Ihres Agent Integration Backend-UI-Connectors, z. B. eine URL aus der Cloud Run-Konsole, wie: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • Funktionen: Agent Assist-Funktionen, die in Ihrem Unterhaltungsprofil aktiviert sind,z. B. CONVERSATION_SUMMARIZATION, KNOWLEDGE_ASSIST_V2 und AGENT_COACHING. Einige Funktionen wie SMART_REPLY sind für voice nicht verfügbar.
    • channel: Gibt an, dass die Integration für voice ist.
    • platform: Geben Sie an, dass die Plattform twilio ist.
    • conversationProfile: Der Ressourcenname Ihres Agent Assist-Konversationsprofils (Beispiel: projects/GCP_PROJECT_ID/locations/GCP_REGION/conversationProfiles/CONVERSATION_PROFILE_ID)
    • consumerKey: Der Consumer-Key der externen Client-App aus einem vorherigen Schritt.
    • consumerSecret: Das Consumer-Secret der externen Client-App aus einem vorherigen Schritt.

Schritt 7: Integration testen

Sie können die Sprachintegration mit einem Testanruf beim Salesforce-Callcenter testen.

  1. Melden Sie sich über die Service Console in Twilio Flex an.
  2. Rufen Sie Ihre Twilio Flex-Nummer an. Sie haben sich das in Schritt 1 notiert.
  3. Nehmen Sie den Anruf in Ihrer Service Console entgegen. Auf dem Display sollte eine neue oder vorhandene Kontaktseite für die Nummer des Anrufers geöffnet werden.
  4. Wenn es sich um eine neue Kontaktseite handelt, speichern Sie den Kontakt. Wenn die Kontaktseite geladen wird, sollte die Salesforce Lightning-Webkomponente in der Seitenleiste geladen werden.
  5. Testen Sie beide Seiten des Gesprächs, um sicherzustellen, dass die Agent Assist-Funktionen wie konfiguriert funktionieren.