Übersicht über Webchat

  • Artikel

GILT FÜR: SDK v4

Dieser Artikel enthält Details zur Komponente Bot Framework Webchat. Die Webchat-Komponente von Bot Framework ist ein hochgradig anpassbarer webbasierter Client für das Bot Framework V4 SDK. Mit Version 4 des Bot Framework SDK können Entwickler Konversationen modellieren und komplexe Botanwendungen erstellen.

Wenn Sie sich für das Migrieren von Webchat der Version 3 zur Version 4 interessieren, wechseln Sie direkt zum Abschnitt Migration.

Erste Schritte mit Webchat

Hinweis

Informationen zu früheren Versionen von Webchat (Version 3) finden Sie im Branch zu Webchat der Version 3.

Erstellen Sie zunächst einen Bot mit azure AI Bot Service. Nachdem der Bot erstellt wurde, müssen Sie den Webchat Geheimschlüssel des Bots in Azure-Portal abrufen. Verwenden Sie dann das Geheimnis, um ein Token zu generieren und es an Ihren Webchat zu übergeben.

Das folgende Beispiel zeigt, wie Sie einer Website ein Webchat-Steuerelement hinzufügen.

<!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 und userAvatarInitials sind allesamt optionale Parameter, die an die renderWebChat-Methode übergeben werden können. Weitere Informationen zu Formatvorlagen finden Sie unter Why styleOptions?. Weitere Informationen zu Webchat Eigenschaften finden Sie im Abschnitt Webchat API-Referenz.

Wenn Ihr Bot ein regionaler Bot ist (d. h. Ihre Botressource befindet sich in einer anderen Region als "global"), müssen Sie die regionale Direktline-URL angeben, indem Sie ihn in einem zusätzlichen domain Feld in der window.WebChat.createDirectLine() Methode festlegen. Geben Sie die Do Standard entweder europe.webchat.botframework.comunitedstates.webchat.botframework.com oder india.webchat.botframework.com, je nachdem, welcher Für Ihre ausgewählte Region geeignet ist. Lesen Sie "Answering Europe's Call: Speichern und Verarbeiten von EU-Daten in der EU für Informationen zur Datenhaltung".

Integration mithilfe von JavaScript

Webchat ist für die Integration in Ihre bestehende Website mithilfe von JavaScript oder React konzipiert. Durch die Integration in JavaScript erhalten Sie einige Formatierungen und Anpassungsmöglichkeiten, weitere Informationen finden Sie unter Integrieren von Webchat in Ihre Website.

Sie können das vollständige, typische botframework-webchat Paket verwenden, das die am häufigsten verwendeten Features enthält.

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

Siehe das funktionierende Beispiel im vollständigen Webchat-Paket.

Integration mithilfe von React

Mit React können Sie Komponenten von Webchat überarbeiten und uneingeschränkt anpassen.

Führen Sie npm install botframework-webchat aus, um den Produktionsbuild über npm zu installieren.

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
    );
  }
}

Sie können auch npm install botframework-webchat@master ausführen, um einen Entwicklungsbuild zu installieren, der mit dem GitHub-Branch master von Webchat synchronisiert ist.

Siehe das funktionierende Beispiel des über React gerenderten Webchats.

Tipp

Wenn Sie mit React und jsx noch nicht vertraut sind, finden Sie schulungen auf der Seite "Erste Schritte" von Reacts.

Anpassen der Webchat-Benutzeroberfläche

Web Chat ist auf Anpassungsfähigkeit ausgelegt, ohne den Quellcode zu forken. In der folgenden Tabelle wird beschrieben, welche Art von Anpassungen Sie erzielen können, wenn Sie Webchat auf unterschiedliche Weise importieren. Die Liste ist nicht vollständig.

Anpassung CDN-Paket React
Farben ändern ✔️ ✔️
Größen ändern ✔️ ✔️
CSS-Formatvorlagen aktualisieren und ersetzen ✔️ ✔️
Auf Ereignisse lauschen ✔️ ✔️
Mit der hostenden Webseite interagieren ✔️ ✔️
Benutzerdefinierte Aktivitäten rendern ✔️
Benutzerdefinierte Anlagen rendern ✔️
Der Benutzeroberfläche neue Komponenten hinzufügen ✔️
Die gesamte Benutzeroberfläche neu zusammensetzen ✔️

Unter Anpassen von Webchat erfahren Sie mehr zu Anpassungen.

Hinweis

Weitere Informationen zu Content Delivery Networks (CDNs) finden Sie unter Content Delivery Networks (CDNs).

Migration von Webchat der Version 3 zu Version 4

Es gibt drei Möglichkeiten der Migration von Version 3 zu Version 4. Vergleichen Sie Ihr Anfangsszenario mit der unten aufgeführten.

  • Informationen zum Upgrade eines in eine <iframe>eingebetteten Webchat-Steuerelements finden Sie in der Dokumentation im Webchat Repository für das Einbettungspaket.
  • Wenn Sie ein Webchat-Steuerelement aktualisieren möchten, das wenig bis keine Anpassung verwendet, lesen Sie das Beispiel Webchat 00.migration/a.v3-to-v4, das den Prozess beschreibt.
  • Informationen zum Upgrade einer verzweigten Version einer stark angepassten Webchat finden Sie in den Webchat Migrationsleitfaden.

