Share via

Gambaran umum Obrolan Web

  • Artikel

BERLAKU UNTUK: SDK v4

Artikel ini berisi detail komponen Bot Framework Web Chat . Komponen Bot Framework Web Chat adalah klien berbasis web yang sangat dapat disesuaikan untuk Bot Framework V4 SDK. Bot Framework SDK v4 memungkinkan pengembang untuk memodelkan percakapan dan membangun aplikasi bot yang canggih.

Jika Anda ingin bermigrasi dari Web Chat v3 ke v4, langsung ke bagian migrasi.

Mulai menggunakan Web Chat

Catatan

Untuk versi Web Chat (v3) sebelumnya, kunjungi cabang Web Chat v3.

Pertama, buat bot menggunakan Azure AI Bot Service. Setelah bot dibuat, Anda harus mendapatkan rahasia Web Chat bot di portal Azure. Kemudian gunakan rahasia untuk menghasilkan token dan meneruskannya ke Web Chat Anda.

Contoh berikut menunjukkan cara menambahkan kontrol Web Chat ke situs web.

<!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, , usernamelocale, botAvatarInitials, dan userAvatarInitials semua parameter opsional untuk diteruskan ke renderWebChat metode . Untuk informasi selengkapnya tentang gaya, lihat Mengapa styleOptions?. Untuk mempelajari selengkapnya tentang properti Web Chat, lihat bagian Referensi WEB Chat API.

Selain itu, jika bot Anda adalah bot regional (yang berarti sumber daya bot Anda berada di wilayah selain "global"), Anda harus menentukan URL directline regional dengan mengaturnya di bidang tambahan domain dalam window.WebChat.createDirectLine() metode . Tentukan domain sebagai europe.webchat.botframework.com, unitedstates.webchat.botframework.com atau india.webchat.botframework.com, mana pun yang sesuai untuk wilayah yang Anda pilih. Baca Menjawab Panggilan Eropa: Menyimpan dan Memproses Data UE di UE untuk informasi tentang residensi data.

Integrasikan dengan JavaScript

Web Chat dirancang untuk diintegrasikan dengan situs web Anda yang ada menggunakan JavaScript atau React. Mengintegrasikan dengan JavaScript akan memberi Anda beberapa gaya dan penyesuaian, untuk informasi selengkapnya, lihat Mengintegrasikan Web Chat ke situs web Anda.

Anda dapat menggunakan paket lengkap dan khas botframework-webchat yang berisi fitur yang paling umum digunakan.

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

Lihat sampel kerja bundel Web Chat lengkap.

Integrasikan dengan React

Untuk penyesuaian penuh, Anda dapat menggunakan React untuk menyusun ulang komponen Web Chat.

Untuk menginstal build produksi dari npm, jalankan 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
    );
  }
}

Anda juga dapat menjalankan npm install botframework-webchat@master untuk menginstal build pengembangan yang disinkronkan dengan cabang GitHub master Web Chat.

Lihat sampel kerja Web Chat yang dirender melalui React.

Tip

Jika Anda baru menggunakan React dan jsx, Anda dapat menemukan pelatihan di halaman Memulai Reacts.

Mengkustomisasi antarmuka pengguna Obrolan Web

Web Chat dirancang agar dapat disesuaikan tanpa memalsukan kode sumber. Tabel di bawah ini menguraikan jenis kustomisasi apa yang dapat Anda capai saat mengimpor Web Chat dengan cara yang berbeda. Daftar ini tidak lengkap.

Penyesuaian Bundel CDN React
Ubah warna ✔️ ✔️
Mengubah ukuran ✔️ ✔️
Memperbarui/mengganti gaya CSS ✔️ ✔️
Dengarkan peristiwa ✔️ ✔️
Berinteraksi dengan halaman web hosting ✔️ ✔️
Aktivitas render kustom ✔️
Lampiran render kustom ✔️
Menambahkan komponen UI baru ✔️
Menyusun ulang seluruh UI ✔️

Lihat selengkapnya tentang menyesuaikan Web Chat untuk mempelajari selengkapnya tentang kustomisasi.

Catatan

Untuk informasi tentang Content Delivery Networks (CDN) Lihat Jaringan Pengiriman konten (CDN)

Migrasi dari Web Chat v3 ke v4

Ada tiga kemungkinan jalur yang mungkin diambil migrasi saat bermigrasi dari v3 ke v4. Bandingkan skenario awal Anda dengan skenario yang tercantum di bawah ini.

  • Untuk meningkatkan kontrol Web Chat yang disematkan dalam <iframe>, lihat dokumentasi di repositori Web Chat untuk paket semat.
  • Untuk meningkatkan kontrol Web Chat yang menggunakan sedikit atau tanpa kustomisasi, tinjau sampel Web Chat 00.migration/a.v3-to-v4 , yang menjelaskan prosesnya.
  • Untuk meningkatkan versi fork dari Web Chat yang sangat disesuaikan, lihat panduan migrasi Web Chat.

Referensi API Obrolan Web

Ada beberapa properti yang mungkin Anda teruskan ke Komponen React Obrolan Web (<ReactWebChat>) atau metode .renderWebChat() Untuk deskripsi singkat tentang properti yang tersedia, lihat Referensi WEB Chat API. Selain itu, jangan ragu untuk memeriksa kode sumber yang dimulai dengan packages/component/src/Composer.js.

Kompatibilitas browser

Web Chat mendukung 2 versi terbaru browser modern seperti Chrome, Edge, dan FireFox. Jika Anda memerlukan Web Chat di Internet Explorer 11, lihat bundel es5 dan demo.

  • Web Chat tidak mendukung Internet Explorer yang lebih lama dari versi 11
  • Kustomisasi seperti yang ditunjukkan dalam sampel non-ES5 tidak didukung untuk Internet Explorer. Karena IE11 adalah browser non-modern, IE11 tidak mendukung ES6, dan banyak sampel yang menggunakan fungsi panah dan janji modern perlu dikonversi secara manual ke ES5. Jika Anda membutuhkan penyesuaian berat untuk aplikasi Anda, sebaiknya kembangkan aplikasi Anda untuk browser modern seperti Google Chrome atau Edge.
  • Web Chat tidak memiliki rencana untuk mendukung sampel untuk IE11 (ES5).
  • Bagi pelanggan yang ingin menulis ulang sampel kami yang lain secara manual untuk bekerja di IE11, kami sarankan untuk mengonversi kode dari ES6+ ke ES5 menggunakan polifill dan transpiler seperti babel.

Cara menguji dengan bit terbaru Web Chat

Menguji fitur yang belum dilepaskan hanya tersedia melalui kemasan MyGet saat ini.

Jika Anda ingin menguji fitur atau perbaikan bug yang belum dirilis, Anda harus mengarahkan paket Web Chat Anda ke umpan harian Web Chat, dibandingkan dengan umpan npmjs resmi.

Saat ini, Anda dapat mengakses dailies Web Chat dengan berlangganan umpan MyGet kami. Untuk melakukan ini, Anda harus memperbarui registri dalam proyek Anda. Perubahan ini dapat dibalik, dan arahan kami termasuk cara kembali ke berlangganan rilis resmi.

Berlangganan bit terbaru pada myget.org

Untuk melakukan ini, Anda dapat menambahkan paket Anda lalu mengubah registri proyek Anda.

  1. Tambahkan dependensi proyek Anda selain Web Chat.
  2. Di direktori akar proyek Anda, buat .npmrc file
  3. Tambahkan baris berikut ke file Anda: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Menambahkan Web Chat ke dependensi proyek Anda npm i botframework-webchat --save
  5. Di Anda package-lock.json, registri yang ditujukkan sekarang adalah MyGet. Proyek Web Chat mengaktifkan proksi sumber upstream, yang akan mengalihkan paket non-MyGet ke npmjs.com.

Berlangganan kembali ke rilis resmi pada npmjs.com

Berlangganan ulang mengharuskan Anda mengatur ulang registri Anda.

  1. Menghapus .npmrc file
  2. Hapus akar Anda package-lock.json
  3. Menghapus direktori Anda node_modules
  4. Instal ulang paket Anda dengan npm i
  5. Di Anda package-lock.json, registri menunjuk ke https://npmjs.com/ lagi.

Berkontribusi

Lihat halaman Kontribusi kami untuk detail tentang cara membangun proyek dan panduan repositori kami untuk Permintaan Pull.

Proyek ini telah mengadopsi Kode Etik Sumber Terbuka Microsoft. Untuk informasi selengkapnya, lihat FAQ Kode Etik atau hubungi opencode@microsoft.com untuk mengajukan pertanyaan atau komentar tambahan.

Melaporkan Masalah Keamanan

Masalah keamanan dan bug harus dilaporkan secara privat, melalui email, ke Microsoft Security Response Center (MSRC) di secure@microsoft.com. Anda akan menerima respons dalam waktu 24 jam. Jika karena alasan tertentu Anda tidak melakukannya, tindak lanjuti melalui email untuk memastikan kami menerima pesan asli Anda. Informasi lebih lanjut, termasuk kunci MSRC PGP , dapat ditemukan di Security TechCenter.