Diese Seite wurde von der Cloud Translation API übersetzt.

UI-Module und Connectors implementieren

Agent Assist bietet eine Reihe vorgefertigter, anpassbarer UI-Komponentenmodule, mit denen Sie Agent Assist-Funktionen in Ihre UI einbinden können. Sie können die Module in jede Webanwendung einbetten, um Agent Assist-Vorschläge für Ihre Kundenservicemitarbeiter anzuzeigen. Eine genaue Anleitung zum Einbinden von Modulen in LivePerson finden Sie im LivePerson-Tutorial.

Agent Assist-Funktionen

Im Folgenden finden Sie die Agent Assist-Funktionen, 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 primäre Ansätze für die Integration von Agent Assist-Modulen in Ihre Benutzeroberfläche. Beim Ansatz mit verwalteten Containern werden alle ausgewählten Agent Assist-Funktionen in einem einzigen Bereich zusammengefasst. Alternativ können Sie Funktionen einzeln importieren, wenn Sie ihre Konfiguration in Ihrer Benutzeroberfläche anpassen möchten. Die Kommunikation zwischen den UI-Komponenten und dem Kundenservicemitarbeiter-Desktop wird durch einen UI-Modul-Connector ermöglicht. Die gesamte Kommunikation erfolgt durch 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 UI-Module in ein anderes Agentsystem einbinden möchten, müssen Sie eigene Connectors erstellen. Verwenden Sie für die meisten Funktionen den Container V2-Ansatz. Sie können auch einzelne Komponenten wie „Intelligente Antwort“ implementieren, wenn Sie Platz haben.

Dateiversionen

So rufen Sie die neueste Version einer gstatic-Datei ab:

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

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

Neueste Versionen:

      Container: v1.12
      Container: v2.0
      Common: v1.6
      Knowledge assist: v1.1
      Generative knowledge assist: v2.9
      Smart reply: v1.4
      Summarization: v1.3
      Transcript: v1.3

Verwalteter Container

Beim Ansatz mit verwalteten Containern wird eine einzelne Komponente eingebunden, die die ausgewählten Agent Assist-Funktionen in einem einheitlichen Bereich rendert. In diesem Bereich werden auch alle Probleme mit freigegebenen Modulen behandelt, einschließlich des Ladens von Connectors und aller Fehlermeldungen. Wir empfehlen diesen Ansatz, wenn Sie die Module in einen Drittanbieter-Agent-Desktop wie LivePerson einbinden oder wenn Sie nur minimale oder gar keine Anpassung der Darstellung der Agent Assist-Funktionen in Ihrer Benutzeroberfläche benötigen.

Nachdem die Containerkomponente initialisiert wurde, werden alle erforderlichen Abhängigkeiten geladen. Zum Initialisieren 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>

Element-Tag-Name:

    <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 API-Dokumentationsseite für Komponenten.

Einzelne Komponenten

Sie haben die Möglichkeit, Agent Assist-UI-Module einzeln anstatt in einem einzelnen Container einzubinden. 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 umfangreiche Anpassungen benötigen.

In diesem Fall müssen Sie jedes funktionsspezifische UI-Modul einzeln importieren. Außerdem müssen Sie den Connector für das UI-Modul 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 nutzen zu können. 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;

Das Folgende ist ein Beispiel für die vollständige TypeScript-Schnittstelle für das Konfigurationsobjekt des Connectors. Wenn Sie einen Connector für ein benutzerdefiniertes UI-Modul für ein nicht unterstütztes System erstellt haben, setzen Sie agentDesktop auf Custom. Das folgende Beispiel enthält 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';

  /** 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. This is required for voice conversations and some features of chat conversations. Always set it. */
  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 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',
  }
});

Haftungsausschluss für Preise

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