Dela via

Webbchatt översikt

  • Artikel

GÄLLER FÖR: SDK v4

Den här artikeln innehåller information om komponenten Bot Framework Webbchatt. Bot Framework Webbchatt-komponenten är en mycket anpassningsbar webbaserad klient för Bot Framework V4 SDK. Med Bot Framework SDK v4 kan utvecklare modellera konversationer och skapa avancerade robotprogram.

Om du vill migrera från Webbchatt v3 till v4 går du vidare till migreringsavsnittet.

Kom igång med Webbchatt

Kommentar

För tidigare versioner av Webbchatt (v3) går du till grenen Webbchatt v3.

Skapa först en robot med Hjälp av Azure AI Bot Service. När roboten har skapats måste du hämta robotens Webbchatt hemlighet i Azure-portalen. Använd sedan hemligheten för att generera en token och skicka den till din Webbchatt.

I följande exempel visas hur du lägger till en Webbchatt kontroll på en webbplats.

<!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, och userAvatarInitials är alla valfria parametrar som ska skickas renderWebChat till metoden. Mer information om format finns i Varför styleOptions?. Mer information om Webbchatt egenskaper finns i avsnittet Webbchatt API-referens.

Om din robot dessutom är en regional robot (vilket innebär att robotresursen window.WebChat.createDirectLine() finns i en annan region än "global") måste du ange den regionala direktlinje-URL:en genom att ange den i ytterligare ett domain fält i metoden. Ange domänen som antingen europe.webchat.botframework.com, unitedstates.webchat.botframework.com eller india.webchat.botframework.com, beroende på vilket som är lämpligt för den valda regionen. Läs Besvara Europas samtal: Lagra och bearbeta EU-data i EU för information om datahemvist.

Integrera med JavaScript

Webbchatt är utformat för att integreras med din befintliga webbplats med hjälp av JavaScript eller React. Om du integrerar med JavaScript får du lite stil och anpassningsbarhet. Mer information finns i Integrera Webbchatt på din webbplats.

Du kan använda det fullständiga, typiska botframework-webchat paketet som innehåller de mest använda funktionerna.

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

Se arbetsexemplet för det fullständiga Webbchatt-paketet.

Integrera med React

För fullständig anpassning kan du använda React för att kompilera om komponenter i Webbchatt.

Om du vill installera produktionsversionen från npm kör du 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
    );
  }
}

Du kan också köra npm install botframework-webchat@master för att installera en utvecklingsversion som är synkroniserad med Webbchatt GitHub-grenmaster.

Se ett fungerande exempel på Webbchatt återges via React.

Dricks

Om du är nybörjare på React och jsx kan du hitta utbildning på reacts komma igång-sidan .

Anpassa användargränssnittet för Webbchatt

Webbchatt är utformad för att vara anpassningsbar utan att förgrena källkoden. Tabellen nedan beskriver vilken typ av anpassningar du kan uppnå när du importerar Webbchatt på olika sätt. Den här listan är inte fullständig.

Anpassning CDN-paket React
Ändra färger ✔️ ✔️
Ändra storlek ✔️ ✔️
Uppdatera/ersätta CSS-formatmallar ✔️ ✔️
Lyssna på händelser ✔️ ✔️
Interagera med värdwebbsidan ✔️ ✔️
Anpassade återgivningsaktiviteter ✔️
Anpassade återgivningsbilagor ✔️
Lägga till nya gränssnittskomponenter ✔️
Kompilera om hela användargränssnittet ✔️

Läs mer om hur du anpassar Webbchatt om du vill veta mer om anpassning.

Kommentar

Information om nätverk för innehållsleverans (CDN) finns i Nätverk för innehållsleverans (CDN)

Migrera från Webbchatt v3 till v4

Det finns tre möjliga sökvägar som migreringen kan ta vid migrering från v3 till v4. Jämför ditt startscenario med det som anges nedan.

  • Information om hur du uppgraderar en Webbchatt kontroll som är inbäddad i en <iframe>finns i dokumentationen i Webbchatt-lagringsplatsen för inbäddningspaketet.
  • Om du vill uppgradera en Webbchatt kontroll som använder lite eller ingen anpassning läser du exemplet Webbchatt 00.migration/a.v3-to-v4, som beskriver processen.
  • Information om hur du uppgraderar en förgrenad version av en mycket anpassad Webbchatt finns i Webbchatt migreringsvägledning.

