IBM Cloud Docs
Visão geral do desenvolvimento de chat

Visão geral do desenvolvimento de chat

Se você estiver confortável com o código JavaScript, será possível customizar e estender o bate-papo da web usando a API de bate-papo da web Você também pode usar um WebView para embasar o chat web em seu aplicativo mobile.

Para obter informações de referência detalhadas sobre a API de bate-papo da web, consulte a documentação do desenvolvedor.

Para adicionar o widget de chat da web em seu website ou um WebView em seu app mobile, tudo o que você precisa fazer é embasar um elemento de script gerado em sua origem HTML (para obter mais informações sobre o script embed, consulte Embedding the web chat em sua página). Dentro deste script embutido, você pode usar a API de chat web para customizar ou estender o chat da web.

A API de chat web consiste em vários componentes:

  • Objeto de configuração: o script integrado define um objeto de configuração denominado watsonAssistantChatOptions, que especifica objetos de configuração para o widget de chat web. Ao editar o objeto de configuração, é possível customizar a aparência e o comportamento do chat web antes de ele ser renderizado. Para obter mais informações sobre as opções de configuração disponíveis, consulte Objeto de opções de configuração na referência da API da Web
  • Métodos de instância: os métodos da instância de chat web fornecem controle de baixo nível do widget de chat web. É possível usar os métodos de instância para implementar o comportamento customizado, como mudar a forma como o widget de chat web é aberto, mostrar e ocultar conteúdo e configurar informações de identidade. Para obter mais informações sobre os métodos de instância disponíveis, consulte Lista de métodos e propriedades na referência da API do bate-papo da web
  • Eventos: o sistema de eventos de chat web permite que o website responda a eventos de chat web (como abrir ou fechar a janela de chat web enviar ou receber mensagens). Ao assinar eventos, é possível implementar um comportamento customizado ou até mesmo interceptar e modificar conteúdo da mensagem. Para obter mais informações sobre o sistema de eventos, consulte Eventos na referência da API de bate-papo da web

Se você quiser usar a API de chat web para customizar sua implementação de chat web, você não tem que começar do zero. Os tutoriais estão disponíveis que mostram exemplos de customizações comuns de chat web. Para obter mais informações, consulte tutoriais de desenvolvimento de chat da Web.

Tarefas de desenvolvimento

É possível usar a API de bate-papo da web para customizar e estender o bate-papo da web das seguintes maneiras:

Estilo de bate-papo web e conteúdo
Abrindo, fechando e renderizando a janela de chat web
Customizando a conversa
Gerenciando dados
Segurança e Administração

Para obter mais exemplos de integrações de bate-papo da Web, consulte aqui

Estilo de bate-papo web e conteúdo

Personalizando a aparência do bate-papo da web

Se você desejar customizar o estilo e a aparência do bate-papo da web além das opções que estão disponíveis na guia Estilo nas configurações do bate-papo da web, poderá fazer isso escolhendo um tema diferente do Carbon Design

Os temas suportados são temas de cores definidos pelo IBM Carbon Design. Para configurar o tema de Carbono, use a opção de configuração carbonTheme

Também é possível configurar variáveis individuais dentro do tema para customizar elementos da IU específicos Por exemplo, o texto que é exibido na janela de bate-papo usa as fontes IBMPlexSans, Arial, Helvetica, sans-serif. Se desejar usar uma fonte diferente, será possível especificá-la usando o método da instância updateCSSVariables().

Como personalizar a tela inicial

A tela inicial cumprimenta o cliente e, opcionalmente, mostra uma lista de iniciadores de conversa sugeridos É possível customizar o estilo e o conteúdo da tela inicial:

Customizando strings

Você pode customizar as strings que definem os vários rótulos e frases codificadas exibidas pelo chat web. Para customizar strings, use o método de instância updateLanguagePack() para substituir strings no pacote de idiomas atual. Para obter mais informações, consulte Idiomas.

Dando suporte a públicos globais

Por padrão, as strings exibidas pelo chat web estão em inglês. Para mudar para um idioma diferente, use o método de instância updateLanguagePack() para substituir o pacote de idiomas atual por um dos pacotes de idiomas traduzidos disponíveis. Para obter mais informações, consulte Suportando audiências globais no bate-papo da web

Abrindo, fechando e renderizando a janela de chat web

Substituindo o launcher padrão

Para se integrar melhor ao seu website, você pode querer substituir o ícone do launcher integrado por um mecanismo diferente para abrir o chat da web. Para ocultar o launcher padrão, configure a opção de configuração showLauncher para false. Para abrir o chat web com base em alguma outra interação, use o método de instância openWindow.

ícone de desenvolvimento Tutorial: Para um tutorial que mostra como implementar um launcher personalizado, veja Usando um launcher personalizado.

Manter o chat web sempre aberto

