Cette page a été traduite par l'API Cloud Translation.

Implémenter des modules et des connecteurs d'interface utilisateur

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'Assistance de l'agent 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. L'approche conteneur géré intègre toutes les fonctionnalités d'Assistance de l'agent que vous avez sélectionnées dans un seul panneau. Vous pouvez également importer des caractéristiques individuellement si vous souhaitez personnaliser leur configuration dans votre interface. 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 se font par l'envoi d'événements personnalisés.

L'approche par conteneur et les composants individuels peuvent être utilisés avec n'importe quel système, mais Agent Assist ne fournit des connecteurs de modules d'UI que pour Genesys Cloud, LivePerson, Twilio et Salesforce. Pour intégrer des modules d'UI à un autre système d'agent, vous devez créer vos propres connecteurs. 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.

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

Dernières versions :

      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

Conteneur géré

L'approche de conteneur géré intègre un seul composant qui affiche les fonctionnalités d'Assistance pour les agents de votre choix dans un panneau unifié. Ce panneau gérera également tous les problèmes liés aux modules partagés, y compris le chargement des connecteurs et les messages d'erreur. Nous vous recommandons cette approche si vous intégrez les modules à un bureau d'agent tiers tel que LivePerson, ou si vous avez besoin d'une personnalisation minimale, voire nulle, de la façon dont les fonctionnalités d'Assistance de l'agent sont affichées dans votre UI.

Une fois le composant de conteneur initialisé, il charge toutes les dépendances nécessaires. Une seule importation est nécessaire pour initialiser le conteneur, quel que soit le nombre de fonctionnalités d'Assistance de l'agent utilisées.

Initialisez le composant de conteneur :

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

Nom du tag de l'élément :

    <agent-assist-ui-modules>

Exemple d'initialisation :

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

Pour en savoir plus, consultez la page de documentation de l'API des composants.

Composants individuels

Vous pouvez choisir d'intégrer les modules d'UI Agent Assist individuellement plutôt que dans un seul conteneur. Nous ne recommandons cette approche que si vous utilisez une application personnalisée dans laquelle les modules peuvent avoir besoin d'être affichés dans différentes sections de la page ou si vous avez besoin d'une personnalisation importante.

Dans ce cas, vous devez importer chaque module d'UI spécifique à une fonctionnalité individuellement. De plus, vous devrez 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;

Voici un exemple de l'interface TypeScript complète 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';

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

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

Clause 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 :