Embeddable web chat control for the Microsoft Bot Framework using the DirectLine API. This repo is customized fork of BotBuilder-WebChat by Feedyou. This features were added by Feedyou in comparsion with BotBuilder-WebChat:
- show typing indicator on startup until the first message is recieved
- increase typing indicator timeout from 3 to 20 seconds
- show
imBackbuttons only for the last activity - send backchannel event on startup which could be used instead of
conversationUpdateevent - ability to pass some
userDatato bot using backchannel mechanism'schannelDataprop - preset some default values in
<App>component - for example generateuser.idif not set - support custom button click trigger for restarting conversation (
startOverTriggerprop) - make emoticons compatible using Twemoji
- configurable style themes (currently only
theme.mainColorprop) - auto show upload button when
inputHintproperty of last incoming activity wasexpectingUpload - force intro dialog ID using
introDialog.idproperty - option
disableInputWhenNotNeededto disable input after messages withinputHint==='ignoringInput
These are configuration values you will get from Feedyou during WebChat implemenation phase.
DirectLine secretis used for authenticationBot IDis string in formatfeedbot-*Bot namewill be shown as author name of messages from bot
Please paste these values to places marked by ... in examples.
Include botchat.css, botchat-es5.js (from our https://cdn.feedyou.ai/webchat/latest/... CDN) and following code into your website and paste required values you got from Feedyou. It will create expandable webchat in bottom right corner for you.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.feedyou.ai/webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<script src="https://cdn.feedyou.ai/webchat/latest/botchat-es5.js"></script>
<script>
BotChat.App({
directLine: { secret: '...' },
bot: { id: 'feedbot-...', name: '...' }
theme: { mainColor: "#e51836" },
header: { text: "Chatbot", textWhenCollapsed: "Click for chatbot!" }
// SEE "Advanced configuration" SECTION FOR MORE OPTIONS
});
</script>
</body>
</html>If you don't want to use polyfills for older browsers, you can use
botchat.jsinstead of defaultbotchat-es5.js.
If you want to make the expansion logic by yourself or you want to put bot directly into some existing element on your page, you can check out our examples:
- /samples/feedyou/code.html show the most simple way how to inject webchat into your page which you can also use with GTM or some other tag manager
- /samples/feedyou/embed.html when you want to embed bot into given element of your page
- /samples/feedyou/expandable.html when you want to make expansion logic by yourself (note that
BotChatcomponent is initialized only after chat window is expanded, so bot is not triggered for users who not open chat) - /samples/feedyou/full.html when webchat should be the main element on the page
- /samples/feedyou/persistent.html special configuration which allows to persist bot history between page reloads (by disabling WebSocket and using HTTP pooling instead)
You can use following optional settings during BotChat.App call:
bot: {
id: string,
name?: string
},
user?: {
id?: string,
name?: string
},
directLine: {
secret: string,
conversationId?: string,
webSocket?: boolean = true
},
theme?: {
mainColor?: string,
enableScreenshotUpload?: boolean
},
header?: {
text?: string,
textWhenCollapsed?: string,
},
introDialog?: {
id?: string // overrides default bot dialog which is started when user opens webchat
},
locale?: 'cs' | 'en' | 'sk' | 'sr' | 'hu' = 'cs',
userData?: object, // allows to preset some data we already know about user (email, phone, etc.)
startOverTrigger?: (trigger: () => void) => void, // can be used to binding onclick event on element which can be used to restart conversation
onConversationStarted?: (callback: (conversationId: string) => void) => void, // can be used to store conversationId for new conversations (useful for history persistence)
disableInputWhenNotNeeded?: boolean = false, // disables input after messages with `inputHint==='ignoringInput`
autoExpandTimeout?: number = null // auto expand in milliseconds (only in case when no element specified as second argument of BotChat.App())
openUrlTarget?: 'new' | 'same' | 'same-domain' // allows to change target of opening URLs from botWebChat looks for following parameters in the URL when implemented on any page:
#feedbot-test-modesetstestMode: trueinto theuserDataobject enables test mode in the chatbot for given user#feedbot-intro-dialogoverrides default bot dialog which is started when user opens webchat and also value set byintroDialog.idin the webchat settings
WebChat is listening for following custom events on global window object:
feedbot:trigger-dialogstarts selected dialog specified indialogproperty ofCustomEvent(for examplewindow.dispatchEvent(new CustomEvent('feedbot:trigger-dialog', { detail: 'package-status' })))feedbot:start-overrestarts conversation, which is the same behavior asstartOverTriggercallback in config above (for examplewindow.dispatchEvent(new CustomEvent('feedbot:start-over')))
If support of Internet Explorer is required, please provide use fallback to support custom event creation there.
If you want to use WebChat directly as the component in your React app or you just want to customize it more than described above, check out the advanced README or contact Feedyou directly.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments. -->
© 2016 Microsoft Corporation