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
imBack
buttons only for the last activity - send backchannel event on startup which could be used instead of
conversationUpdate
event - ability to pass some
userData
to bot using backchannel mechanism'schannelData
prop - preset some default values in
<App>
component - for example generateuser.id
if not set - support custom button click trigger for restarting conversation (
startOverTrigger
prop) - make emoticons compatible using Twemoji
- configurable style themes (currently only
theme.mainColor
prop) - auto show upload button when
inputHint
property of last incoming activity wasexpectingUpload
- force intro dialog ID using
introDialog.id
property - option
disableInputWhenNotNeeded
to disable input after messages withinputHint==='ignoringInput
These are configuration values you will get from Feedyou during WebChat implemenation phase.
DirectLine secret
is used for authenticationBot ID
is string in formatfeedbot-*
Bot name
will 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.js
instead 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
BotChat
component 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 bot
WebChat looks for following parameters in the URL when implemented on any page:
#feedbot-test-mode
setstestMode: true
into theuserData
object enables test mode in the chatbot for given user#feedbot-intro-dialog
overrides default bot dialog which is started when user opens webchat and also value set byintroDialog.id
in the webchat settings
WebChat is listening for following custom events on global window
object:
feedbot:trigger-dialog
starts selected dialog specified indialog
property ofCustomEvent
(for examplewindow.dispatchEvent(new CustomEvent('feedbot:trigger-dialog', { detail: 'package-status' }))
)feedbot:start-over
restarts conversation, which is the same behavior asstartOverTrigger
callback 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 [email protected] with any additional questions or comments. -->
© 2016 Microsoft Corporation