Salesforce-Sprachintegration mit Twilio Flex

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

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

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

Hinweis

Um Agent Assist-UI-Module in Salesforce einzubinden, 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 mit Ihrer Instanz-URL oder auf der Salesforce-Anmeldeseite an und beachten Sie Folgendes:

    • Ihre Salesforce-Meine Domain-URL. So finden Sie die Meine Domain-URL:
      1. Gehen Sie zur Menüleiste > Menü Einrichtung.
      2. Klicken Sie auf Einrichtung.
      3. Geben Sie im Feld Schnellsuche den Wert Meine Domain ein. Der Domainname ist in folgendem 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 Einrichtung.
      3. Geben Sie im Feld Schnellsuche den Wert Unternehmensinformationen ein. Hinweis: Diese Integrationsschritte wurden nur mit der Salesforce Developer Edition getestet. Wenn Sie eine andere Edition verwenden, können sich Unterschiede bei den Funktionslizenzen und der Salesforce-Benutzeroberfläche ergeben.

  • Agent Assist-Integrations-Back-End

    1. Folgen Sie der Anleitung um die Integration einzurichten.
    2. Konfigurieren Sie vor dem Ausführen des Bereitstellungsskripts die folgenden Umgebungsvariablen mit deploy.sh oder in einer .env-Datei im Stammverzeichnis des Projekts:
      • AUTH_OPTION: Setzen Sie diesen Wert auf SalesforceLWC.
      • SALESFORCE_DOMAIN: Ein Domainname ähnlich YOUR_SUBDOMAIN.develop.lightning.force.com. Sie haben diesen Wert in den Voraussetzungen für Salesforce notiert. Beachten Sie, dass Sie https:// nicht angeben sollten.
      • SALESFORCE_ORGANIZATION_ID: Sie haben diesen Wert in den Voraussetzungen für Salesforce notiert.
      • APP_AUTH_OPTION: Setzen Sie diesen Wert auf Twilio.
      • TWILIO_ACCOUNT_SID: Setzen Sie diesen Wert 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 Media-Streams für Sprachanrufe an Agent Assist senden. Folgen Sie dieser Anleitung, um das SIPREC-Connector-Add-on zu installieren.

  1. Gehen Sie zu Twilio Home > Marketplace > Catalog > Twilio > Siprec Connector.
  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 Schritte zur SBC-Konfiguration und ‑Validierung ignorieren, da sie für den Twilio Siprec-Connector abgeschlossen sind.
  4. Gehen Sie zu Twilio Home > Functions and Assets.
    • Wenn Functions and Assets in der Seitenleiste nicht sichtbar ist, können Sie es über Explore Products 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. Geben Sie der Funktion den Namen 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 an Agent Assist weiterzugeben. Folgen Sie dieser Anleitung, um IVR mit Flex Studio zu konfigurieren.

  1. Rufen Sie die Twilio-Konsole auf.
  2. Klicken Sie auf Develop > Phone Numbers > Manage > Active Numbers. In der Tabelle sollte eine Zeile mit der standardmäßigen Twilio-Nummer vorhanden sein, die für Ihr Flex-Konto bereitgestellt wurde.
  3. Klicken Sie im Bereich Voice - Studio Workflow auf Voice IVR.
  4. Ziehen Sie das Widget Make HTTP Request in den Ablauf.
  5. Trennen Sie Incoming Call von der Eingabe des Widgets SendCallToAgent.
  6. Verbinden Sie Incoming Call mit der Eingabe des Widgets Make HTTP Request.
  7. Konfigurieren Sie das Widget Make HTTP Request mit den folgenden Details:
    • Widget Name: register_twilio
    • Request Method: POST
    • Request URL: <your-ui-connector-cloud-run-url>.run.app/register-app
    • Content type: Application/JSON
    • Request body: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. Ziehen Sie das Widget Run Function in den Ablauf.
  9. Verbinden Sie die Ausgaben Success und Fail des Widgets register_twilio mit der Eingabe des Widgets Run Function.
  10. Erstellen Sie ein Widget mit den folgenden Details:
    • Widget Name: conversation_name
    • Service: ui-connector-auth
    • Environment: ui
    • Function: conversation-name
    • Function Parameters:
      • 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 das Widget Fork Stream aus der Seitenleiste in den Ablauf.
  12. Verbinden Sie die Ausgaben Success und Fail des Widgets Make HTTP Request mit der Eingabe des Widgets Fork Stream.
  13. Verbinden Sie den Knoten Next des Widgets Fork Stream mit dem Widget SendCallToAgent.

  14. Konfigurieren Sie das Widget Fork Stream so:

    • Stream Action: Start
    • Stream Type: Siprec
    • Connector Name: Siprec1
    • Tracks: Both Tracks

    • Stream Parameters:

      • Key: conversation

      • Value:

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

  15. Klicken Sie auf Speichern > Veröffentlichen.

Kontodetails

Folgen Sie dieser Anleitung, um die Details Ihres Twilio Flex-Kontos zu erfassen. Sie benötigen diese Informationen, um die Flex CTI später in Salesforce zu konfigurieren.

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

Schritt 2: Salesforce-Entwicklungsprojekt einrichten

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

  1. Führen Sie den folgenden Code aus, um das Agent Assist-Integrations-Repository 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 der UI-Module herunterzuladen, die Sie später als Statische Ressourcen bereitstellen. Salesforce erfordert statische Ressourcen, um JavaScript von Drittanbietern zu laden.

    npm run generate-static-resources
npm install

Schritt 3: Salesforce-Umgebung einrichten

