Visão geral do Web Chat

  • Artigo

APLICA-SE A: SDK v4

Este artigo contém detalhes do componente Bot Framework Web Chat . O componente Bot Framework Web Chat é um cliente baseado na Web altamente personalizável para o SDK do Bot Framework V4. O Bot Framework SDK v4 permite que os desenvolvedores modelem a conversa e criem aplicativos de bot sofisticados.

Se você deseja migrar do Web Chat v3 para v4, vá para a seção de migração.

Introdução ao Web Chat

Nota

Para versões anteriores do Web Chat (v3), visite a ramificação do Web Chat v3.

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

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, , , , usernamelocalebotAvatarInitialse userAvatarInitials são todos parâmetros opcionais para passar para o renderWebChat método. 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 Answering Europe's Call: Storing and Processing EU Data in the EU para obter informações sobre residência de dados.

Integração com JavaScript

Web Chat é projetado para se integrar com o 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 Web Chat em seu site.

Você pode usar o pacote completo e típico botframework-webchat que contém os recursos mais 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>

Veja o exemplo de trabalho do pacote completo do Web Chat.

Integre com o React

Para total personalização, você pode usar o React para recompor componentes do Web Chat.

Para instalar a compilação de produção a partir 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 uma compilação de desenvolvimento que é sincronizada com a ramificação GitHub master do Web Chat.

Veja uma amostra funcional do Web Chat renderizado via React.

Gorjeta

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

Personalizar a interface do usuário do Web Chat

Web Chat é projetado para ser personalizável sem forjar o código-fonte. A tabela abaixo descreve que tipo de personalizações você pode obter ao importar o Web Chat de maneiras diferentes. Esta lista não é exaustiva.

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

Veja mais sobre como personalizar o Web Chat para saber mais sobre personalização.

Nota

Para obter informações sobre redes de distribuição de conteúdo (CDNs), consulte Redes de distribuição de conteúdo (CDNs)

Migrando do Web Chat v3 para v4

Há três caminhos possíveis que a migração pode tomar ao migrar da v3 para a v4. Compare o seu cenário inicial com o listado abaixo.

  • Para atualizar um controle de Chat da Web incorporado em um <iframe>, consulte a documentação no repositório do Web Chat para o pacote de incorporação.
  • Para atualizar um controle de Chat da Web que usa pouca ou nenhuma personalização, examine o exemplo de Chat da Web 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 Web Chat

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

Compatibilidade com o browser

O Web Chat suporta as 2 versões mais recentes de 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
  • A personalização, conforme mostrado em exemplos não ES5, não é suportada pelo 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ê estiver precisando de personalização pesada para seu aplicativo, recomendamos que desenvolva seu aplicativo para um navegador moderno, como o Google Chrome ou o Edge.
  • O Web Chat não tem nenhum plano para oferecer suporte a exemplos para o IE11 (ES5).
  • Para os clientes que desejam reescrever manualmente nossas outras amostras para trabalhar no IE11, recomendamos examinar a conversão de código de ES6+ para ES5 usando polyfills e transpilers como babel.

Como testar com os bits mais recentes do Web Chat

Testar recursos não lançados só está disponível através da embalagem MyGet no momento.

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 Web Chat para o feed diário do Web Chat, em oposição ao feed oficial do npmjs.

Atualmente, você pode acessar os diários do Web Chat assinando nosso feed MyGet. Para fazer isso, você precisará atualizar o registro em seu projeto. Esta alteração é reversível e as nossas instruções incluem como voltar a subscrever a versão oficial.

Subscrever os bits mais recentes em 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 diferentes do Web Chat.
  2. No diretório raiz do seu projeto, crie um .npmrc arquivo
  3. Adicione a seguinte linha ao seu ficheiro: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Adicionar Web Chat às dependências do seu projeto npm i botframework-webchat --save
  5. No seu package-lock.json, os registos apontados são agora MyGet. O projeto Web Chat tem proxy de origem upstream habilitado, que redirecionará pacotes não-MyGet para npmjs.com.

Subscrever novamente o lançamento oficial em npmjs.com

A resubscrição requer que reponha o registo.

  1. Exclua o seu .npmrc file
  2. Exclua sua raiz package-lock.json
  3. Remover o node_modules diretório
  4. Reinstale seus pacotes com npm i
  5. No seu package-lock.json, os registos estão novamente a https://npmjs.com/ apontar.

Contribuição

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

Este projeto adotou o Código de Conduta Open Source da Microsoft. Para mais informações, veja as Perguntas Frequentes do Código de Conduta ou contacte opencode@microsoft.com com quaisquer questões ou comentários adicionais.

Comunicar Problemas de Segurança

Problemas de segurança e bugs devem ser relatados de forma privada, por e-mail, ao Microsoft Security Response Center (MSRC) em secure@microsoft.com. Deverá receber uma resposta no prazo de 24 horas. Se, por algum motivo, não o fizer, faça um acompanhamento por e-mail para garantir que recebemos a sua mensagem original. Mais informações, incluindo a chave MSRC PGP , podem ser encontradas no Security TechCenter.