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ânciaupdateCSSVariables()
. - 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:
-
Para incluir elementos na tela inicial, é possível definir HTML customizado usando a variável de tema
writeableElements.homeScreenAfterStartersElement
:instance.writeableElements.homeScreenAfterStartersElement.innerHTML = '<div class="MyCustomClass">This is my custom element</div>';
Exemplo: Para obter um exemplo de trabalho que mostra como incluir elementos customizados na tela inicial, consulte Elementos customizados da tela inicial para watsonx Assistant bate-papo da web.
-
Para alterar o estilo de tela inicial, use CSS helper classes.
-
- 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
parafalse
. Para abrir o chat web com base em alguma outra interação, use o método de instânciaopenWindow
.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çãohideCloseButton
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
.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.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 eventocustomResponse
, que é disparado cada vez que uma respostauser_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.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étodoupdateIdentityToken
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.