Sie können Agent Assist-UI-Module in einer bestimmten Umgebung einbinden, z. B. in der Produktions- oder Entwicklungsumgebung. In Salesforce werden diese Umgebungen als Organisationen bezeichnet.

Organisation mit der Salesforce-Befehlszeile konfigurieren

Folgen Sie dieser Anleitung, um Ihre Organisation mit der Salesforce-Befehlszeile für die Agent Assist-Integration zu konfigurieren.

  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-Ablauf 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 so zu konfigurieren, dass Nutzer mit Salesforce authentifiziert werden.

  1. Gehen Sie zur Menüleiste > Menü Einrichtung und klicken Sie dann auf Einrichtung. Geben Sie im Feld Schnellsuche den Wert Manager für externe Client-Apps ein.
    1. Klicken Sie auf Manager für externe Client-Apps > Neue externe Client-App > Erstellen und geben Sie dann die folgenden Informationen ein.
      • Name der externen Client-App: lwc auth
      • API-Name: lwc_auth
      • E‑Mail-Adresse des Kontakts: 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: Zugriff auf den Dienst für die Identitäts-URL
      • API (OAuth-Einstellungen aktivieren) > Ablauf für Clientanmeldedaten aktivieren: Ausgewählt
    2. Klicken Sie auf Erstellen.
  2. Gehen Sie zur Menüleiste > Menü Einrichtung und klicken Sie dann auf Einrichtung. Geben Sie im Feld Schnellsuche den Wert Manager für externe Client-Apps ein.
    1. Klicken Sie auf den Namen Ihrer externen Client-App > Bearbeiten.
    2. Gehen Sie zu OAuth-Richtlinien > OAuth-Abläufe und Erweiterungen für externe Client-Apps.
    3. Achten Sie darauf, dass Ablauf für Clientanmeldedaten aktivieren ausgewählt ist.
    4. Geben Sie unter Ausführen als Ihren Anmeldenamen ein.
    5. Klicken Sie auf Speichern.
  3. Gehen Sie zur Menüleiste > Menü Einrichtung und klicken Sie dann auf Einrichtung. Geben Sie im Feld Schnellsuche den Wert 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-Key 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 sie für einen späteren Schritt.

CORS- und Content Security Policies einrichten

  1. Gehen Sie zur Menüleiste > Menü Einrichtung und klicken Sie dann auf Einrichtung.
  2. Geben Sie im Feld Schnellsuche den Wert 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. Gehen Sie zur Menüleiste > Menü Einrichtung und klicken Sie dann auf Einrichtung.
  4. Geben Sie im Feld Schnellsuche den Wert 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 Cloud Run-Dienstendpunkts des UI-Connectors ein, den Sie mit Ihrem Agent Assist-Integrations-Back-End bereitgestellt haben. Sie finden diese URL in der Cloud Run-Konsole. Beispiel: https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • CSP-Anweisungen: Wählen Sie alle Kästchen aus.
    • Klicken Sie auf Speichern und neu.
  6. Geben Sie die folgenden Informationen ein:
    • API-Name: ui_connector_wss
    • URL: Geben Sie die URL des Cloud Run-Dienstendpunkts des UI-Connectors ein, den Sie mit Ihrem Agent Assist-Integrations-Back-End 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-Anweisungen: Wählen Sie alle Kästchen aus.
    • Klicken Sie auf 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-Anweisungen: Wählen Sie alle Kästchen aus.
    • Klicken Sie auf Speichern und neu.
  8. Geben Sie die folgenden Informationen ein:
    • API-Name: twilio_flex
    • URL: https://flex.twilio.com
    • CSP-Anweisungen: Wählen Sie alle Kästchen aus.
    • Klicken Sie auf Speichern.

Schritt 5: Twilio Flex CTI-Plug-in installieren

Salesforce provides Salesforce Open CTI to allow integration of third-party softphones with your Salesforce instance.

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 Web Component installieren

Folgen Sie dieser Anleitung, um mit dem Lightning Experience-Editor die Salesforce Lightning Web Component auf der Kontaktseite hinzuzufügen, auf der Ihre Twilio Flex CTI geöffnet wird, wenn ein neuer Anruf eingeht.

  1. Gehen Sie zur Service Console 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 Header und Zwei gleich große Bereiche aus.
    2. Klicken Sie auf Weiter.
    3. Ordnen Sie jeden Bereich einem neuen Bereich 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 so aus, um Konfigurationsdetails hinzuzufügen.
    • Endpunkt: Die URL des UI-Connectors Ihres Agent Assist-Integrations-Back-Ends, z. B. eine URL aus der Cloud Run-Konsole wie: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • Funktionen: Agent Assist-Funktionen in Ihrem Unterhaltungsprofil aktiviert, wie CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2, und AGENT_COACHING. Einige Funktionen wie SMART_REPLY sind für voice nicht verfügbar.
    • Channel: Geben Sie an, dass die Integration für voice gilt.
    • Plattform: Geben Sie an, dass die Plattform twilio ist.
    • conversationProfile: Ihr Agent Assist-Unterhaltungsprofil Ressourcenname (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 an das 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 sie in Schritt 1 notiert.
  3. Nehmen Sie den Anruf in der Service Console an. Auf dem Bildschirm sollte eine neue oder vorhandene Kontaktseite für die Nummer geöffnet werden, von der der Anruf eingegangen ist.
  4. Wenn es sich um eine neue Kontaktseite handelt, speichern Sie den Kontakt. Wenn die Kontaktseite geladen wird, sollte die Salesforce Lightning Web Component in der Seitenleiste geladen werden.
  5. Testen Sie beide Seiten der Unterhaltung und prüfen Sie, ob die Agent Assist-Funktionen wie konfiguriert funktionieren.