Visão geral do Webchat

  • Artigo

APLICA-SE A: SDK v4

Este artigo contém detalhes do componente de Webchat do Bot Framework. O componente de Webchat do Bot Framework é um cliente baseado na Web altamente personalizável para o SDK do Bot Framework V4. O SDK do Bot Framework v4 permite aos desenvolvedores modelar a conversa e criar aplicativos de bot sofisticados.

Se você estiver buscando migrar do Webchat v3 para v4, vá diretamente para a seção de migração.

Introdução ao Web Chat

Observação

Para versões anteriores do Webchat (v3), visite o branch do Webchat v3.

Primeiro, crie um bot usando o Serviço de Bot de IA do Azure. Depois que o bot for criado, você precisará obter o segredo do Chat da Web do bot no portal do Azure. Em seguida, use o segredo para gerar um token e passá-lo para seu Webchat.

O exemplo a seguir mostra como adicionar um controle de Web Chat a um site.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>

         // Set style options.
         const styleOptions = {
            botAvatarInitials: 'BF',
            userAvatarInitials: 'WC'
         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID',
               username: 'Web Chat User',
               locale: 'en-US',
               styleOptions
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

userID, username, locale, botAvatarInitials e userAvatarInitials são todos parâmetros opcionais para passar ao método renderWebChat. Para obter mais informações sobre estilo, consulte Por que styleOptions?. Para saber mais sobre as propriedades do Web Chat, consulte a seção Referência da API do Web Chat.

Além disso, se o bot for um bot regional (o que significa que o recurso do bot está em uma região diferente de "global"), você deverá especificar a URL da linha direta regional definindo-a em um campo adicional domain no window.WebChat.createDirectLine() método. Especifique o domínio como europe.webchat.botframework.com, ou india.webchat.botframework.com, unitedstates.webchat.botframework.com o que for apropriado para a região escolhida. Leia Responder ao apelo da Europa: Armazenar e processar dados da UE na UE para obter informações sobre a residência de dados.

Integrar com o JavaScript

O Webchat é projetado para integrar-se ao seu site existente usando JavaScript ou React. A integração com JavaScript lhe dará algum estilo e personalização, para obter mais informações, consulte Integrar o Web Chat ao seu site.

Você pode usar o pacote completo e típico botframework-webchat que contém os recursos mais usados.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID'
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

Consulte o exemplo de funcionamento do pacote completo do Webchat.

Integrar ao React

Para personalização completa, você pode usar o React para recompor componentes do Webchat.

Para instalar o build de produção do npm, execute npm install botframework-webchat.

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } userID='YOUR_USER_ID' />
      element
    );
  }
}

Você também pode executar npm install botframework-webchat@master para instalar um build de desenvolvimento que esteja sincronizado com o branch master do GitHub do Webchat.

Veja um exemplo funcional do Webchat renderizado por meio do React.

Dica

Se você é novo no React e no jsx, pode encontrar treinamento na página Introdução ao Reacts.

Personalizar a interface do usuário do Webchat

O Webchat é projetado para ser personalizável sem criação de fork do código-fonte. A tabela abaixo descreve que tipo de personalizações você pode obter ao importar o Web Chat de maneiras diferentes. Essa lista não é completa.

Personalização Pacote CDN React
Alterar cores ✔️ ✔️
Alterar tamanhos ✔️ ✔️
Atualizar/substituir estilos CSS ✔️ ✔️
Escutar eventos ✔️ ✔️
Interagir com a página da Web de hospedagem ✔️ ✔️
Atividades de renderização personalizadas ✔️
Anexos de renderização personalizados ✔️
Adicionar novos componentes de interface do usuário ✔️
Recompor toda a interface do usuário ✔️

Veja mais sobre personalização de Webchat para saber mais a esse respeito.

Observação

Para obter informações sobre CDNs (Redes de Distribuição de Conteúdo), consulte CDNs (Redes de Distribuição de Conteúdo)

Migração de Webchat v3 para v4

