You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CHANGELOG.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -87,6 +87,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
87
87
-`component`: Use Speech Services token for [speech UI sample](https://microsoft.github.io/BotFramework-WebChat/13.customization-speech-ui/), in [#1634](https://github.com/Microsoft/BotFramework-WebChat/pull/1634)
88
88
-`component`: [Selectable Activity](https://microsoft.github.io/BotFramework-WebChat/16.customization-selectable-activity/), in [#1624](https://github.com/Microsoft/BotFramework-WebChat/pull/1624)
89
89
-`component`: [Chat Send History](https://microsoft.github.io/BotFramework-WebChat/17.chat-send-history/), in [#1678](https://github.com/Microsoft/BotFramework-WebChat/pull/1678)
90
+
-`*`: Update `README.md`'s for samples 05-10 [#1444](https://github.com/Microsoft/BotFramework-WebChat/issues/1444) and improve accessibility of anchors [#1681](https://github.com/Microsoft/BotFramework-WebChat/issues/1681), by [@corinagum](https://github.com/corinagum) in PR [#1710](https://github.com/Microsoft/BotFramework-WebChat/pull/1710)
Copy file name to clipboardExpand all lines: SAMPLES.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,17 +6,17 @@ Follow the instructions on the [README.md](README.md) page to integrate the Web
6
6
7
7
The latest version of Web Chat control provides rich customization options: you can change colors, sizes, placement of elements, add custom elements, and interact with the hosting webpage. Below are several examples of how to customize those elements of the Web Chat UI.
8
8
9
-
You can find the full list of all settings that the Web Chat control understands [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/packages/component/src/Styles/defaultStyleSetOptions.js).
9
+
You can find the full list of all settings that you can easily modify in Web Chat on the [`defaultStyleSetOptions.js` file](https://github.com/Microsoft/BotFramework-WebChat/tree/master/packages/component/src/Styles/defaultStyleSetOptions.js).
10
10
11
-
These settings will generate a *style set*, which is a set of CSS rules enhanced with [glamor](https://github.com/threepointone/glamor). You can find the full list of CSS styles generated in the style set [here](https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/createStyleSet.js).
11
+
These settings will generate a *style set*, which is a set of CSS rules enhanced with [glamor](https://github.com/threepointone/glamor). You can find the full list of CSS styles generated in the style set on the [`createStyleSet.js` file](https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/createStyleSet.js).
12
12
13
13
## Change font or color
14
14
15
15
Instead of using the default background color and the fonts used inside of the chat bubbles, you can customize those to match the style of the target web page. The code snippet below allows you to change the background color of messages from the user and from the bot.
16
16
17
17
<imgalt="Screenshot with custom style options"src="https://raw.githubusercontent.com/Microsoft/BotFramework-WebChat/master/doc/sample-custom-style-options.png"width="396" />
18
18
19
-
If you need to do some simple styling, you can set them thru`styleOptions`. Style options are set of predefined styles that you can modify directly, and Web Chat will compute the whole stylesheet based on it.
19
+
If you need to do some simple styling, you can set them via`styleOptions`. Style options are set of predefined styles that you can modify directly, and Web Chat will compute the whole stylesheet based on it.
20
20
21
21
```html
22
22
<!DOCTYPE html>
@@ -164,7 +164,7 @@ ReactDOM.render(
164
164
);
165
165
```
166
166
167
-
The full sample can be found at [/samples/10.customization-card-components/](samples/10.customization-card-components/).
167
+
The full sample can be found at [/samples/10.a.customization-card-components/](samples/10.a.customization-card-components/).
168
168
169
169
In this sample, we are adding a new React component called `GitHubRepositoryAttachment`:
Then, we create a middleware that will render the new React component when the bot send attachment of content type `application/vnd.microsoft.botframework.samples.github-repository`. Otherwise, it will continue on the middleware by calling `next(card)`.
181
+
Then, we create a middleware that will render the new React component when the bot sends an attachment of content type `application/vnd.microsoft.botframework.samples.github-repository`. Otherwise, it will continue on the middleware by calling `next(card)`.
Copy file name to clipboardExpand all lines: samples/01.a.getting-started-full-bundle/README.md
+6-7Lines changed: 6 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -110,8 +110,7 @@ Here is the finished `index.html`:
110
110
<style>
111
111
+ html, body { height: 100% }
112
112
+ body { margin: 0 }
113
-
+ #webchat,
114
-
+ #webchat > * {
113
+
+ #webchat {
115
114
+ height: 100%;
116
115
+ width: 100%;
117
116
+ }
@@ -141,14 +140,14 @@ Here is the finished `index.html`:
141
140
142
141
Check out the hosted samples and source code for other CDN bundle options below.
143
142
144
-
-[Full bundle with polyfills for ES5 browsers](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)
-[Minimal bundle with Markdown](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
143
+
-[Full bundle with polyfills for ES5 browsers bot](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle) | [(Full bundle with polyfills for ES5 browsers source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)
-[Minimal bundle with Markdown bot](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(Minimal bundle with Markdown source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
147
146
148
147
## CDN sunburst chart
149
148
150
-
[This chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) provides a visual of the contents of the various Web Chat bundles
149
+
[Web Chat bundles sunburst chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) - provides a visual of the contents of the various Web Chat bundles
151
150
152
151
## Full list of Web Chat hosted samples
153
152
154
-
View the list of available samples by clicking [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
153
+
View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
Copy file name to clipboardExpand all lines: samples/01.b.getting-started-es5-bundle/README.md
+9-10Lines changed: 9 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# Sample - Getting started with Web Chat CDN with ES5 polyfills
1
+
# Sample - Getting Started with Web Chat CDN with ES5 Polyfills
2
2
3
3
> This is a great sample for first-time Web Chat users developing bots that must work on Internet Explorer 11.
4
4
@@ -70,8 +70,7 @@ Here is the finished `index.html`:
70
70
html, body { height: 100% }
71
71
body { margin: 0 }
72
72
73
-
#webchat,
74
-
#webchat > * {
73
+
#webchat {
75
74
height: 100%;
76
75
width: 100%;
77
76
}
@@ -103,20 +102,20 @@ Here is the finished `index.html`:
103
102
104
103
# Further reading
105
104
105
+
-[Learn more about polyfills](https://stackoverflow.com/questions/7087331/what-is-the-meaning-of-polyfills-in-html5)
106
+
106
107
## Other CDN bundles
107
108
108
109
Check out the hosted samples and source code for other CDN bundle options below.
-[Minimal bundle with Markdown](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
113
-
114
-
-[Learn more about polyfills](https://stackoverflow.com/questions/7087331/what-is-the-meaning-of-polyfills-in-html5)
-[Minimal bundle with Markdown bot](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(Minimal bundle source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
115
114
116
115
## CDN sunburst chart
117
116
118
-
[This chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) provides a visual of the contents of the various Web Chat bundles
117
+
[Web Chat bundles sunburst chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) - provides a visual of the contents of the various Web Chat bundles
119
118
120
119
## Full list of Web Chat hosted samples
121
120
122
-
View the list of available samples by clicking [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
121
+
View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
Copy file name to clipboardExpand all lines: samples/01.c.getting-started-migration/README.md
+7-18Lines changed: 7 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ A simple web page with a maximized and full-featured Web Chat embed from a CDN.
7
7
# Test out the hosted sample
8
8
9
9
-[Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle)
10
-
> Although there are two separate samples, one named `full-bundle` and the other named `migration`, the end-result HTML is exactly the same. Therefore, the `migration` sample links to the same `full-bundle` bot.
10
+
> Although there are two separate samples, one named `full-bundle` and the other named `migration`, the end-result HTML is exactly the same. Therefore, the `migration` sample links to the same `full-bundle` bot.
11
11
12
12
# How to run locally
13
13
@@ -37,7 +37,7 @@ The `index.html` page in the migration directory has two main goals.
37
37
- To import the Web Chat v4 full bundle CDN script
38
38
- To render Web Chat using the v4 best practices
39
39
40
-
We'll start by using our old v3 `index.html` as our starting point.
40
+
We'll start by using our old v3 `index.html` as our starting point.
41
41
```html
42
42
<!DOCTYPE html>
43
43
<htmllang="en-US">
@@ -69,7 +69,7 @@ Our first change is to update the CDN the webpage uses from v3 to v4.
Check out the hosted samples and source code for other CDN bundle options below.
183
-
184
-
-[Full bundle with polyfills for ES5 browsers](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)
-[Minimal bundle with Markdown](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
187
-
188
-
## CDN sunburst chart
189
-
190
-
[This chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) provides a visual of the contents of the various Web Chat bundles
191
180
192
181
## Full list of Web Chat hosted samples
193
182
194
-
View the list of available samples by clicking [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
183
+
View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
Copy file name to clipboardExpand all lines: samples/02.a.getting-started-minimal-bundle/README.md
+22Lines changed: 22 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,6 +8,10 @@ A simple web page with a maximized Web Chat and minimal additional components. T
8
8
- Cognitive Services Bing Speech
9
9
- Markdown-It
10
10
11
+
# Test out the hosted sample
12
+
-[Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle)
13
+
14
+
11
15
# How to run
12
16
13
17
- Fork this repository
@@ -88,3 +92,21 @@ Here is the finished `index.html`:
88
92
</body>
89
93
</html>
90
94
```
95
+
96
+
# Further reading
97
+
98
+
## Other CDN bundles
99
+
100
+
Check out the hosted samples and source code for other CDN bundle options below.
-[Full bundle with polyfills for ES5 browsers bot](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle) | [(Full bundle with polyfills for ES5 browsers source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)
104
+
-[Minimal bundle with Markdown bot](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(Minimal bundle with Markdown source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
105
+
106
+
## CDN sunburst chart
107
+
108
+
[Web Chat bundles sunburst chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) - provides a visual of the contents of the various Web Chat bundles
109
+
110
+
## Full list of Web Chat hosted samples
111
+
112
+
View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
0 commit comments