Webbchatt API-referens

Det finns flera egenskaper som du kan överföra till din Webbchatt React-komponent (<ReactWebChat>) eller renderWebChat() -metoden. En kort beskrivning av de tillgängliga egenskaperna finns i Webbchatt API-referens. Du kan också undersöka källkoden som börjar med packages/component/src/Composer.js.

Webbläsarkompatibilitet

Webbchatt stöder de senaste två versionerna av moderna webbläsare som Chrome, Edge och FireFox. Om du behöver Webbchatt i Internet Explorer 11 kan du läsa ES5-paketet och demonstrationen.

  • Webbchatt stöder inte Internet Explorer som är äldre än version 11
  • Anpassning som visas i exempel som inte är ES5 stöds inte för Internet Explorer. Eftersom IE11 är en icke-modern webbläsare stöder den inte ES6, och många exempel som använder pilfunktioner och moderna löften skulle behöva konverteras manuellt till ES5. Om du behöver omfattande anpassning för din app rekommenderar vi starkt att du utvecklar din app för en modern webbläsare som Google Chrome eller Edge.
  • Webbchatt har ingen plan för att stödja exempel för IE11 (ES5).
  • För kunder som vill skriva om våra andra exempel manuellt för att fungera i IE11 rekommenderar vi att du tittar på konvertering av kod från ES6+ till ES5 med polyfyller och transpilers som babel.

Så här testar du med Webbchatt senaste bitarna

Testning av outgivna funktioner är endast tillgängligt via MyGet-paketering just nu.

Om du vill testa en funktion eller buggkorrigering som ännu inte har släppts, vill du peka ditt Webbchatt-paket till Webbchatt dagliga flöde, i motsats till det officiella npmjs-flödet.

För närvarande kan du komma åt Webbchatt dailies genom att prenumerera på vår MyGet-feed. För att göra detta måste du uppdatera registret i projektet. Den här ändringen är reversibel och våra anvisningar omfattar hur du återgår till att prenumerera på den officiella versionen.

Prenumerera på de senaste bitarna på myget.org

För att göra detta kan du lägga till dina paket och sedan ändra registret för projektet.

  1. Lägg till andra projektberoenden än Webbchatt.
  2. Skapa en .npmrc fil i projektets rotkatalog
  3. Lägg till följande rad i filen: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Lägga till Webbchatt i projektberoendennpm i botframework-webchat --save
  5. I dina package-lock.jsonär de register som pekas på nu MyGet. Det Webbchatt projektet har överordnad källproxy aktiverad, vilket omdirigerar icke-MyGet-paket till npmjs.com.

Prenumerera på den officiella versionen på nytt npmjs.com

Omprenumerera kräver att du återställer registret.

  1. Ta bort din .npmrc file
  2. Ta bort roten package-lock.json
  3. Ta bort din node_modules katalog
  4. Installera om dina paket med npm i
  5. I pekar package-lock.jsonregistren på https://npmjs.com/ igen.

Bidrar

Se vår bidragssida för mer information om hur du skapar projektet och våra riktlinjer för lagringsplatser för pull-begäranden.

Det här projektet har antagit Microsoft Open Source Code of Conduct (Microsofts regler för uppförande för öppen källkod). Läs Vanliga frågor och svar om uppförandekoden eller kontakta opencode@microsoft.com om du har några andra frågor eller kommentarer.

Rapportering av säkerhetsproblem

Säkerhetsproblem och buggar ska rapporteras privat via e-post till Microsoft Security Response Center (MSRC) på secure@microsoft.com. Du bör få ett svar inom 24 timmar. Om du av någon anledning inte gör det följer du upp via e-post för att se till att vi har fått ditt ursprungliga meddelande. Mer information, inklusive MSRC PGP-nyckeln , finns i Security TechCenter.