Please refer to the instructions in the BotFramework-WebChat repo to see how to host Web Chat v4 in a website. You'll find something that looks like this:
<!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',
username: 'Web Chat User',
locale: 'en-US',
botAvatarInitials: 'WC',
userAvatarInitials: 'WW'
}, document.getElementById('webchat'));
</script>
</body>
</html>
Rather than passing the same kind of object to window.WebChat.renderWebChat
's directLine
parameter as you would to BotChat.App
's directLine
parameter, you need to pass the object to window.WebChat.createDirectLine
. The object in question is a DirectLineOptions
object.
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
secret: params['s'],
token: params['t'],
domain: params['domain'],
webSocket: false // defaults to true
}),
If you don't want to have to pass in any parameters to your Web Chat client, you can include them inline:
secret: '',
token: '',
domain: 'http://localhost:3000/directline',
webSocket: false // defaults to true
And if you're not particular about running Web Chat in your own HTML page, I recommend foregoing offline-directline and just using the Bot Emulator, which is great for interacting with local bots.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…