Esta página foi traduzida pela API Cloud Translation.

Implementar módulos e conectores da interface

O Assistente de agente oferece um conjunto de módulos de componentes UI pré-criados e personalizáveis que você pode usar para integrar recursos do Assistente de agente à sua UI. É possível incorporar os módulos em qualquer aplicativo da Web para mostrar sugestões da Assistência do agente aos seus agentes. Para instruções específicas sobre como integrar módulos ao LivePerson, consulte o tutorial do LivePerson.

Recursos do Agent Assist

Confira a seguir os recursos do Assistente de agente que podem ser implementados como componentes de módulo da UI.

Antes de começar

Antes de implementar módulos UI, configure um perfil de conversa.

Implementar módulos de UI

Há duas abordagens principais para integrar módulos do Assistente do agente à sua UI. A abordagem de contêiner gerenciado integra todos os recursos selecionados do Assistente de IA em um único painel. Também é possível importar recursos individualmente se quiser personalizar a configuração deles na interface. A comunicação entre os componentes da UI e a área de trabalho do agente é facilitada por um conector de módulo de interface. Toda a comunicação acontece por meio do envio de eventos personalizados.

A abordagem de contêiner e os componentes individuais podem ser usados com qualquer sistema, mas o Assistente de IA só fornece conectores de módulo de interface para uso com Genesys Cloud, LivePerson, Twilio e Salesforce. Para integrar módulos UI com qualquer outro sistema de agente, crie seus próprios conectores. Use a abordagem de contêiner V2 para a maioria dos recursos. Você também pode implementar componentes individuais, como a Resposta inteligente, se tiver espaço.

Versões de arquivos

Recupere a versão mais recente de um arquivo gstatic especificando a versão mais recente:

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

Recupere uma versão estável específica de um arquivo gstatic especificando a versão exata:

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

Versões mais recentes:

      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

Contêiner gerenciado

A abordagem de contêiner gerenciado integra um único componente que renderiza os recursos escolhidos do Assistente de IA em um painel unificado. Esse painel também vai processar todas as questões relacionadas ao módulo compartilhado, incluindo o carregamento de conectores e mensagens de erro. Recomendamos essa abordagem se você estiver integrando os módulos a uma área de trabalho do agente de terceiros, como a LivePerson, ou se precisar de pouca ou nenhuma personalização de como os recursos do Assistente de agente são renderizados na sua UI.

Depois que o componente de contêiner é inicializado, ele carrega todas as dependências necessárias. Basta uma única importação para inicializar o contêiner, não importa quantos recursos do Assistente do agente sejam usados.

Inicialize o componente de contêiner:

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

Nome da tag do elemento:

    <agent-assist-ui-modules>

Exemplo de inicialização:

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

Para mais detalhes, consulte a página de documentação da API de componentes.

Componentes individuais

Você pode integrar os módulos da interface da Assistente de IA individualmente, em vez de em um único contêiner. Recomendamos essa abordagem apenas se você usar um aplicativo personalizado em que os módulos precisem ser renderizados em diferentes seções da página ou se você precisar de uma personalização significativa.

Nesse caso, é necessário importar cada módulo de interface específico do recurso individualmente. Além disso, você precisa importar e inicializar o conector do módulo de UI.

Implementar o conector do módulo de UI

A menos que você esteja usando a versão 1 do contêiner, é necessário implementar o conector do módulo de UI para usar módulos de UI. Adicione o código a seguir ao aplicativo para expor uma classe UiModulesConnector global que pode ser instanciada e inicializada:

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

Métodos:

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

Confira a seguir um exemplo da interface TypeScript completa para o objeto de configuração do conector. Se você criou um conector de módulo UI personalizada para usar com um sistema sem suporte, defina agentDesktop como Custom. O exemplo a seguir fornece uma lista de sistemas de área de trabalho do agente compatíveis.

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

Exemplo de instanciação:

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

Exoneração de responsabilidade sobre preços

Se você usa módulos UI, há um custo associado aos serviços subjacentes, incluindo: