Implémenter des modules et des connecteurs d'UI

Agent Assist fournit un ensemble de modules de composants d'UI prédéfinis et personnalisables que vous pouvez utiliser pour intégrer les fonctionnalités Agent Assist à votre UI. Vous pouvez intégrer les modules à n'importe quelle application Web pour afficher les suggestions d'Agent Assist à vos agents. Pour obtenir des instructions spécifiques sur l'intégration de modules dans LivePerson, consultez le tutoriel LivePerson.

Fonctionnalités d'Agent Assist

Voici les fonctionnalités d'Agent Assist que vous pouvez implémenter en tant que composants de module d'UI.

Avant de commencer

Avant de pouvoir implémenter des modules d'UI, configurez un profil de conversation.

Implémenter des modules d'UI

Il existe deux approches principales pour intégrer les modules Agent Assist à votre UI :

  • Conteneur (recommandé) : affiche toutes les fonctionnalités Agent Assist sélectionnées dans un seul panneau simplifié.
  • Composants individuels : vous permet d'importer des fonctionnalités spécifiques individuellement si vous souhaitez les placer dans différentes zones de votre bureau d'agent.

Vous pouvez également utiliser le conteneur et les composants individuels ensemble. Par exemple, vous pouvez implémenter le conteneur pour afficher toutes les fonctionnalités dans un panneau principal, tout en plaçant un module de réponses intelligentes autonome ailleurs, par exemple directement sous l'affichage du chat de l'agent.

Les deux approches peuvent être utilisées avec n'importe quel système, mais Agent Assist ne fournit que des intégrations de modules d'UI Open Source pour Genesys Cloud, LivePerson, Twilio et Salesforce. Pour intégrer des modules d'UI à un autre système d'agent, vous devez créer votre propre intégration. Utilisez l'approche des conteneurs V2 pour la plupart des fonctionnalités. Vous pouvez également implémenter des composants individuels, tels que la réponse suggérée, si vous avez de l'espace.

La communication entre les composants de l'UI et l'agent desktop est facilitée par un connecteur de module d'UI. Toutes les communications avec le client ont lieu par le biais de l'envoi d'événements personnalisés.

Versions de fichier

Récupérez la dernière version d'un fichier gstatic en spécifiant la dernière version :

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

Récupérez une version stable spécifique d'un fichier gstatic en spécifiant la version exacte :

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

Dernières versions : 

      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

Conteneur

Le conteneur est un composant unique qui affiche les fonctionnalités d'Assistance de l'agent que vous avez choisies dans un panneau réactif et unifié. Nous vous recommandons d'utiliser Conteneur V2 pour presque toutes les intégrations.

Initialisez le composant de conteneur :

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

Nom de la balise de l'élément :

    <agent-assist-ui-modules-v2>

Exemple d'initialisation :

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

Pour en savoir plus, consultez la page de documentation de l'API Container v2.

Conteneur V1 (ancienne version)

Le conteneur V1 est compatible, mais considéré comme obsolète. Contrairement à la V2, la V1 intègre le connecteur de module d'UI en interne.

Initialisez le composant Container V1 :

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

Nom de la balise de l'élément :

    <agent-assist-ui-modules>

Pour en savoir plus, consultez la page de documentation de l'API Container V1.

Composants individuels

Vous pouvez intégrer certaines fonctionnalités d'Agent Assist individuellement au lieu d'utiliser un seul conteneur. Nous ne recommandons cette approche que si vous utilisez une application personnalisée dans laquelle les modules doivent être affichés dans différentes sections de la page ou si vous avez besoin d'une personnalisation importante. Par exemple, vous pouvez placer un module de réponses suggérées directement sous l'affichage du chat.

Dans ce cas, vous devez importer individuellement le module d'UI spécifique à la fonctionnalité sélectionnée. De plus, vous devez importer et initialiser le connecteur du module d'UI.

Implémenter le connecteur du module d'UI

Sauf si vous utilisez la version 1 du conteneur, vous devez implémenter le connecteur de module d'UI pour utiliser les modules d'UI. Ajoutez le code suivant à votre application pour exposer une classe UiModulesConnector globale qui peut ensuite être instanciée et initialisée :

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

Méthodes :

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

Vous trouverez ci-dessous l'interface TypeScript pour l'objet de configuration du connecteur. Si vous avez créé un connecteur de module d'interface utilisateur personnalisé à utiliser avec un système non compatible, définissez agentDesktop sur Custom. L'exemple suivant fournit une liste des systèmes de bureau d'agent compatibles.

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;
    };
  }

}

Exemple d'instanciation :

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',
  }
});

Avis de non-responsabilité concernant les prix

Si vous utilisez des modules d'UI, des frais sont associés aux services sous-jacents, y compris les suivants :