Delen via

overzicht van Webchat

  • Artikel

VAN TOEPASSING OP: SDK v4

Dit artikel bevat details van het Bot Framework Webchat-onderdeel. Het Bot Framework Webchat-onderdeel is een zeer aanpasbare webclient voor de Bot Framework V4 SDK. Met de Bot Framework SDK v4 kunnen ontwikkelaars gesprekken modelleren en geavanceerde bottoepassingen bouwen.

Als u wilt migreren van Webchat v3 naar v4, gaat u verder naar de migratiesectie.

Aan de slag met Webchat

Notitie

Ga naar de Webchat v3-vertakking voor eerdere versies van Webchat (v3).

Maak eerst een bot met behulp van Azure AI Bot Service. Zodra de bot is gemaakt, moet u het Webchat geheim van de bot verkrijgen in Azure Portal. Gebruik vervolgens het geheim om een token te genereren en door te geven aan uw Webchat.

In het volgende voorbeeld ziet u hoe u een Webchat besturingselement toevoegt aan een website.

<!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, , botAvatarInitialsen userAvatarInitials zijn alle optionele parameters die moeten worden doorgegeven aan de renderWebChat methode. Zie Waarom styleOptions?voor meer informatie over stijl. Zie de sectie Webchat API-verwijzing voor meer informatie over Webchat eigenschappen.

Als uw bot een regionale bot is (wat betekent dat uw botresource zich in een andere regio dan 'globaal' bevindt), moet u de regionale directline-URL opgeven door deze in te stellen in een extra domain veld in de window.WebChat.createDirectLine() methode. Geef het domein op als europe.webchat.botframework.com, unitedstates.webchat.botframework.com of india.webchat.botframework.com, afhankelijk van wat geschikt is voor uw gekozen regio. Lees De oproep van Europa beantwoorden: EU-gegevens opslaan en verwerken in de EU voor informatie over gegevenslocatie.

Integreren met JavaScript

Webchat is ontworpen om te integreren met uw bestaande website met behulp van JavaScript of React. Als u integreert met JavaScript, krijgt u wat stijl en aanpasbaarheid. Zie Integreren Webchat in uw website voor meer informatie.

U kunt het volledige, typische botframework-webchat pakket gebruiken dat de meest gebruikte functies bevat.

<!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>

Bekijk het werkende voorbeeld van de volledige Webchat bundel.

Integreren met React

Voor volledige aanpassing kunt u React gebruiken om onderdelen van Webchat opnieuw te compileren.

Als u de productie-build wilt installeren vanuit npm, voert u de opdracht uit 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
    );
  }
}

U kunt ook uitvoeren npm install botframework-webchat@master om een ontwikkelbuild te installeren die wordt gesynchroniseerd met de GitHub-vertakking master van Webchat.

Bekijk een werkend voorbeeld van Webchat weergegeven via React.

Tip

Als u nog niet eerder bent met React en jsx, kunt u training vinden op de pagina Aan de slag met Reacts.

Gebruikersinterface van Webchat aanpassen

Webchat is ontworpen om aan te passen zonder de broncode aan te passen. In de onderstaande tabel wordt beschreven wat voor soort aanpassingen u kunt bereiken wanneer u Webchat op verschillende manieren importeert. Deze lijst is niet volledig.

Aanpassing CDN-bundel React
Kleuren wijzigen ✔️ ✔️
Grootten wijzigen ✔️ ✔️
CSS-stijlen bijwerken/vervangen ✔️ ✔️
Luisteren naar gebeurtenissen ✔️ ✔️
Interactie met het hosten van webpagina's ✔️ ✔️
Aangepaste renderactiviteiten ✔️
Aangepaste renderbijlagen ✔️
Nieuwe UI-onderdelen toevoegen ✔️
De hele gebruikersinterface opnieuw compileren ✔️

Zie meer over het aanpassen van Webchat voor meer informatie over aanpassing.

Notitie

