Container

Questa pagina contiene la documentazione dell'API per il metodo Container di implementazione dei moduli dell'interfaccia utente. Di seguito sono riportate le funzionalità di Agent Assist che puoi implementare come componenti all'interno del contenitore.

Utilizzo

Importa il modulo nella pagina HTML utilizzando il seguente codice:

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

Incorpora il modulo utilizzando il seguente tag:

<agent-assist-ui-modules>

Attributi

Nome proprietà Tipo Commento
funzionalità string Elenco separato da virgole delle chiavi delle funzionalità di suggerimento di Agent Assist da visualizzare. Esempio: "SMART_REPLY, CONVERSATION_SUMMARIZATION"
api-headers string Intestazioni aggiuntive da includere nelle chiamate all'API Dialogflow. Esempio: "Content-Type:application/json, Accept:application/json"
conversation-profile string Nome del profilo di conversazione da utilizzare.
agent-desktop AgentDesktop Software desktop dell'agente con cui eseguire l'integrazione.
auth-token string Token di autenticazione da utilizzare per le chiamate API.
api-key string Chiave API facoltativa da utilizzare per le chiamate API.
canale CommunicationChannel Canale di comunicazione utilizzato per questa applicazione (chat, vocale o omnicanale).
custom-api-endpoint string Endpoint API personalizzato facoltativo da utilizzare (se i moduli dell'interfaccia utente sono configurati con un server proxy).
tema 'dark' | 'light' Il tema a colori da utilizzare.
show-header BooleanString Indica se mostrare l'intestazione dei suggerimenti di Agent Assist.
dark-mode-background string Il colore di sfondo da utilizzare per la modalità scura. Se non viene specificato nessuno, vengono forniti i valori predefiniti per i computer dell'agente supportato principale.
notifier-server-endpoint string Endpoint del server di notifica da utilizzare per le conversazioni basate sugli eventi.
event-based-transport EventBasedTransport Protocollo di trasporto da utilizzare per le conversazioni basate su eventi.
event-based-library EventBasedLibrary Libreria da utilizzare per le conversazioni basate su eventi.
oauth-client-id string ID client OAuth facoltativo per l'autenticazione implicita, utilizzato in alcune configurazioni dei computer degli agenti (Genesys Cloud).
redirect-uri string URI di reindirizzamento facoltativo a cui passare dopo l'autenticazione, utilizzato in alcune configurazioni desktop dell'agente (Genesys Cloud).
genesys-cloud-region string Regione facoltativa per Genesys Cloud, il valore predefinito è mypurecloud.com.

Utilizzo

Gli attributi sono proprietà dei componenti basate su stringhe che possono essere impostate nei seguenti modi:

Direttamente dal modello HTML:

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

Dal codice JavaScript:

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

Input

Nome proprietà Tipo Commento
socketIoConnectOpts SocketIoConnectOpts Ulteriori opzioni di connessione Socket.io.
config UiModuleContainerConfig Oggetto di configurazione per definire configurazioni specifiche per modulo.

Utilizzo

In genere, gli input sono oggetti JavaScript o altri tipi di proprietà complesse che devono essere assegnati direttamente all'istanza dell'elemento:

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

Tipi

Consulta la sezione seguente per i tipi personalizzati utilizzati dal componente.

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