Visão geral do desenvolvimento de bate-papo na Web

Estilo e conteúdo do chat online

Personalização da aparência do chat na web: Se você quiser personalizar o estilo e a aparência do chat na web além das opções disponíveis na guia Estilo nas configurações do chat na web, pode fazê-lo escolhendo um tema diferente do Carbon Design.

Os temas compatíveis são temas de cores definidos pelo Carbon Design d IBM. Para definir o tema Carbon, use a opção carbonTheme de configuração.

Você também pode definir variáveis individuais dentro do tema para personalizar elementos específicos da interface do usuário. Por exemplo, o texto que é exibido na janela de bate-papo usa as fontes IBMPlexSans, Arial, Helvetica, sans-serif. Se você quiser usar uma fonte diferente, pode especificá-la usando o método updateCSSVariables() de instância.

Personalização da tela inicial: A tela inicial dá as boas-vindas ao cliente e, opcionalmente, exibe uma lista de sugestões para iniciar uma conversa. É possível customizar o estilo e o conteúdo da tela inicial:

• Para adicionar elementos à tela inicial, você pode definir HTML personalizado usando a variável writeableElements.homeScreenAfterStartersElement de tema:

        instance.writeableElements.homeScreenAfterStartersElement.innerHTML = 
          '<div class="MyCustomClass">This is my custom element</div>';

Exemplo: Para ver um exemplo prático que mostra como adicionar elementos personalizados à tela inicial, consulte Elementos personalizados da tela inicial para o chat na web do criador de assistentes de IA.

• Para alterar o estilo da tela inicial, use classes auxiliares CSS.

Personalização de textos: você pode personalizar os textos que definem os diversos rótulos e frases fixas exibidos pelo chat na web. Para personalizar strings, use o método updateLanguagePack() de instância para substituir strings no pacote de idiomas atual. Para mais informações, consulte a seção Idiomas.

Suporte a públicos globais: Por padrão, as mensagens exibidas pelo chat na web estão em inglês. Para mudar para um idioma diferente, use o método updateLanguagePack() de instância para substituir o pacote de idioma atual por um dos pacotes de idioma traduzidos disponíveis. Para obter mais informações, consulte Suporte a públicos globais no bate-papo na Web.

Abrir, fechar e atualizar a janela do chat online

Substituir o ícone padrão: Para uma melhor integração com o seu site, talvez seja interessante substituir o ícone padrão por um mecanismo diferente para abrir o chat online. Para ocultar o iniciador padrão, defina a opção showLauncher de configuração como false. Para abrir o chat na web com base em alguma outra interação, use o método openWindow de instância.

Tutorial: Para um tutorial que mostra como implementar um iniciador personalizado, consulte Usando um iniciador personalizado.

Manter o chat da web sempre aberto: Se você quiser manter o chat da web sempre aberto na sua página, use a openChatByDefault configuração “abrir” para exibir a página com a janela do chat aberta e a hideCloseButton opção para impedir que os clientes a fechem.

Alterar o tamanho ou a posição do chat online: O design do seu site pode exigir que você altere onde e como a janela do chat online é exibida no site. Por exemplo, você pode querer que ele apareça em uma posição diferente na página, em um tamanho diferente ou aninhado em outro elemento da página.

Para alterar o tamanho da janela do chat na web, você pode usar o método de instância ` updateCSSVariables( )` para modificar o estilo CSS.

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

Tutorial: Para um tutorial que mostra como exibir o chat na web em um elemento personalizado, consulte Tutorial: Personalizando o tamanho e a posição do chat na web.

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

Personalizando a conversa

Interceptação e modificação de mensagens: Ao assinar eventos, seu código pode interceptar mensagens enviadas e recebidas entre o cliente e o assistente, e até mesmo modificar seu conteúdo.

Inscreva-se no pre:receive evento se quiser interceptar a mensagem de um cliente antes que ela seja enviada ao assistente de IA. Por exemplo, talvez você queira remover informações de identificação pessoal do texto da mensagem ou adicionar variáveis de contexto ao payload da mensagem.

Inscreva-se no pre:send evento se quiser interceptar uma resposta recebida do assistente de IA antes que ela seja exibida ao cliente. Por exemplo, talvez você queira adicionar formatação, links ou outros elementos específicos do bate-papo na Web.

Tutorial: Para um tutorial que mostra como usar o pre:receive evento para interceptar e modificar mensagens recebidas, consulte Tutorial: implementação de botões de opção personalizados no chat da web.

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

Tutorial: Para um tutorial que mostra como renderizar um tipo de resposta personalizado em substituição à resposta padrão de opções, consulte Tutorial: implementação de botões de opção personalizados no chat da web.

Implementação da integração com um centro de atendimento: você pode usar um dos kits iniciais de chat na web para integrar-se a uma plataforma de centro de atendimento (service desk) diferente das integrações disponíveis no criador de assistentes de IA integrado. Implementações de referência totalmente funcionais estão disponíveis para várias plataformas de contact center; além disso, você pode usar um kit inicial para desenvolver uma integração personalizada com a plataforma de sua escolha.

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

Gerenciando dados

Gerenciamento de informações de identidade do usuário: O chat online associa um ID de usuário a cada mensagem enviada ao assistente de IA; esse ID de usuário é utilizado para fins de cobrança baseada no usuário e outros fins. Você pode permitir que o bate-papo na Web gere uma ID anônima para cada usuário ou pode controlar você mesmo a ID do usuário.

Dependendo de você ter ativado a segurança para o chat na web, é possível usar o método updateUserID de instância ou o updateIdentityToken método para especificar as 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 são usadas, consulte Gerenciamento de informações de identidade do usuário no bate-papo na Web.

Segurança e Administração

Proteção do chat na web: Para proteger o chat na web, você pode usar o JSON Web Token (JWT) para autenticar usuários e criptografar dados privados. Para obter mais informações, consulte Proteção do chat na web.

Como verificar a versão do chat online: O código do chat online hospedado em IBM Cloud é atualizado regularmente com melhorias e novos recursos. Por padrão, o script incorporado usa automaticamente a versão mais recente do bate-papo na Web. Para evitar alterações inesperadas que possam afetar seu site, talvez você queira controlar qual versão do bate-papo na Web seu site usa, dando-lhe a oportunidade de testar cada nova versão antes de implantá-la na produção, para evitar alterações inesperadas quando uma nova versão for lançada.

Para obter mais informações sobre o controle de versões do bate-papo na Web, consulte Controle da versão do bate-papo na Web.