Zie Netwerken voor contentlevering (CDN's) voor informatie over CDN's (Content Delivery Networks)

Migreren van Webchat v3 naar v4

Er zijn drie mogelijke paden die de migratie kan aannemen bij het migreren van v3 naar v4. Vergelijk uw beginscenario met het scenario dat hieronder wordt vermeld.

Webchat API-verwijzing

Er zijn verschillende eigenschappen die u kunt doorgeven aan uw Webchat React Component (<ReactWebChat>) of de renderWebChat() methode. Zie Webchat API-verwijzing voor een korte beschrijving van de beschikbare eigenschappen. U kunt ook de broncode onderzoeken die begint met packages/component/src/Composer.js.

Browsercompatibiliteit

Webchat ondersteunt de nieuwste twee versies van moderne browsers, zoals Chrome, Edge en FireFox. Als u Webchat nodig hebt in Internet Explorer 11, raadpleegt u de ES5-bundel en demo.

  • Webchat biedt geen ondersteuning voor Internet Explorer ouder dan versie 11
  • Aanpassing, zoals wordt weergegeven in niet-ES5-voorbeelden, worden niet ondersteund voor Internet Explorer. Omdat IE11 een niet-moderne browser is, biedt het geen ondersteuning voor ES6 en moeten veel voorbeelden die gebruikmaken van pijlfuncties en moderne beloften handmatig worden geconverteerd naar ES5. Als u veel aanpassingen voor uw app nodig hebt, raden we u ten zeerste aan uw app te ontwikkelen voor een moderne browser, zoals Google Chrome of Edge.
  • Webchat heeft geen plan om voorbeelden voor IE11 (ES5) te ondersteunen.
  • Voor klanten die onze andere voorbeelden handmatig willen herschrijven om in IE11 te werken, raden we u aan om code te converteren van ES6+ naar ES5 met behulp van polyfills en transpilers zoals babel.

Testen met de nieuwste bits van Webchat

Het testen van niet-uitgebrachte functies is momenteel alleen beschikbaar via MyGet-pakketten.

Als u een functie of bugfix wilt testen die nog niet is uitgebracht, wilt u uw Webchat pakket laten verwijzen naar de dagelijkse feed van Webchat, in plaats van de officiële npmjs-feed.

Op dit moment hebt u toegang tot Webchat's dailies door u te abonneren op onze MyGet-feed. Hiervoor moet u het register in uw project bijwerken. Deze wijziging is omkeerbaar en onze aanwijzingen omvatten hoe u teruggaat naar het abonneren op de officiële release.

Abonneren op de meest recente bits op myget.org

Hiervoor kunt u uw pakketten toevoegen en vervolgens het register van uw project wijzigen.

  1. Voeg andere projectafhankelijkheden toe dan Webchat.
  2. Maak een .npmrc bestand in de hoofdmap van uw project
  3. Voeg de volgende regel toe aan uw bestand: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Webchat toevoegen aan de projectafhankelijkhedennpm i botframework-webchat --save
  5. In uw package-lock.json, de registers die erop wijzen, zijn nu MyGet. Het Webchat project heeft upstream-bronproxy ingeschakeld, waarmee niet-MyGet-pakketten worden omgeleid naar npmjs.com.

Opnieuw abonneren op officiële release op npmjs.com

Als u zich opnieuw abonneert, moet u het register opnieuw instellen.

  1. Uw .npmrc file
  2. Uw hoofdmap verwijderen package-lock.json
  3. Uw node_modules map verwijderen
  4. Installeer uw pakketten opnieuw met npm i
  5. In uw package-lock.jsonregister verwijzen de registers opnieuw naar https://npmjs.com/ .

Bijdragen

Zie onze pagina Bijdragen voor meer informatie over het bouwen van het project en onze richtlijnen voor opslagplaatsen voor pull-aanvragen.

Dit project onderschrijft de Microsoft Open Source gedragscode. Raadpleeg voor meer informatie de veelgestelde vragen over de gedragscode of neem contact op via opencode@microsoft.com als u aanvullende vragen of opmerkingen hebt.

Beveiligingsproblemen melden

Beveiligingsproblemen en fouten moeten privé worden gerapporteerd via e-mail naar het Microsoft Security Response Center (MSRC) op secure@microsoft.com. U zou binnen 24 uur een reactie moeten krijgen. Als u dit om een of andere reden niet doet, kunt u dit via e-mail opvolgen om ervoor te zorgen dat we uw oorspronkelijke bericht hebben ontvangen. Meer informatie, waaronder de MSRC PGP-sleutel , vindt u in het Security TechCenter.