Diese Seite wurde von der Cloud Translation API übersetzt.

UI-Module und Connectors implementieren

Agent Assist bietet eine Reihe vordefinierter, anpassbarer UI-Komponentenmodule, mit denen Sie Agent Assist-Funktionen in Ihre Benutzeroberfläche einbinden können. Sie können die Module in jede Webanwendung einbetten, um Ihren Kundenservicemitarbeitern Agent Assist-Vorschläge anzuzeigen. Eine detaillierte Anleitung zum Einbinden von Modulen in LivePerson finden Sie im LivePerson-Tutorial.

Agent Assist-Funktionen

Im Folgenden finden Sie die Funktionen von Agent Assist, die Sie als UI-Modulkomponenten implementieren können.

Hinweise

Bevor Sie UI-Module implementieren können, müssen Sie ein Unterhaltungsprofil konfigurieren.

UI-Module implementieren

Es gibt zwei Hauptansätze, um Agent Assist-Module in Ihre Benutzeroberfläche einzubinden. Beim verwalteten Container werden alle ausgewählten Agent Assist-Funktionen in einem einzigen Steuerfeld integriert. Alternativ können Sie Funktionen einzeln importieren, wenn Sie ihre Konfiguration in der Benutzeroberfläche anpassen möchten. Die Kommunikation zwischen den UI-Komponenten und dem Desktop des Kundenservicemitarbeiters wird über einen UI-Modul-Connector ermöglicht. Die gesamte Kommunikation erfolgt über das Senden von benutzerdefinierten Ereignissen.

Sowohl der Containeransatz als auch einzelne Komponenten können mit jedem System verwendet werden. Agent Assist bietet jedoch nur UI-Modul-Connectors für die Verwendung mit Genesys Cloud, LivePerson, Twilio und Salesforce. Wenn Sie die UI-Module in ein anderes Kundenservicesystem einbinden möchten, müssen Sie eigene Connectoren erstellen. Weitere Informationen finden Sie in der Dokumentation zum Connector für benutzerdefinierte UI-Module.

Dateiversionen

Rufen Sie die neueste Version einer gstatic-Datei ab, indem Sie die neueste Version angeben:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

Sie können eine bestimmte stabile Version einer gstatic-Datei abrufen, indem Sie die genaue Version angeben:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1.7/container.js"></script>

Aktuelle Versionen:

      Container: v1.10
      Common: v1.4
      Knowledge assist: v1.1
      Generative knowledge assist: v2.9
      Smart reply: v1.3
      Summarization: v1.3
      Transcript: v1.2

Verwalteter Container

Beim verwalteten Containeransatz wird eine einzelne Komponente eingebunden, die die von Ihnen ausgewählten Agent Assist-Funktionen in einem einzigen Steuerfeld darstellt. In diesem Bereich werden auch alle Probleme mit freigegebenen Modulen behandelt, einschließlich Ladeanschlüssen und Fehlermeldungen. Wir empfehlen diesen Ansatz, wenn Sie die Module in den Desktop eines Drittanbieters für Kundenservicemitarbeiter wie LivePerson einbinden oder nur wenig bis gar keine Anpassungen der Darstellung der Agent Assist-Funktionen in Ihrer Benutzeroberfläche benötigen.

Nach der Initialisierung der Containerkomponente werden alle erforderlichen Abhängigkeiten geladen. Für die Initialisierung des Containers ist nur ein einziger Import erforderlich, unabhängig davon, wie viele Agent Assist-Funktionen verwendet werden.

Initialisieren Sie die Containerkomponente:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

Name des Elements-Tags:

    <agent-assist-ui-modules>

Beispiel für die Initialisierung:

    const uiModulesEl = document.createElement('agent-assist-ui-modules');
    uiModulesEl.setAttribute('features', 'SMART_REPLY,ARTICLE_SUGGESTION');
    uiModulesEl.setAttribute('conversation-profile', 'projects/my-project/locations/global/conversationProfiles/123');
    uiModulesEl.setAttribute('auth-token', authToken);
    uiModulesEl.setAttribute('channel', 'chat');
    uiModulesEl.setAttribute('custom-api-endpoint', 'https://my-dialogflow-proxy-service.com');
    uiModulesEl.setAttribute('dark-mode-background', '#000000');
    hostElement.appendChild(uiModulesEl);

Weitere Informationen finden Sie auf der Dokumentationsseite der Komponenten-API.

Einzelne Komponenten

Sie haben die Möglichkeit, UI-Module für Agent Assist einzeln statt in einem einzigen Container zu integrieren. Wir empfehlen diesen Ansatz nur, wenn Sie eine benutzerdefinierte Anwendung verwenden, in der die Module möglicherweise in verschiedenen Bereichen der Seite gerendert werden müssen, oder wenn Sie eine erhebliche Anpassung benötigen.

In diesem Fall müssen Sie jedes gerätespezifische UI-Modul einzeln importieren. Außerdem müssen Sie den UI-Modul-Connector importieren und initialisieren.

UI-Modul-Connector implementieren

Fügen Sie Ihrer Anwendung den folgenden Code hinzu. Dadurch wird eine globale UiModulesConnector-Klasse freigegeben, die dann instanziiert und initialisiert werden kann:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/common.js"></script>

Methoden:

    constructor(): void;
    init(config: ConnectorConfig): void;
    disconnect(): void;
    setAuthToken(token: string): void;

Das folgende Beispiel zeigt die vollständige TypeScript-Schnittstelle für das Connector-Konfigurationsobjekt. Wenn Sie einen benutzerdefinierten UI-Modul-Connector für die Verwendung mit einem nicht unterstützten System erstellt haben, setzen Sie agentDesktop auf Custom. Im folgenden Beispiel finden Sie eine Liste der unterstützten Desktopsysteme für Kundenservicemitarbeiter.

interface ConnectorConfig {
  /** Communication mode for the UI modules application. */
  channel: 'chat'|'voice';

  /** Agent desktop to use. */
  agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';

  /** Conversation profile name to use. */
  conversationProfileName: string;

  /** API Connector config. */
  apiConfig: {
    /**
     * Authentication token to attach to outgoing requests. Should be a valid
     * OAuth token for Dialogflow API, or any other token for custom API
     * endpoints.
     */
    authToken: string;

    /**
     * Specifies a custom proxy server to call instead of calling the Dialogflow
     * API directly.
     */
    customApiEndpoint?: string;

    /** API key to use. */
    apiKey?: string;

    /**
     * Additional HTTP headers to include in the Dialogflow/proxy server API
     * request.
     */
    headers?: Array;
  }

  /** Event-based connector config. Set this for voice conversations. */
  eventBasedConfig?: {
    /**
     * Transport protocol to use for updates. Defaults to 'websocket' if none is
     * specified.
     */
    transport?: 'websocket'|'polling';

    /** Event-based library to use (i.e., Socket.io). */
    library?: 'SocketIo';

    /** Endpoint to which the connection will be established. */
    notifierServerEndpoint: string;
  }
}

Beispiel für eine Instanziierung:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'LivePerson',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  }
});