Referenz zur Webchat-API

Es gibt mehrere Eigenschaften, die Sie an Ihre React-Komponente (<ReactWebChat>) oder die renderWebChat()-Methode von Webchat übergeben können. Eine kurze Beschreibung der verfügbaren Eigenschaften finden Sie unter Webchat API-Referenz. Außerdem können Sie den Quellcode von Anfang packages/component/src/Composer.jsan untersuchen.

Browserkompatibilität

Webchat unterstützt die neuesten zwei Versionen moderner Browser wie Chrome, Edge und Firefox. Wenn Sie Webchat in Internet Explorer 11 benötigen, lesen Sie das ES5-Bundle und die Demo.

  • Webchat unterstützt Internet Explorer, das älter als Version 11 ist, nicht
  • Anpassungen, wie in Nicht-ES5-Beispielen gezeigt, werden für Internet Explorer nicht unterstützt. Da IE11 ein nicht moderner Browser ist, wird ES6 nicht unterstützt, und viele Beispiele, in denen Pfeilfunktionen und moderne Zusagen verwendet werden, müssen manuell in ES5 konvertiert werden. Wenn Sie eine hohe Anpassung für Ihre App benötigen, empfehlen wir dringend, Ihre App für einen modernen Browser wie Google Chrome oder Edge zu entwickeln.
  • Für Webchat ist nicht geplant, Beispiele für IE11 (ES5) zu unterstützen.
  • Für Kunden, die unsere anderen Beispiele manuell für IE11 umprogrammieren möchten, empfehlen wir, den Code von ES6+ mit Polyfills und Transpilern wie babel in ES5 zu konvertieren.

Testen mit den neuesten Webchat-Versionen

Das Testen noch nicht veröffentlichter Features ist derzeit nur über die MyGet-Paketerstellung möglich.

Wenn Sie ein Feature oder einen Fehlerkorrektur testen möchten, der noch nicht veröffentlicht wurde, sollten Sie ihr Webchat Paket auf den täglichen Feed Webchat im Gegensatz zum offiziellen npmjs-Feed verweisen.

Derzeit können Sie auf den täglichen Feed von Webchat zugreifen, indem Sie unseren MyGet-Feed abonnieren. Dazu müssen Sie die Registrierung in Ihrem Projekt aktualisieren. Diese Änderung ist umkehrbar. Unsere Anweisungen beschreiben, wie Sie wieder die offizielle Version abonnieren können.

Abonnieren der neuesten Versionen auf myget.org

Dazu können Sie Ihre Pakete hinzufügen und dann die Registrierung Ihres Projekts ändern.

  1. Fügen Sie Ihre Projektabhängigkeiten mit Ausnahme von Webchat hinzu.
  2. Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei des Typs .npmrc.
  3. Fügen Sie Ihrer Datei die folgende Zeile hinzu: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Fügen Sie Webchat Ihren Projektabhängigkeiten hinzu: npm i botframework-webchat --save
  5. In Euren package-lock.json, die Registries darauf verwiesen haben, sind jetzt MyGet. Für das Webchat-Projekt ist der vorgelagerte Quellcodeproxy aktiviert, der Nicht-MyGet-Pakete zu npmjs.com umleitet.

Erneutes Übermitteln der offiziellen Veröffentlichung am npmjs.com

Das erneute Senden erfordert, dass Sie Ihre Registrierung zurücksetzen.

  1. Löschen Sie Ihre .npmrc file.
  2. Löschen Sie die Datei package-lock.json aus dem Stammverzeichnis.
  3. Entfernen Sie Ihr Verzeichnis node_modules.
  4. Installieren Sie Ihre Pakete mit npm i neu.
  5. In Ihrem package-lock.jsonRegister verweisen https://npmjs.com/ die Register erneut.

Contributing

Auf unserer Seite Contributing finden Sie Einzelheiten zur Erstellung des Projekts und unsere Repositoryrichtlinien für Pull Requests.

Für dieses Projekt gelten die Microsoft-Verhaltensregeln für Open Source (Microsoft Open Source Code of Conduct). Weitere Informationen finden Sie in den häufig gestellten Fragen zum Verhaltenskodex. Sie können sich auch an opencode@microsoft.com wenden, wenn Sie weitere Fragen oder Kommentare haben.

Melden von Sicherheitsproblemen

Sicherheitsprobleme und Fehler sollten dem Microsoft Security Response Center (MSRC) unter secure@microsoft.com vertraulich per E-Mail gemeldet werden. Sie sollten innerhalb von 24 Stunden eine Antwort erhalten. Wenn Sie aus irgendeinem Grund nicht, folgen Sie per E-Mail, um sicherzustellen, dass wir Ihre ursprüngliche Nachricht erhalten haben. Weitere Informationen, z.B. zum MSRC PGP-Schlüssel, finden Sie im Microsoft Security Response Center.