Skip to content

Commit 09170ce

Browse files
janbadurajanbadura
authored
Merge branch 'master' into feature/skoda
2 parents f6e36a4 + c019577 commit 09170ce

38 files changed

+2068
-9667
lines changed

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*

‎README.md

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
11
# Feedyou fork of Microsoft Bot Framework WebChat
22

33
Embeddable web chat control for the [Microsoft Bot Framework](http://www.botframework.com) using the [DirectLine](https://docs.botframework.com/en-us/restapi/directline3/) API. This repo is customized fork of [BotBuilder-WebChat](https://github.com/Microsoft/BotFramework-WebChat) by [Feedyou](https://feedyou.agency). This features were added by Feedyou in comparsion with `BotBuilder-WebChat`:
4-
* show typing indicator on startup until the first message is recieved
5-
* increase typing indicator timeout from 3 to 20 seconds
6-
* show `imBack` buttons only for the last activity
7-
* send backchannel event on startup which could be used instead of `conversationUpdate` event
8-
* ability to pass some `userData` to bot using backchannel mechanism's `channelData` prop
9-
* preset some default values in `<App>` component - for example generate `user.id` if not set
10-
* support custom button click trigger for restarting conversation (`startOverTrigger` prop)
11-
* make emoticons compatible using [Twemoji](https://github.com/twitter/twemoji)
12-
* configurable style themes (currently only `theme.mainColor` prop)
13-
* auto show upload button when `inputHint` property of last incoming activity was `expectingUpload`
14-
* force intro dialog ID using `introDialog.id` property
15-
* option `disableInputWhenNotNeeded` to disable input after messages with `inputHint==='ignoringInput`
4+
5+
- show typing indicator on startup until the first message is recieved
6+
- increase typing indicator timeout from 3 to 20 seconds
7+
- show `imBack` buttons only for the last activity
8+
- send backchannel event on startup which could be used instead of `conversationUpdate` event
9+
- ability to pass some `userData` to bot using backchannel mechanism's `channelData` prop
10+
- preset some default values in `<App>` component - for example generate `user.id` if not set
11+
- support custom button click trigger for restarting conversation (`startOverTrigger` prop)
12+
- make emoticons compatible using [Twemoji](https://github.com/twitter/twemoji)
13+
- configurable style themes (currently only `theme.mainColor` prop)
14+
- auto show upload button when `inputHint` property of last incoming activity was `expectingUpload`
15+
- force intro dialog ID using `introDialog.id` property
16+
- option `disableInputWhenNotNeeded` to disable input after messages with `inputHint==='ignoringInput`
1617

1718
## How to add Web Chat to your website
1819

1920
### What you will get from Feedyou
21+
2022
These are configuration values you will get from Feedyou during WebChat implemenation phase.
2123

22-
* `DirectLine secret` is used for authentication
23-
* `Bot ID` is string in format `feedbot-*`
24-
* `Bot name` will be shown as author name of messages from bot
24+
- `DirectLine secret` is used for authentication
25+
- `Bot ID` is string in format `feedbot-*`
26+
- `Bot name` will be shown as author name of messages from bot
2527

2628
Please paste these values to places marked by `...` in examples.
2729

2830
### What you will need to do on your website
2931

30-
Include `botchat.css`, `botchat-es5.js` (from our https://feedyou.azureedge.net/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.
32+
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.
3133

3234
```HTML
3335
<!DOCTYPE html>
3436
<html>
3537
<head>
36-
<link href="https://feedyou.azureedge.net/webchat/latest/botchat.css" rel="stylesheet" />
38+
<link href="https://cdn.feedyou.ai/webchat/latest/botchat.css" rel="stylesheet" />
3739
</head>
3840
<body>
39-
<script src="https://feedyou.azureedge.net/webchat/latest/botchat-es5.js"></script>
41+
<script src="https://cdn.feedyou.ai/webchat/latest/botchat-es5.js"></script>
4042
<script>
4143
BotChat.App({
42-
directLine: { secret: '...' },
44+
directLine: { secret: '...' },
4345
bot: { id: 'feedbot-...', name: '...' }
4446
theme: { mainColor: "#e51836" },
4547
header: { text: "Chatbot", textWhenCollapsed: "Click for chatbot!" }
@@ -53,13 +55,15 @@ Include `botchat.css`, `botchat-es5.js` (from our https://feedyou.azureedge.net/
5355
> If you don't want to use polyfills for older browsers, you can use `botchat.js` instead of default `botchat-es5.js`.
5456
5557
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:
56-
- [/samples/feedyou/code.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/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
57-
- [/samples/feedyou/embed.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/samples/feedyou/embed.html) when you want to embed bot into given element of your page
58-
- [/samples/feedyou/expandable.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/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)
59-
- [/samples/feedyou/full.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/samples/feedyou/full.html) when webchat should be the main element on the page
60-
- [/samples/feedyou/persistent.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/samples/feedyou/persistent.html) special configuration which allows to persist bot history between page reloads (by disabling WebSocket and using HTTP pooling instead)
61-
58+
59+
- [/samples/feedyou/code.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/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
60+
- [/samples/feedyou/embed.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/samples/feedyou/embed.html) when you want to embed bot into given element of your page
61+
- [/samples/feedyou/expandable.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/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)
62+
- [/samples/feedyou/full.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/samples/feedyou/full.html) when webchat should be the main element on the page
63+
- [/samples/feedyou/persistent.html](https://github.com/wearefeedyou/feedbot-webchat/blob/master/samples/feedyou/persistent.html) special configuration which allows to persist bot history between page reloads (by disabling WebSocket and using HTTP pooling instead)
64+
6265
#### Advanced configuration
66+
6367
You can use following optional settings during `BotChat.App` call:
6468

6569
```javascript
@@ -77,7 +81,8 @@ directLine: {
7781
webSocket?: boolean = true
7882
},
7983
theme?: {
80-
mainColor?: string
84+
mainColor?: string,
85+
enableScreenshotUpload?: boolean
8186
},
8287
header?: {
8388
text?: string,
@@ -86,12 +91,13 @@ header?: {
8691
introDialog?: {
8792
id?: string // overrides default bot dialog which is started when user opens webchat
8893
},
89-
locale?: 'cs' | 'en' | 'sk' | 'sr' | 'hu' = 'cs',
94+
locale?: 'cs' | 'en' | 'sk' | 'sr' | 'hu' = 'cs',
9095
userData?: object, // allows to preset some data we already know about user (email, phone, etc.)
9196
startOverTrigger?: (trigger: () => void) => void, // can be used to binding onclick event on element which can be used to restart conversation
9297
onConversationStarted?: (callback: (conversationId: string) => void) => void, // can be used to store conversationId for new conversations (useful for history persistence)
9398
disableInputWhenNotNeeded?: boolean = false, // disables input after messages with `inputHint==='ignoringInput`
9499
autoExpandTimeout?: number = null // auto expand in milliseconds (only in case when no element specified as second argument of BotChat.App())
100+
openUrlTarget?: 'new' | 'same' | 'same-domain' // allows to change target of opening URLs from bot
95101
```
96102

97103
<!---
@@ -106,11 +112,23 @@ autoExpandTimeout?: number = null // auto expand in milliseconds (only in case w
106112
-->
107113

108114
### URL parameters
115+
109116
WebChat looks for following parameters in the URL when implemented on any page:
110-
* `#feedbot-test-mode` sets `testMode: true` into the `userData` object enables test mode in the chatbot for given user
111-
* `#feedbot-intro-dialog` overrides default bot dialog which is started when user opens webchat and also value set by `introDialog.id` in the webchat settings
117+
118+
- `#feedbot-test-mode` sets `testMode: true` into the `userData` object enables test mode in the chatbot for given user
119+
- `#feedbot-intro-dialog` overrides default bot dialog which is started when user opens webchat and also value set by `introDialog.id` in the webchat settings
120+
121+
### Window events
122+
123+
WebChat is listening for following custom events on global `window` object:
124+
125+
- `feedbot:trigger-dialog` starts selected dialog specified in `dialog` property of `CustomEvent` (for example `window.dispatchEvent(new CustomEvent('feedbot:trigger-dialog', { detail: 'package-status' }))`)
126+
- `feedbot:start-over` restarts conversation, which is the same behavior as `startOverTrigger` callback in config above (for example `window.dispatchEvent(new CustomEvent('feedbot:start-over'))`)
127+
128+
If support of Internet Explorer is required, please provide use [fallback](https://gomakethings.com/custom-events-in-internet-explorer-with-vanilla-js/) to support custom event creation there.
112129

113130
### Advanced customization
131+
114132
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](https://github.com/wearefeedyou/feedbot-webchat/blob/master/README-ADVANCED.md) or contact [Feedyou](mailto:[email protected]) directly.
115133

116134
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [[email protected]](mailto:[email protected]) with any additional questions or comments.

0 commit comments

Comments
 (0)