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'interface utilisateur prédéfinis et personnalisables que vous pouvez utiliser pour intégrer les fonctionnalités Agent Assist à votre interface utilisateur. Vous pouvez intégrer les modules dans n'importe quelle application Web pour afficher les suggestions 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

Vous trouverez ci-dessous les fonctionnalités d'Agent Assist que vous pouvez implémenter en tant que composants de module d'interface utilisateur.

Avant de commencer

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

Implémenter des modules d'interface utilisateur

Il existe deux approches principales pour intégrer les modules Agent Assist à votre UI. L'approche du conteneur géré intègre toutes les fonctionnalités Agent Assist sélectionnées dans un seul panneau. Vous pouvez également importer des éléments géographiques individuellement si vous souhaitez personnaliser leur configuration dans votre interface. La communication entre les composants de l'interface utilisateur et le bureau de l'agent est facilitée par un connecteur de module d'interface utilisateur. Toutes les communications se font via le traitement des événements personnalisés.

L'approche de conteneur et les composants individuels peuvent être utilisés avec n'importe quel système, mais Agent Assist ne fournit que des connecteurs de module d'interface utilisateur à utiliser avec Genesys Cloud, LivePerson, Twilio et Salesforce. Pour intégrer les modules d'interface utilisateur à un autre système d'agent, vous devez créer vos propres connecteurs. Pour en savoir plus, consultez la documentation sur le connecteur de module d'interface utilisateur personnalisé.

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>

Pour récupérer une version stable spécifique d'un fichier gstatic, spécifiez la version exacte:

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

Dernières versions:

      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

Conteneur géré

L'approche de conteneur géré intègre un seul composant qui affiche les fonctionnalités Agent Assist que vous avez choisies dans un seul panneau unifié. Ce panneau gérera également toutes les questions liées aux modules partagés, y compris les connecteurs de chargement et les messages d'erreur. Nous vous recommandons cette approche si vous intégrez les modules à un ordinateur de bureau d'agent tiers tel que LivePerson, ou si vous n'avez besoin que d'une personnalisation minimale de la façon dont les fonctionnalités Agent Assist 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 requise pour initialiser le conteneur, quel que soit le nombre de fonctionnalités Agent Assist 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 du composant.

Composants individuels

Vous pouvez intégrer les modules d'interface utilisateur Agent Assist individuellement au lieu de les regrouper dans un seul conteneur. Nous ne recommandons cette approche que si vous utilisez une application personnalisée dans laquelle les modules peuvent ê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'interface utilisateur spécifique à la fonctionnalité individuellement. Vous devez également importer et initialiser le connecteur du module d'interface utilisateur.

Implémenter le connecteur du module d'UI

Ajoutez le code suivant à votre application. Cela expose 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 la liste des systèmes de bureau de l'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. 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;
  }
}

Exemple d'instanciation:

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