Se você deseja manter o chat web sempre aberto em sua página, use a configuração openChatByDefault aberta para renderizar a página com a janela de chat aberta, e a opção hideCloseButton para evitar que os clientes fechá-lo.

Alterando o tamanho ou a posição do bate-papo da web

Seu design de website pode exigir que você mude onde e como a janela de chat da web rende em seu website. Por exemplo, você pode desejar que ele apareça em uma posição diferente na página, em um tamanho diferente ou aninhado em outro elemento na página.

Para alterar o tamanho da janela de bate-papo da web, é possível usar o método da instância updateCSSVariables() para modificar o estilo CSS.

Se você precisar alterar a posição da janela de bate-papo da web ou precisar alterar o tamanho além dos limites permitidos no CSS, poderá usar um elemento DOM customizado para conter a janela de bate-papo da web. Para isso, use a opção de configuração element.

ícone de desenvolvimento Tutorial: Para um tutorial que mostra como renderizar o bate-papo da web em um elemento customizado, consulte Tutorial: Customizando o tamanho e a posição do bate-papo da web.

Incluindo o bate-papo da web em seu aplicativo móvel

Você pode usar um WebView com uma ponte JavaScript para adicionar o chat web ao seu aplicativo móvel. Para obter mais informações, consulte Adicionando o chat web ao seu aplicativo móvel.

Customizando a conversa

Interceptando e modificando mensagens

Por assinando eventos, seu código pode interceptar mensagens que são enviadas e recebidas entre o cliente e o assistente, e até mesmo modificar seu conteúdo.

Inscreva-se no evento pre:receive se quiser interceptar uma mensagem do cliente antes de ser enviada para o assistente. Por exemplo, você pode desejar remover informações pessoalmente identificáveis do texto da mensagem ou adicionar variáveis de contexto na carga útil da mensagem.

Inscreva-se no evento pre:send se quiser interceptar uma resposta recebida do assistente antes que ela seja mostrada ao cliente. Por exemplo, você pode desejar adicionar formatação, links ou outros elementos que sejam específicos para o chat web.

ícone de desenvolvimento Tutorial: Para um tutorial mostrando como usar o evento pre:receive para interceptar e modificar mensagens recebidas, veja Tutorial: implementa botões de opção personalizados no chat web.

Renderizando tipos de resposta customizada

Se o seu assistente enviar respostas especializadas usando um tipo de resposta personalizado (user_defined), você pode implementar uma visualização personalizada para exibir essas respostas na janela de chat da web. Para isso, inscreva-se no evento customResponse, que é disparado cada vez que uma resposta user_defined é recebida. Em seu método de manipulador de eventos, você pode então ler o conteúdo da resposta e renderizar a saída usando seus próprios elementos.

ícone de desenvolvimento Tutorial: Para um tutorial mostrando como renderizar um tipo de resposta personalizado como um substituto para a resposta de opções padrão, consulte Tutorial: implementa botões de opção personalizados no chat web.

Como implementar uma integração de contact center

Você pode usar um dos kits iniciadores de chat web para se integrar com uma plataforma de contact center (service desk) diferente das disponíveis em como built-in watsonx Assistant integrações. As implementações de referência totalmente funcional estão disponíveis para várias plataformas de contact center; além disso, você pode usar um kit iniciante para desenvolver uma integração personalizada com a plataforma de sua escolha.

Para obter mais informações, consulte Adicionando suporte ao contact center.

Gerenciando dados

Gerenciando Informações de Identidade

O chat da web associa um ID de usuário a cada mensagem que envia para o assistente; este ID de usuário é usado para faturamento baseado em usuário e outros fins. Você pode permitir que o chat web gere um ID anônimo para cada usuário, ou você mesmo pode controlar o ID do usuário.

Dependendo se você ativou a segurança para o chat web, você pode usar o método de instância updateUserID ou o método updateIdentityToken para especificar informações de identidade do usuário.

Para obter mais informações sobre como as informações de identidade do usuário são especificadas e como elas são usadas, consulte Gerenciando informações de identidade do usuário no bate-papo da web.

Segurança e Administração

Protegendo o bate-papo da web

Para garantir o chat web, você pode usar o JSON Web Token (JWT) para autenticar usuários e criptografar dados privados. Para obter mais informações, consulte Securing the web chat.

Controlando a versão de chat web

O código de chat web hospedado por IBM Cloud é atualizado regularmente com melhorias e novos recursos. Por padrão, o script embed usa automaticamente a versão mais recente do web chat. Para evitar mudanças inesperadas que possam afetar o seu website, você pode querer controlar qual versão do web chat seu website usa, dando a você uma oportunidade de testar cada nova versão antes de implementar em production., a fim de evitar mudanças inesperadas quando uma nova versão for lançada.

Para obter mais informações sobre o versionamento de chat web, consulte Controlando a versão de chat web.