Implementar módulos e conectores de UI

O Agent Assist oferece um conjunto de módulos de componentes UI pré-criados e personalizáveis que você pode usar para integrar recursos do Agent Assist à sua UI. É possível incorporar os módulos em qualquer aplicativo da Web para mostrar sugestões do Assistente 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 Agent Assist que podem ser implementados como componentes de módulo UI.

Antes de começar

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

Implementar módulos de interface

Escolha os módulos da interface com base nos recursos do Agent Assist que você usa:

Recursos Exemplos de módulos de interface
Agente Companion, resumo de conversas Agente complementar, Transcrição
Coach de IA, Assistente de Conhecimento generativo (proativo), Resposta inteligente, resumo de conversas Contêiner V2, Resposta inteligente, Transcrição

Todos os módulos de interface podem ser usados com qualquer plataforma de área de trabalho do agente, mas o Agent Assist só oferece integrações de módulos de interface de código aberto para Genesys Cloud, LivePerson, Twilio e Salesforce. Para integrar módulos de UI a qualquer outra plataforma de área de trabalho do agente, crie sua própria integração.

O conector do módulo de interface facilita a comunicação entre os componentes da UI, a área de trabalho do agente e o back-end do Agent Assist. Toda a comunicação do cliente ocorre pelo envio de eventos personalizados.

Agente complementar

O agente acompanhante é um único componente que incorpora um agente acompanhante interativo na sua área de trabalho do agente. O recurso de agente complementar substitui a maioria dos outros recursos do Agent Assist, mas o módulo de UI inclui alguns recursos complementares, como o resumo de conversas. Por isso, não é necessário usar o contêiner com o módulo de UI do agente complementar.

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

Contêiner de recursos

O contêiner é um único componente que renderiza os recursos escolhidos do Agent Assist em um painel unificado e reativo. Use o contêiner se você usa o coach de IA, a assistência de conhecimento generativo (proativa), a Resposta Inteligente ou o resumo de conversas.

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

Componentes individuais

É possível integrar alguns recursos do Agent Assist individualmente, junto com o agente complementar ou o contêiner. Se a área de trabalho do seu agente processar conversas por voz, normalmente você adicionará o componente de transcrição. Só recomendamos outros componentes individuais se você usar um aplicativo personalizado em que os módulos precisam ser renderizados em diferentes seções da página ou se precisar de uma personalização significativa. Por exemplo, você pode colocar um módulo de Resposta inteligente diretamente abaixo da tela de chat.

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

Versões de arquivos

Para recuperar a versão mais recente de um arquivo gstatic, especifique a versão mais recente:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/companion_agent.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.1/companion_agent.js"></script>

Versões mais recentes: 

      Container: v1.16 // Legacy
      Container: v2.7
      Common: v1.17
      Companion agent: v1.1
      Generative knowledge assist: v2.10
      Smart reply: v1.4
      Summarization: v1.3
      Transcript: v1.4
      Genesys Cloud: v1.1

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 seguinte código 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;

A seguir, descrevemos a interface do TypeScript 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 mostra 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';

  /** Optional desktop source for metric tracking. */
  agentDesktopSource?: string;

  /** 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. Required for voice/omnichannel conversations and some features of chat conversations. */
  eventBasedConfig?: {
    /** Transport protocol to use for updates. Defaults to 'websocket'. */
    transport?: string;

    /** Event-based library to use. */
    library?: 'SocketIo';

    /** Endpoint to which the connection will be established. */
    notifierServerEndpoint: string;

    /** Additional Socket.io connect options. */
    socketIoConnectOpts?: any;

    /** Options to retry initial Socket.io connection in case of failure. */
    backOffOpts?: {
      initialDelay: number;
      maxDelay: number;
      maxAttempts: number;
      connectionTimeout: number;
    };
  }

}

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',
  },
  eventBasedConfig: {
    notifierServerEndpoint: 'https://my-notifier-server-endpoint.com',
    transport: 'websocket',
    library: 'SocketIo',
  }
});

Exoneração de responsabilidade sobre preços

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