Há três caminhos possíveis para a migração de v3 para v4. Compare seu cenário inicial com o listado abaixo.

  • Para atualizar um controle de Web Chat incorporado em um <iframe>, consulte a documentação no repositório Web Chat para o pacote de incorporação.
  • Para atualizar um controle de Web Chat que usa pouca ou nenhuma personalização, examine o exemplo de Web Chat 00.migration/a.v3-to-v4 , que descreve o processo.
  • Para atualizar uma versão bifurcada de um Web Chat altamente personalizado, consulte as diretrizes de migração do Web Chat.

Referência da API do Webchat

Há várias propriedades que você pode passar para seu componente React do Webchat (<ReactWebChat>) ou o método renderWebChat(). Para obter uma breve descrição das propriedades disponíveis, consulte Referência da API do Web Chat. Além disso, sinta-se livre para examinar o código-fonte começando com packages/component/src/Composer.js.

Compatibilidade de navegador

O Webchat é compatível com as duas versões mais recentes dos navegadores modernos, como Chrome, Edge e Firefox. Se você precisar do Web Chat no Internet Explorer 11, consulte o pacote e a demonstração do ES5.

  • O Web Chat não suporta o Internet Explorer anterior à versão 11
  • Não há suporte para personalização, conforme mostrado em exemplos não ES5, no Internet Explorer. Como o IE11 é um navegador não moderno, ele não suporta ES6, e muitos exemplos que usam funções de seta e promessas modernas precisariam ser convertidos manualmente para ES5. Se você precisar de personalização pesada para seu aplicativo, é altamente recomendável desenvolver seu aplicativo para um navegador moderno, como o Google Chrome ou o Edge.
  • O Webchat não tem nenhum plano de dar suporte a exemplos no IE11 (ES5).
  • Para clientes que desejam reescrever manualmente nossos outros exemplos para trabalhar no IE11, é recomendável estudar a conversão de código do ES6 + para ES5 usando polyfills e transpilers como babel.

Como testar as últimas novidades do Webchat

O teste de recursos não liberados só está disponível atualmente por meio de empacotamento MyGet.

Se você quiser testar um recurso ou correção de bug que ainda não foi lançado, você vai querer apontar seu pacote de bate-papo da Web para o feed diário do Web Chat, em vez do feed oficial do npmjs.

No momento, você pode acessar as novidades diárias do Webchat assinando nosso feed do MyGet. Para fazer isso, você precisará atualizar o registro em seu projeto. Essa alteração é reversível e nossas instruções incluem como reverter para voltar a assinar a versão oficial.

Assinar as últimas novidades no myget.org

Para fazer isso, você pode adicionar seus pacotes e, em seguida, alterar o registro do seu projeto.

  1. Adicione suas dependências de projeto que não sejam de Webchat.
  2. No diretório de raiz do seu projeto, crie um arquivo .npmrc
  3. Adicione a seguinte linha ao seu arquivo: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Adicione o Webchat a suas dependências de projeto npm i botframework-webchat --save
  5. Em seu package-lock.json, os registros apontados agora são MyGet. O projeto de Webchat tem proxy de origem upstream habilitado, o que redirecionará os pacotes não MyGet para npmjs.com.

Inscreva-se novamente para o lançamento oficial em npmjs.com

A reinscrição requer que você redefina o registro.

  1. Excluir seu .npmrc file
  2. Exclua o package-lock.json raiz
  3. Remova o diretório node_modules
  4. Reinstale os pacotes com npm i
  5. No seu package-lock.json, os registros estão apontando novamente https://npmjs.com/ .

Participante

Consulte nossa Página de contribuição para obter detalhes sobre como criar o projeto e nossas diretrizes de repositório para solicitações de pull.

Este projeto adotou o Código de Conduta de Software Livre da Microsoft. Para obter mais informações, confira as Perguntas frequentes sobre o código de conduta ou entre em contato com opencode@microsoft.com para enviar outras perguntas ou comentários.

Relatar problemas de segurança

Bugs e problemas de segurança devem ser relatados em particular, por email, para o MSRC (Microsoft Security Response Center) em secure@microsoft.com. Você deverá receber uma resposta em até 24 horas. Se, por algum motivo, você não o fizer, faça o acompanhamento por e-mail para garantir que recebemos sua mensagem original. Mais informações, incluindo a chave PGP do MSRC, podem ser encontradas no Microsoft Security Response Center.