Visão geral de Webchat

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.

Como usar

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 do Azure. Depois que o bot for criado, você precisará obter o segredo do Webchat do bot no portal do Azure. Em seguida, use o segredo para gerar um token e passá-lo para seu Webchat.

Os exemplos a seguir mostram como adicionar um controle de chat da Web 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 de chat da Web, consulte a seção referência da API de chat Web .

Integrar com o JavaScript

O Webchat é projetado para integrar-se ao seu site existente usando JavaScript ou React. A integração com o JavaScript permitirá fazer alterações de estilo e personalizações. Para obter mais informações, consulte o artigo Integrar o Webchat ao site.

Você pode usar o pacote completo e típico do Webchat, que contém a maioria dos recursos normalmente 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 ainda não tiver usado o React e o JSX, você poderá encontrar treinamento na página de Introdução do React.

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 a seguir descreve quais tipos de personalizações você pode obter quando está importando o Webchat de maneiras diferentes. Esta lista não é exaustiva.

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. Primeiro, Compare seu cenário inicial com aquele listado abaixo.

  • Para atualizar um controle de chat da Web inserido em um <iframe> , consulte a documentação no repositório de chat da Web para o pacote de inserção.
  • Para atualizar um controle de chat da Web que usa pouca ou nenhuma personalização, examine o exemplo de bate-papo da Web 00. Migration/a. v3-to-v4 , que descreve o processo.
  • Para atualizar uma versão bifurcada do chat Web v3 com muita personalização, consulte as diretrizes de migraçãode chat da Web.

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 Web Chat API Reference. Além disso, sinta-se à vontade 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, Microsoft Edge e Firefox. Se você precisar do Webchat no Internet Explorer 11, confira pacote ES5 e demonstração.

No entanto, observe que:

  • O Webchat não é compatível com versões do Internet Explorer anteriores à 11
  • A personalização, conforme mostrada em exemplos não ES5, não é compatível com o Internet Explorer. Já que o IE11 não é um navegador moderno, ele não é compatível com ES6. Muitos exemplos que usam funções de seta e promessas modernas precisariam ser convertidas manualmente em ES5. Se você precisa de muita personalização em 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ê deverá apontar seu pacote do Webchat para o feed diário do Webchat, em vez do feed npmjs oficial.

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. Observe que, no seu package-lock.json, os registros para os quais você está apontando 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.

Assinar novamente a versão oficial em npmjs.com

Voltar a assinar a versão original exige que você redefina seu 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. Observe que, no package-lock.json, os registros estão apontando para https://npmjs.com/ novamente.

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 saber mais, confira as Perguntas Frequentes sobre o Código de Conduta ou contate opencode@microsoft.com com perguntas ou comentários adicionais.

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 alguma razão isso não ocorrer, faça um contato posterior via email para garantir que tenhamos recebido sua mensagem original. Mais informações, incluindo a chave PGP do MSRC, podem ser encontradas no Microsoft Security Response Center.

Copyright (c) Microsoft Corporation. Todos os direitos reservados.