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.
| Sample Name | Description | Link |
|---|---|---|
| Migration | ||
00.migration/a.v3-to-v4 |
Demonstrates how to migrate from your Web Chat v3 bot to v4. | Migration Demo |
| Getting started | ||
01.getting-started/a.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.getting-started/b.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 |
01.getting-started/c.es5-bundle |
Introduces full-featured Web Chat embed with backwards compatibility for ES5 browsers using Web Chat's ES5 ponyfill. | ES5 Bundle Demo |
01.getting-started/d.es5-direct-line-speech |
Demonstrates how to use Direct Line Speech with ES5 bundle. | ES5 Direct Line Speech Demo |
01.getting-started/e.host-with-react |
Demonstrates how to create a React component that hosts the full-featured Web Chat. | Host with React Demo |
01.getting-started/f.host-with-angular |
Demonstrates how to create an Angular component that hosts the full-featured Web Chat. | Host with Angular Demo |
01.getting-started/g.hybrid-react-npm |
Demonstrates how to use different versions of React on a hosting app via NPM packages | Hybrid React Demo |
01.getting-started/h.minimal-markdown |
Demonstrates how to add the CDN for Markdown-It dependency on top of the minimal bundle. | Minimal with Markdown Demo |
01.getting-started/i.protocol-direct-line-app-service-extension |
Demonstrates how to use Direct Line App Service Extension chat adapter | Direct Line App Service Extension Demo |
01.getting-started/j.bundle-with-content-security-policy |
Demonstrates how to embed on a host with Content Security Policy configured. | Content Security Policy Demo |
01.getting-started/k.direct-line-token |
Demonstrates how to use a Direct Line token instead of exposing the Direct Line secret. | |
| Branding, styling, and customization | ||
02.branding-styling-and-customization/a.branding-web-chat |
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 |
02.branding-styling-and-customization/b.idiosyncratic-manual-styles |
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 |
02.branding-styling-and-customization/c.display-sender-initials |
Demonstrates how to display initials for both Web Chat participants. | Bot initials Demo |
02.branding-styling-and-customization/d.display-sender-images |
Demonstrates how to display images and initials for both Web Chat participants. | User images Demo |
02.branding-styling-and-customization/e.presentation-mode |
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 |
02.branding-styling-and-customization/f.hide-upload-button |
Demonstrates how to hide file upload button via styling. | Hide Upload Button Demo |
02.branding-styling-and-customization/g.change-locale |
Demonstrates how to change locale when an activity is received from the bot. | Change Locale Demo |
02.branding-styling-and-customization/h.send-timeout |
Demonstrates how to change timeout for outgoing messages. | Send Timeout Demo |
02.branding-styling-and-customization/i.change-locale-and-direction |
Demonstrates how to change locale and direction of the UI (RTL). | Change Direction Demo |
02.branding-styling-and-customization/j.activity-grouping |
Demonstrates how to customize activity grouping behavior. | Activity Grouping Demo (Comprehensive) |
02.branding-styling-and-customization/k.enable-emoji |
Demonstrates how to enable emoji autocorrect in the send box. | Enable Emoji Demo |
| Speech | ||
03.speech/a.direct-line-speech |
Demonstrates how to use Direct Line Speech channel in Web Chat. | Direct Line Speech Demo |
03.speech/b.cognitive-speech-services-js |
Introduces speech-to-text and text-to-speech ability using Cognitive Services Speech Services API. | Speech Services with JS Demo |
03.speech/c.cognitive-speech-services-with-lexical-result |
Demonstrates how to use lexical result from Cognitive Services Speech Services API. | Lexical Result Demo |
03.speech/d.cognitive-speech-services-speech-recognition-only |
Implement Cognitive Speech Services with only Speech Recognition. | Cognitive Speech: Speech Recognition |
03.speech/e.select-voice |
Demonstrates how to select speech synthesis voice based on activity. | Select Voice Demo |
03.speech/f.web-browser-speech |
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 |
03.speech/g.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 |
03.speech/h.select-audio-input-device |
Demonstrates how to select an audio input device. | Select Audio Input Device Demo (Comprehensive) |
| API | ||
04.api/a.welcome-event |
Advanced tutorial: Demonstrates how to send welcome event with client capabilities such as browser language. | Welcome Event Demo |
04.api/b.piggyback-on-outgoing-activities |
Advanced tutorial: Demonstrates how to add custom data to every outgoing activities. | Backchannel Piggybacking Demo |
04.api/c.incoming-activity-event |
Advanced tutorial: Demonstrates how to forward all incoming activities to a JavaScript event for further processing. | Incoming Activity Demo |
04.api/d.post-activity-event |
Advanced tutorial: Demonstrates how to send a message programmatically. | Programmatic Posting Demo |
04.api/e.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 |
04.api/f.selectable-activity |
Advanced tutorial: Demonstrates how to add custom click behavior to each activity. | Selectable Activity Demo |
04.api/g.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 |
04.api/h.clear-after-idle |
Advanced tutorial: Demonstrates how to customize the open URL behavior. | Clear After Idle Demo |
04.api/i.open-url |
Advanced tutorial: Demonstrates how to customize the open URL behavior. | Customize Open URL Demo |
04.api/j.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 |
04.api/k.telemetry-application-insights |
Advanced tutorial: Demonstrates how to collect telemetry measurement using Azure Application Insights. | Telemetry using Application Insights Demo |
04.api/l.telemetry-google-analytics |
Advanced tutorial: Demonstrates how to collect telemetry measurement using Google Analytics. | Telemetry using Google Analytics Demo |
04.api/m.enable-composition-mode |
Advanced tutorial: Demonstrates how to enable composition mode. | Telemetry using Google Analytics Demo |
04.api/n.save-restore-scroll-position |
Advanced tutorial: Demonstrates how to save and restore scroll position. | Telemetry using Google Analytics Demo |
| Custom components | ||
05.custom-components/a.timestamp-grouping |
Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time. | Timestamp Grouping Demo |
05.custom-components/b.send-typing-indicator |
Demonstrates how to send typing activity when the user start typing on the send box. | User Typing Indicator Demo |
05.custom-components/c.user-highlighting |
Demonstrates how to customize the styling of activities based whether the message is from the user or the bot. | User Highlighting Demo |
05.custom-components/d.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 |
05.custom-components/e.card-components |
Demonstrates how to create custom activity card attachments, in this case GitHub repository cards. | Card Components Demo |
05.custom-components/f.password-input |
Demonstrates how to create custom activity for password input. | Password Input Demo |
05.custom-components/g.activity-status |
Demonstrates how to customize the activity status by including sender's name. | Customize Activity Status Demo |
05.custom-components/i.notification |
Demonstrates how to use notification and customize the toast UI. | Notification Demo |
05.custom-components/j.typing-indicator |
Demonstrates how to customize the typing indicator. | Customize Typing Indicator Demo |
05.custom-components/k.per-message-avatar |
Demonstrates how to customize the avatar on a per-message basis. | Customize Avatar Demo (Comprehensive) |
| Recomposing UI | ||
06.recomposing-ui/a.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 |
06.recomposing-ui/b.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 |
06.recomposing-ui/c.smart-display |
Demonstrates how to compose Web Chat UI into a Smart Display | Smart Display Demo |
06.recomposing-ui/d.plain-ui |
Advanced tutorial: Demonstrates how to customize the Web Chat UI by building from ground up instead of needing to rewrite entire Web Chat components. | Plain UI Demo |
| Advanced Web Chat apps | ||
07.advanced-web-chat-apps/a.upload-to-azure-storage |
Demonstrates how to use upload attachments directly to Azure Storage | Upload to Azure Storage Demo |
07.advanced-web-chat-apps/b.sso-for-enterprise |
Demonstrates how to use single sign-on for enterprise single-page applications using OAuth | Single Sign-On for Enterprise Single-Page Applications Demo |
07.advanced-web-chat-apps/c.sso-for-intranet |
Demonstrates how to use single sign-on for Intranet apps using Azure Active Directory | Single Sign-On for Intranet Apps Demo |
07.advanced-web-chat-apps/d.sso-for-teams |
Demonstrates how to use single sign-on for Microsoft Teams apps using Azure Active Directory | Single Sign-On for Microsoft Teams Apps Demo |
07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication |
Demonstrates how to use on-behalf-of authentication in an enterprise application |