Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
01.a.getting-started-full-bundle Move to prettier! (#2038) Jun 3, 2019
01.b.getting-started-es5-bundle Move to prettier! (#2038) Jun 3, 2019
01.c.getting-started-migration Move to prettier! (#2038) Jun 3, 2019
02.a.getting-started-minimal-bundle Move to prettier! (#2038) Jun 3, 2019
02.b.getting-started-minimal-markdown Move to prettier! (#2038) Jun 3, 2019
03.a.host-with-react Move to prettier! (#2038) Jun 3, 2019
03.b.host-with-angular Move to prettier! (#2038) Jun 3, 2019
04.a.display-user-bot-initials-styling Move to prettier! (#2038) Jun 3, 2019
04.b.display-user-bot-images-styling Move to prettier! (#2038) Jun 3, 2019
05.a.branding-webchat-styling fix broken links (#2054) Jun 5, 2019
05.b.idiosyncratic-manual-styling Move to prettier! (#2038) Jun 3, 2019
05.c.presentation-mode-styling Move to prettier! (#2038) Jun 3, 2019
05.d.hide-upload-button-styling Move to prettier! (#2038) Jun 3, 2019
06.a.cognitive-services-bing-speech-js Move to prettier! (#2038) Jun 3, 2019
06.b.cognitive-services-bing-speech-react Move to prettier! (#2038) Jun 3, 2019
06.c.cognitive-services-speech-services-js Move to prettier! (#2038) Jun 3, 2019
06.d.speech-web-browser Move to prettier! (#2038) Jun 3, 2019
06.e.cognitive-services-speech-services-with-lexical-result Move to prettier! (#2038) Jun 3, 2019
06.f.hybrid-speech Move to prettier! (#2038) Jun 3, 2019
07.a.customization-timestamp-grouping Move to prettier! (#2038) Jun 3, 2019
07.b.customization-send-typing-indicator Move to prettier! (#2038) Jun 3, 2019
08.customization-user-highlighting Move to prettier! (#2038) Jun 3, 2019
09.customization-reaction-buttons Move to prettier! (#2038) Jun 3, 2019
10.a.customization-card-components Move to prettier! (#2038) Jun 3, 2019
10.b.customization-password-input Move to prettier! (#2038) Jun 3, 2019
11.customization-redux-actions Move to prettier! (#2038) Jun 3, 2019
12.customization-minimizable-web-chat Move to prettier! (#2038) Jun 3, 2019
13.customization-speech-ui Move to prettier! (#2038) Jun 3, 2019
14.customization-piping-to-redux Move to prettier! (#2038) Jun 3, 2019
15.a.backchannel-piggyback-on-outgoing-activities Move to prettier! (#2038) Jun 3, 2019
15.b.incoming-activity-event Move to prettier! (#2038) Jun 3, 2019
15.c.programmatic-post-activity Move to prettier! (#2038) Jun 3, 2019
15.d.backchannel-send-welcome-event Move to prettier! (#2038) Jun 3, 2019
16.customization-selectable-activity Move to prettier! (#2038) Jun 3, 2019
17.chat-send-history Move to prettier! (#2038) Jun 3, 2019
18.customization-open-url Move to prettier! (#2038) Jun 3, 2019
backend-cli Bump @babel dependencies (#1918) Apr 23, 2019
webchat-v3 Improve mobile UX of Web Chat via viewport meta tag (#1919) Apr 22, 2019
README.md Move to prettier! (#2038) Jun 3, 2019
index.css Documentation update (#1301) Nov 3, 2018
index.html Merge preview into master (#1277) Oct 31, 2018

README.md

Web Chat hosted samples

Here you can find all hosted samples of Web Chat. The source code repository can be found on GitHub.

These samples are connected to MockBot, a bot for testing various features of Web Chat. The source code of MockBot can be found on GitHub.

Samples list

               Sample Name                     Description Link
01.a.getting-started-full-bundle Introduces Web Chat embed from a CDN, and demonstrates a simple, full-featured Web Chat. This includes Adaptive Cards, Cognitive Services, and Markdown-It dependencies. Full Bundle Demo
01.b.getting-started-es5-bundle Introduces full-featured Web Chat embed with backwards compatibility for ES5 browsers using Web Chat's ES5 ponyfill. ES5 Bundle Demo
01.c.getting-started-migration Demonstrates how to migrate from your Web Chat v3 bot to v4. Migration Demo
02.a.getting-started-minimal-bundle Introduces the minimized CDN with only basic dependencies. This does NOT include Adaptive Cards, Cognitive Services dependencies, or Markdown-It dependencies. Minimal Bundle Demo
02.b.getting-started-minimal-markdown Demonstrates how to add the CDN for Markdown-It dependency on top of the minimal bundle. Minimal with Markdown Demo
03.a.host-with-react Demonstrates how to create a React component that hosts the full-featured Web Chat. Host with React Demo
03.b.host-with-Angular Demonstrates how to create an Angular component that hosts the full-featured Web Chat. Host with Angular Demo
04.a.display-user-bot-initials-styling Demonstrates how to display initials for both Web Chat participants. Bot initials Demo
04.b.display-user-bot-images-styling Demonstrates how to display images and initials for both Web Chat participants. User images Demo
05.a.branding-webchat-styling Introduces the ability to style Web Chat to match your brand. This method of custom styling will not break upon Web Chat updates. Branding Web Chat Demo
05.b.idiosyncratic-manual-styling Demonstrates how to make manual style changes, and is a more complicated and time-consuming way to customize styling of Web Chat. Manual styles may be broken upon Web Chat updates. Idiosyncratic Styling Demo
05.c.presentation-mode-styling Demonstrates how to set up Presentation Mode, which displays chat history but does not show the send box, and disables the interactivity of Adaptive Cards. Presentation Mode Demo
05.d.hide-upload-button-styling Demonstrates how to hide file upload button via styling. Hide Upload Button Demo
06.a.cognitive-services-bing-speech-js Introduces speech-to-text and text-to-speech ability using the (deprecated) Cognitive Services Bing Speech API and JavaScript. Bing Speech with JS Demo
06.b.cognitive-services-bing-speech-react Introduces speech-to-text and text-to-speech ability using the (deprecated) Cognitive Services Bing Speech API and React. Bing Speech with React Demo
06.c.cognitive-services-speech-services-js Introduces speech-to-text and text-to-speech ability using Cognitive Services Speech Services API. Speech Services with JS Demo
06.d.speech-web-browser Demonstrates how to implement text-to-speech using Web Chat's browser-based Web Speech API. (link to W3C standard in the sample) Web Speech API Demo
06.e.cognitive-services-speech-services-with-lexical-result Demonstrates how to use lexical result from Cognitive Services Speech Services API. Lexical Result Demo
06.f.hybrid-speech Demonstrates how to use both browser-based Web Speech API for speech-to-text, and Cognitive Services Speech Services API for text-to-speech. Hybrid Speech Demo
07.a.customization-timestamp-grouping Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time. Timestamp Grouping Demo
07.b.customization-send-typing-indicator Demonstrates how to send typing activity when the user start typing on the send box. User Typing Indicator Demo
08.customization-user-highlighting Demonstrates how to customize the styling of activities based whether the message is from the user or the bot. User Highlighting Demo
09.customization-reaction-buttons Introduces the ability to create custom components for Web Chat that are unique to your bot's needs. This tutorial demonstrates the ability to add reaction emoji such as 👍 and 👎 to conversational activities. Reaction Buttons Demo
10.a.customization-card-components Demonstrates how to create custom activity card attachments, in this case GitHub repository cards. Card Components Demo
10.b.customization-password-input Demonstrates how to create custom activity for password input. Password Input Demo
11.customization-redux-actions Advanced tutorial: Demonstrates how to incorporate redux middleware into your Web Chat app by sending redux actions through the bot. This example demonstrates manual styling based on activities between bot and user. Redux Actions Demo
12.customization-minimizable-web-chat Advanced tutorial: Demonstrates how to add the Web Chat interface to your website as a minimizable show/hide chat box. Minimizable Web Chat Demo
13.customization-speech-ui Advanced tutorial: Demonstrates how to fully customize key components of your bot, in this case speech, which entirely replaces the text-based transcript UI and instead shows a simple speech button with the bot's response. Speech UI Demo
14.customization-piping-to-redux Advanced tutorial: Demonstrates how to pipe bot activities to your own Redux store and use your bot to control your page through bot activities and Redux. Piping to Redux Demo
15.a.backchannel-piggyback-on-outgoing-activities Advanced tutorial: Demonstrates how to add custom data to every outgoing activities. Backchannel Piggybacking Demo
15.b.incoming-activity-event Advanced tutorial: Demonstrates how to forward all incoming activities to a JavaScript event for further processing. Incoming Activity Demo
15.c.programmatic-post-activity Advanced tutorial: Demonstrates how to send a message programmatically. Programmatic Posting Demo
15.d.backchannel-send-welcome-event Advanced tutorial: Demonstrates how to send welcome event with client capabilities such as browser language. Welcome Event Demo
16.customization-selectable-activity Advanced tutorial: Demonstrates how to add custom click behavior to each activity. Selectable Activity Demo
17.chat-send-history Advanced tutorial: Demonstrates the ability to save user input and allow the user to step back through previous sent messages. Chat Send History Demo
18.customization-open-url Advanced tutorial: Demonstrates how to customize the open URL behavior. Customize Open URL Demo
You can’t perform that action at this time.