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 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 de agente à sua UI:

  • Contêiner (recomendado): renderiza todos os recursos selecionados do Agent Assist em um único painel simplificado.
  • Componentes individuais: permite importar recursos específicos individualmente se você quiser colocá-los em diferentes áreas na área de trabalho do agente.

Também é possível usar o contêiner e os componentes individuais juntos. Por exemplo, é possível implementar o contêiner para mostrar todos os recursos em um painel principal e colocar um módulo de Respostas rápidas independente em outro lugar, como diretamente abaixo da tela de chat da área de trabalho do agente.

As duas abordagens podem ser usadas com qualquer sistema, mas o Assistente do agente 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 outro sistema de agente, crie sua própria integração. 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.

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 do cliente ocorre pelo envio de eventos personalizados.

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/v2/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/v2.7/container.js"></script>

Versões mais recentes: 

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

Contêiner

O contêiner é um único componente que renderiza os recursos escolhidos do Agent Assist em um painel unificado e responsivo. Recomendamos usar o Container V2 para quase todas as integrações.

Inicialize o componente de contêiner:

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

Nome da tag do elemento:

    <agent-assist-ui-modules-v2>

Exemplo de inicialização:

    const uiModulesEl = document.createElement('agent-assist-ui-modules-v2');
    uiModulesEl.setAttribute('use-configured-features', 'true');
    hostElement.appendChild(uiModulesEl);

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

Contêiner V1 (legado)

O contêiner V1 é compatível, mas considerado legado. Ao contrário da V2, a V1 incorpora o conector do módulo de UI internamente.

Inicialize o componente Container V1:

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

Nome da tag do elemento:

    <agent-assist-ui-modules>

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

Componentes individuais

É possível integrar alguns recursos do Agent Assist individualmente, em vez de usar um único contêiner. Recomendamos essa abordagem apenas 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, é necessário 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.

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;

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

  /** 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: