kustomisasi Web Chat
BERLAKU UNTUK: SDK v4
Artikel ini menjelaskan cara mengkustomisasi sampel Web Chat agar sesuai dengan bot Anda.
Mengintegrasikan Web Chat ke situs web Anda
Gambaran umum Web Chat menjelaskan cara mengintegrasikan kontrol Web Chat ke situs web Anda.
Menyesuaikan gaya
Kontrol Web Chat menyediakan opsi kustomisasi yang kaya: Anda dapat mengubah warna, ukuran, penempatan elemen, menambahkan elemen kustom, dan berinteraksi dengan halaman web hosting. Di bawah ini adalah beberapa contoh cara menyesuaikan UI Web Chat.
Anda dapat menemukan daftar lengkap semua pengaturan yang dapat Anda ubah di Web Chat dalam StyleOptions.ts
file. Nilai default untuk Web Chat dapat ditemukan di file defaultStyleOptions.ts
Pengaturan ini akan menghasilkan set gaya, yang merupakan sekumpulan aturan CSS yang ditingkatkan dengan glamor. Anda dapat menemukan daftar lengkap gaya CSS yang dihasilkan dalam kumpulan gaya dalam createStyleSet.ts
file.
Mengatur ukuran kontainer Web Chat
Untuk menyesuaikan ukuran kontainer Web Chat, gunakan kumpulanrootHeight
gaya dan rootWidth
properti. Contoh berikut juga mengatur warna latar belakang kontainer untuk menunjukkan ukuran pengontrol.
<!DOCTYPE html>
<head>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
<div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
<script>
// Set the CSS rules.
const styleSet = window.WebChat.createStyleSet({
rootHeight: '100%',
rootWidth: '50%',
backgroundColor: 'paleturquoise'
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: '<Your Direct Line token>'}),
styleSet
}, document.getElementById('webchat'));
</script>
</body>
Peringatan
Di halaman web hosting, jangan gunakan kunci Direct Line Anda dalam pandangan biasa. Gunakan token seperti yang dijelaskan di bagian opsi Penyematan produksi tentang cara Menyambungkan bot ke Web Chat.
Mengubah font dan warna gelembung obrolan
Anda dapat menyesuaikan warna latar belakang dan font yang digunakan dalam gelembung obrolan agar sesuai dengan gaya halaman web yang menghosting kontrol Web Chat. Cuplikan kode di bawah ini menunjukkan cara melakukannya.
<!DOCTYPE html>
<head>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
<div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
<script>
// Set the CSS rules.
const styleSet = window.WebChat.createStyleSet({
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
rootHeight: '100%',
rootWidth: '50%',
backgroundColor: 'paleturquoise'
});
// After generated, you can modify the CSS rules.
// Change font family and weight.
styleSet.textContent = {
...styleSet.textContent,
fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
fontWeight: 'bold'
};
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: '<Your Direct Line token>'}),
styleSet
}, document.getElementById('webchat'));
</script>
</body>
Mengubah bot dan avatar pengguna
Web Chat mendukung avatar, yang dapat Anda sesuaikan dengan mengatur botAvatarInitials
dan userAvatarInitials
di styleOptions
properti .
<!DOCTYPE html>
<head>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
<div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
<script>
// Set the CSS rules.
const styleSet = window.WebChat.createStyleSet({
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
rootHeight: '100%',
rootWidth: '50%',
backgroundColor: 'paleturquoise'
});
// After generated, you can modify the CSS rules.
// Change font family and weight.
styleSet.textContent = {
...styleSet.textContent,
fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
fontWeight: 'bold'
};
// Set the avatar options.
const avatarOptions = {
botAvatarInitials: 'BF',
userAvatarInitials: 'WC'
};
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: '<Your Direct Line token>'}),
styleSet,
styleOptions: avatarOptions
}, document.getElementById('webchat'));
</script>
</body>
botAvatarInitials
Gunakan properti untuk mengatur inisial avatar untuk bot, yang muncul di sisi kiri kontrol.
userAvatarInitials
Gunakan properti untuk mengatur inisial avatar untuk pengguna, yang muncul di sisi kanan.
botAvatarImage
Gunakan properti dan userAvatarImage
untuk menyediakan URL gambar untuk bot dan avatar pengguna. Kontrol akan menampilkan ini sebagai pengganti inisial, seperti yang ditunjukkan di bawah ini.
const avatarOptions = {
botAvatarImage: '<URL to your bot avatar image>',
botAvatarInitials: 'BF',
userAvatarImage: '<URL to your user avatar image>',
userAvatarInitials: 'WC'
};
Aktivitas atau lampiran penyajian kustom
Dengan versi terbaru Web Chat, Anda juga dapat merender aktivitas atau lampiran yang tidak Web Chat dukung secara langsung. Aktivitas dan render lampiran dikirim hingga alur yang dapat disesuaikan yang dimodelkan setelah middleware Redux. Alur cukup fleksibel sehingga Anda dapat melakukan tugas berikut dengan mudah:
- Menghias aktivitas/lampiran yang ada
- Menambahkan aktivitas/lampiran baru
- Ganti aktivitas/lampiran yang ada (atau hapus)
- Middleware rantai Daisy bersama-sama
Tampilkan repositori GitHub sebagai lampiran
Misalnya, jika Anda ingin menampilkan dek kartu repositori GitHub, Anda dapat membuat komponen React baru untuk repositori GitHub dan menambahkannya sebagai middleware. Cuplikan gambar dan kode berikut berasal dari sampel sampel customization-card-components.
Berikut ini adalah output saat Anda memasukkan pesan default: sample:github-repository.
Jika Anda memasukkan bantuan , Anda mendapatkan pilihan semua kartu yang dapat Anda pilih. Ini adalah salah satu dari banyak contoh:
import ReactWebChat from 'botframework-webchat';
import ReactDOM from 'react-dom';
// Create a new React component that accept render a GitHub repository attachment
const GitHubRepositoryAttachment = props => (
<div
style={{
fontFamily: "'Calibri', 'Helvetica Neue', Arial, sans-serif",
margin: 20,
textAlign: 'center'
}}
>
<svg
height="64"
viewBox="0 0 16 16"
version="1.1"
width="64"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
/>
</svg>
<p>
<a
href={`https://github.com/${encodeURI(props.owner)}/${encodeURI(
props.repo
)}`}
target="_blank"
>
{props.owner}/<br />
{props.repo}
</a>
</p>
</div>
);
// Creating a new middleware pipeline that will render <GitHubRepositoryAttachment> for specific type of attachment
const attachmentMiddleware = () => next => card => {
switch (card.attachment.contentType) {
case 'application/vnd.microsoft.botframework.samples.github-repository':
return (
<GitHubRepositoryAttachment
owner={card.attachment.content.owner}
repo={card.attachment.content.repo}
/>
);
default:
return next(card);
}
};
ReactDOM.render(
<ReactWebChat
// Prepending the new middleware pipeline
attachmentMiddleware={attachmentMiddleware}
directLine={window.WebChat.createDirectLine({ token })}
/>,
document.getElementById('webchat')
);
Dalam sampel ini, kami menambahkan komponen React baru yang disebut GitHubRepositoryAttachment
:
const GitHubRepositoryAttachment = props => (
<div
style={{
fontFamily: "'Calibri', 'Helvetica Neue', Arial, sans-serif",
margin: 20,
textAlign: 'center'
}}
>
<svg
height="64"
viewBox="0 0 16 16"
version="1.1"
width="64"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
/>
</svg>
<p>
<a
href={`https://github.com/${encodeURI(props.owner)}/${encodeURI(
props.repo
)}`}
target="_blank"
>
{props.owner}/<br />
{props.repo}
</a>
</p>
</div>
);
Kemudian, kami membuat middleware yang akan merender komponen React baru ketika bot mengirim lampiran jenis application/vnd.microsoft.botframework.samples.github-repository
konten . Jika tidak, itu akan berlanjut pada middleware dengan memanggil next(card)
.
const attachmentMiddleware = () => next => card => {
switch (card.attachment.contentType) {
case 'application/vnd.microsoft.botframework.samples.github-repository':
return (
<GitHubRepositoryAttachment
owner={card.attachment.content.owner}
repo={card.attachment.content.repo}
/>
);
default:
return next(card);
}
};
Aktivitas yang dikirim dari bot terlihat seperti berikut ini:
{
"type": "message",
"from": {
"role": "bot"
},
"attachmentLayout": "carousel",
"attachments": [
{
"contentType": "application/vnd.microsoft.botframework.samples.github-repository",
"content": {
"owner": "Microsoft",
"repo": "BotFramework-WebChat"
}
},
{
"contentType": "application/vnd.microsoft.botframework.samples.github-repository",
"content": {
"owner": "Microsoft",
"repo": "BotFramework-Emulator"
}
},
{
"contentType": "application/vnd.microsoft.botframework.samples.github-repository",
"content": {
"owner": "Microsoft",
"repo": "BotFramework-DirectLineJS"
}
}
]
}