UI-Module und Connectors implementieren

Agent Assist bietet eine Reihe vorgefertigter, 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 Mitarbeitern im Kundenservice Agent Assist-Vorschläge anzuzeigen. Eine detaillierte Anleitung zum Einbinden von Modulen in LivePerson finden Sie im LivePerson-Tutorial.

Agent Assist-Funktionen

Im Folgenden sind die Agent Assist-Funktionen aufgeführt, die Sie als UI-Modulkomponenten implementieren können.

Hinweis

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

UI-Module implementieren

Es gibt zwei Hauptansätze zum Einbinden von Agent Assist-Modulen in Ihre Benutzeroberfläche:

  • Container (empfohlen): Rendert alle ausgewählten Agent Assist-Funktionen in einem einzigen optimierten Bereich.
  • Einzelne Komponenten: Ermöglicht es Ihnen, bestimmte Funktionen einzeln zu importieren, wenn Sie sie an verschiedenen Stellen auf dem Agent-Desktop platzieren möchten.

Sie können auch den Container und einzelne Komponenten zusammen verwenden. Sie können beispielsweise den Container implementieren, um alle Funktionen in einem Hauptbereich anzuzeigen, und ein eigenständiges Modul für intelligente Antworten an einer anderen Stelle platzieren, z. B. direkt unter der Chat-Anzeige des Agent-Desktops.

Beide Ansätze können mit jedem System verwendet werden. Agent Assist bietet jedoch nur Open-Source-UI-Modulintegrationen für Genesys Cloud, LivePerson, Twilio und Salesforce. Wenn Sie UI-Module in ein anderes Agent-System einbinden möchten, müssen Sie eine eigene Integration erstellen. Verwenden Sie für die meisten Funktionen den Container V2-Ansatz. Wenn Sie Platz haben, können Sie auch einzelne Komponenten wie „Intelligente Antwort“ implementieren.

Die Kommunikation zwischen den UI-Komponenten und dem Agent-Desktop wird durch einen UI-Modul-Connector ermöglicht. Die gesamte Clientkommunikation erfolgt durch das Senden benutzerdefinierter Ereignisse.

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/v2/container.js"></script>

Rufen Sie eine bestimmte stabile Version einer gstatic-Datei ab, indem Sie die genaue Version angeben:

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

Neueste Versionen: 

      Container: v1.16 // Legacy
      Container: v2.7
      Common: v1.14
      Generative knowledge assist: v2.10
      Smart reply: v1.4
      Summarization: v1.3
      Transcript: v1.4
      Genesys Cloud: v1.1

Container

Der Container ist eine einzelne Komponente, die die ausgewählten Agent Assist-Funktionen in einem einheitlichen, reaktiven Bereich rendert. Wir empfehlen, Container V2 für fast jede Integration zu verwenden.

Initialisieren Sie die Containerkomponente:

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

Element-Tag-Name:

    <agent-assist-ui-modules-v2>

Beispiel für die Initialisierung:

    const uiModulesEl = document.createElement('agent-assist-ui-modules-v2');
    uiModulesEl.setAttribute('use-configured-features', 'true');
    hostElement.appendChild(uiModulesEl);

Weitere Informationen finden Sie auf der Dokumentationsseite zur Container V2 API.

Container V1 (Legacy)

Container V1 wird unterstützt, gilt aber als Legacy. Im Gegensatz zu V2 ist der UI-Modul-Connector in V1 intern eingebettet.

Initialisieren Sie die Container V1-Komponente:

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

Element-Tag-Name:

    <agent-assist-ui-modules>

Weitere Informationen finden Sie auf der Dokumentationsseite zur Container V1 API.

Einzelne Komponenten

Sie können einige Agent Assist-Funktionen einzeln einbinden, anstatt einen einzelnen Container zu verwenden. Wir empfehlen diesen Ansatz nur, wenn Sie eine benutzerdefinierte Anwendung verwenden, bei der die Module in verschiedenen Abschnitten der Seite gerendert werden müssen, oder wenn Sie umfangreiche Anpassungen benötigen. Sie können beispielsweise ein Modul für intelligente Antworten direkt unter der Chat-Anzeige platzieren.

In diesem Fall müssen Sie das ausgewählte funktionsspezifische UI-Modul einzeln importieren. Außerdem müssen Sie den UI-Modul-Connector importieren und initialisieren.

UI-Modul-Connector implementieren

Sofern Sie nicht Version 1 des Containers verwenden, müssen Sie den UI-Modul-Connector implementieren, um UI-Module zu verwenden. Fügen Sie Ihrer Anwendung den folgenden Code hinzu, um eine globale UiModulesConnector-Klasse verfügbar zu machen, 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;

Im Folgenden wird die TypeScript-Schnittstelle für das Konfigurationsobjekt des Connectors beschrieben. Wenn Sie einen benutzerdefinierten UI-Modul-Connector für die Verwendung mit einem nicht unterstützten System erstellt haben, legen Sie agentDesktop auf Custom fest. Im folgenden Beispiel finden Sie eine Liste der unterstützten Agent-Desktop-Systeme.

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

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

  /** Optional desktop source for metric tracking. */
  agentDesktopSource?: string;

  /** 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. Required for voice/omnichannel conversations and some features of chat conversations. */
  eventBasedConfig?: {
    /** Transport protocol to use for updates. Defaults to 'websocket'. */
    transport?: string;

    /** Event-based library to use. */
    library?: 'SocketIo';

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

    /** Additional Socket.io connect options. */
    socketIoConnectOpts?: any;

    /** Options to retry initial Socket.io connection in case of failure. */
    backOffOpts?: {
      initialDelay: number;
      maxDelay: number;
      maxAttempts: number;
      connectionTimeout: number;
    };
  }

}

Beispiel für die Instanziierung:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'Custom',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  },
  eventBasedConfig: {
    notifierServerEndpoint: 'https://my-notifier-server-endpoint.com',
    transport: 'websocket',
    library: 'SocketIo',
  }
});

Haftungsausschluss für Preise

Wenn Sie UI-Module verwenden, fallen Kosten für die zugrunde liegenden Dienste an, darunter: