Web Chat hosted samples
August 7, 2025 ยท View on GitHub
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 |
|---|---|---|
| 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/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 | ||
01.getting-started/l.sharepoint-web-part | ||
| 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) |
03.speech/i.initial-silence-timeout | Demonstrates how to configure initial silence timeout. | Configurable Initial Silence Timeout Demo |
| 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. | Save and Restore Scroll Position 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 :thumbsup: and :thumbsdown: 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 |
06.recomposing-ui/e.extending-ui | Advanced tutorial: Demonstrates how to customize the Web Chat UI by extending the default UI. | Extending UI Demo |
| Advanced Web Chat apps (Archived) | ||
07.advanced-web-chat-apps/a.upload-to-azure-storage | ||
07.advanced-web-chat-apps/b.sso-for-enterprise | ||
07.advanced-web-chat-apps/c.sso-for-intranet | ||
07.advanced-web-chat-apps/d.sso-for-teams | ||
07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication |