Conteneur

Cette page contient la documentation de l'API pour la méthode Container d'implémentation des modules d'interface utilisateur. Vous trouverez ci-dessous les fonctionnalités Agent Assist que vous pouvez implémenter en tant que composants dans votre conteneur.

Utilisation

Importez le module dans votre page HTML à l'aide du code suivant:

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

Intégrez le module à l'aide de la balise suivante:

<agent-assist-ui-modules>

Attributs

Nom de propriété Type Commentaire
fonctionnalités chaîne Liste des clés de fonctionnalités de suggestions Agent Assist à afficher, séparées par une virgule. Exemple: "SMART_REPLY, CONVERSATION_SUMMARIZATION"
api-headers chaîne En-têtes supplémentaires à inclure dans les appels d'API Dialogflow. Exemple: "Content-Type:application/json, Accept:application/json"
conversation-profile chaîne Nom du profil de conversation à utiliser.
agent-desktop AgentDesktop Logiciel de bureau de l'agent à intégrer.
auth-token chaîne Jeton d'authentification à utiliser pour les appels d'API.
api-key chaîne Clé API facultative à utiliser pour les appels d'API.
channel CommunicationChannel Canal de communication utilisé pour cette application (chat, voix ou omnicanal).
custom-api-endpoint chaîne Point de terminaison d'API personnalisé facultatif à utiliser (si les modules d'interface utilisateur sont configurés avec un serveur proxy).
thème "dark" | "light" Thème de couleur à utiliser.
show-header BooleanString Indique si l'en-tête des suggestions de l'Assistant d'agent doit s'afficher.
dark-mode-background chaîne Couleur d'arrière-plan à utiliser pour le mode sombre. Si aucun n'est spécifié, des valeurs par défaut sont fournies pour les ordinateurs de bureau principaux des agents compatibles.
notifier-server-endpoint chaîne Point de terminaison du serveur de notification à utiliser pour les conversations basées sur des événements.
event-based-transport EventBasedTransport Protocole de transport à utiliser pour les conversations basées sur des événements.
event-based-library EventBasedLibrary Bibliothèque à utiliser pour les conversations basées sur des événements.
oauth-client-id chaîne ID client OAuth facultatif pour l'authentification implicite, utilisé dans certaines configurations de bureau d'agent (Genesys Cloud).
redirect-uri chaîne URI de redirection facultatif vers lequel accéder après l'authentification, utilisé dans certaines configurations de bureau d'agent (Genesys Cloud).
genesys-cloud-region chaîne Région facultative pour Genesys Cloud. La valeur par défaut est mypurecloud.com.

Utilisation

Les attributs sont des propriétés de composant basées sur des chaînes qui peuvent être définies comme suit:

Directement depuis votre modèle HTML:

<element-selector property-name="value">

Dans votre code JavaScript:

var el = document.querySelector('element-selector');
el.setAttribute('property-name', 'value');

Entrées

Nom de propriété Type Commentaire
socketIoConnectOpts SocketIoConnectOpts Autres options de connexion Socket.io
config UiModuleContainerConfig Objet de configuration permettant de définir des configurations spécifiques au module.

Utilisation

Les entrées sont généralement des objets JavaScript ou d'autres types de propriétés complexes qui doivent être attribués directement à l'instance de l'élément:

const el = document.querySelector('element-selector');
el.propertyName = value;

Types

Consultez la section suivante pour connaître les types personnalisés utilisés par le composant.

AgentDesktop

"LivePerson" | "GenesysCloud" | "SalesForce" | "Custom"

CommunicationChannel

"chat" | "voice" | "omnichannel"

BooleanString

"true" | "false"

EventBasedTransport

"websocket" | "polling"

EventBasedLibrary

"SocketIo"

SocketIoConnectOpts

interface SocketIoConnectOpts extends SocketIOClient.ConnectOpts {
  auth: {
    token: string;
  };
  withCredentials?: boolean;
}

UiModuleContainerConfig

interface UiModuleContainerConfig {
  knowledgeAssistConfig?: {
    articleLinkConfig: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
  };
  knowledgeAssistV2Config?: {
    articleLinkConfig?: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
    showCopyAnswer: boolean;
    showPasteAnswer: boolean;
  };
  summarizationConfig?: {
    /**
     * Optional callback that can be used to save the generated summary to an
     * external source.
     */
    onSaveSummary?: (
      summary: {
        summary: string;
        conversationDetails: ConversationDetails;
      },
      saveCallbacks: {
        setLoading: () => void;
        setSuccess: (message: string) => void;
        setError: (message: string) => void;
      }
    ) => void;

    /** Whether to show the 'Generate summary' button. */
    showGenerateSummaryButton?: "true" | "false";
  };
}