Skip to content
A highly-customizable web-based client for Azure Bot Services.
Branch: master
Clone or download
compulim Should not stop after first spoken text (#2016)
* Should not stop after first spoken text

* Add entry
Latest commit 9e5288a May 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update CONTRIBUTING.md May 9, 2019
.vscode Merge preview into master (#1277) Oct 31, 2018
__tests__ Fixed textarea overflow (#1986) May 20, 2019
media Clean up media files (#1975) May 9, 2019
packages Should not stop after first spoken text (#2016) May 22, 2019
samples Bump lerna (#1989) May 15, 2019
scripts Revert to before removing history. May 1, 2019
.babelrc Updated Test Infrastructure (#1781) Mar 6, 2019
.dockerignore Merge preview into master (#1277) Oct 31, 2018
.eslintrc.yml Add static code analysis (#1970) May 13, 2019
.gitignore udpates for //build May 5, 2019
.travis.yml More test reliability (#1717) Feb 12, 2019
CHANGELOG.md Should not stop after first spoken text (#2016) May 22, 2019
Dockerfile-playground Use locally built files (#1642) Jan 26, 2019
Dockerfile-testharness Add visual regression test and code coverage report (#1323) Nov 8, 2018
LICENSE Merge preview into master (#1277) Oct 31, 2018
LOCALIZATION.md Update pt-PT.js (#2005) May 21, 2019
POC.md Merge preview into master (#1277) Oct 31, 2018
README.md Update build badge (#1957) May 13, 2019
SAMPLES.md Fix SAMPLES.md (#2003) May 20, 2019
babel-jest-config.js Updated Test Infrastructure (#1781) Mar 6, 2019
docker-compose.yml Improve test harness (#1646) Jan 28, 2019
lerna.json add chat send history sample (#1678) Feb 4, 2019
package-lock.json 4.4.2-0 (#1996) May 16, 2019
package.json 4.4.2-0 (#1996) May 16, 2019
serve.json Add roles to various components of Web Chat (#1462) Dec 12, 2018

README.md

Bot Framework Web Chat

Click here to find out what's new for //build2019!

Bot Framework Web Chat

npm version Build Status Coverage Status

This repository contains code for the Bot Framework Web Chat component. The Bot Framework Web Chat component is a highly-customizable web-based client for the Bot Framework V4 SDK. The Bot Framework SDK v4 enable developers to model conversation and build sophisticated bot applications.

This repo is part of the Microsoft Bot Framework - a comprehensive framework for building enterprise-grade conversational AI experiences.

Migrating from Web Chat v3 to v4

There are three possible paths that migration might take when migrating from v3 to v4. First, please compare your beginning scenario:

My current website integrates Web Chat using an <iframe> element obtained from Azure Bot Services. I want to upgrade to v4.

Starting from May 2019, we are rolling out v4 to websites that integrate Web Chat using <iframe> element. Please refer to the embed documentation for information on integrating Web Chat using <iframe>.

My website is integrated with Web Chat v3 and uses customization options provided by Web Chat, no customization at all, or very little of my own customization that was not available with Web Chat.

Please follow the implementation of sample 01.c.getting-started-migration to convert your webpage from v3 to v4 of Web Chat.

My website is integrated with a fork of Web Chat v3. I have implemented a lot of customization in my version of Web Chat, and I am concerned v4 is not compatible with my needs.

One of our team's favorite things about v4 of Web Chat is the ability to add customization without the need to fork Web Chat. Although this creates additional overhead for v3 users who forked Web Chat previously, we will do our best to support customers making the bump. Please use the following suggestions:

  • Take a look at the implementation of sample 01.c.getting-started-migration. This is a great starting place to get Web Chat up and running.
  • Next, please go through the samples list to compare your customization requirements to what Web Chat has already provided support for. These samples are made up of commonly asked-for features for Web Chat.
  • If one or more of your features is not available in the samples, please look through our open and closed issues, Samples label, and the Migration Support label to search for sample requests and/or customization support for a feature you are looking for. Adding your comment to open issues will help the team prioritize requests that are in high demand, and we encourage participation in our community.
  • If you did not find your feature in the list of open requests, please feel free to file your own request. Just like the item above, other customers adding comments to your open issue will help us prioritize which features are most commonly needed across Web Chat users.
  • Finally, if you need your feature as soon as possible, we welcome pull requests to Web Chat. If you have the coding experience to implement the feature yourself, we would very much appreciate the additional support! Creating the feature yourself will mean that it is available for your use on Web Chat more quickly, and that other customers looking for the same or similar feature may utilize your contribution.
  • Make sure to check out the rest of this README to learn more about v4.

How to use

For previous versions of Web Chat (v3), visit the Web Chat v3 branch.

First, create a bot using Azure Bot Service. Once the bot is created, you will need to obtain the bot's Web Chat secret in Azure Portal. Then use the secret to generate a token and pass it to your Web Chat.

Here is how how you can add Web Chat control to your website:

<!DOCTYPE html>
<html>
  <body>
    <div id="webchat" role="main"></div>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),
        userID: 'YOUR_USER_ID',
        username: 'Web Chat User',
        locale: 'en-US',
        botAvatarInitials: 'WC',
        userAvatarInitials: 'WW'
      }, document.getElementById('webchat'));
    </script>
  </body>
</html>

userID, username, locale, botAvatarInitials, and userAvatarInitials are all optional parameters to pass into the renderWebChat method. To learn more about Web Chat props, look at the Web Chat API Reference section of this README. Screenshot of Web Chat

Integrate with JavaScript

Web Chat is designed to integrate with your existing website using JavaScript or React. Integrating with JavaScript will give you moderate styling and customizability.

You can use the full, typical webchat package that contains the most typically used features.

<!DOCTYPE html>
<html>
  <body>
    <div id="webchat" role="main"></div>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),
        userID: 'YOUR_USER_ID'
      }, document.getElementById('webchat'));
    </script>
  </body>
</html>

See the working sample of the full Web Chat bundle.

Integrate with React

For full customizability, you can use React to recompose components of Web Chat.

To install the production build from NPM, run npm install botframework-webchat.

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } userID="YOUR_USER_ID" />
      element
    );
  }
}

You can also run npm install botframework-webchat@master to install a development build that is synced with Web Chat's GitHub master branch.

See a working sample of Web Chat rendered via React.

Customize Web Chat UI

Web Chat is designed to be customizable without forking the source code. The table below outlines what kind of customizations you can achieve when you are importing Web Chat in different ways. This list is not exhaustive.

CDN bundle React
Change colors ✔️ ✔️
Change sizes ✔️ ✔️
Update/replace CSS styles ✔️ ✔️
Listen to events ✔️ ✔️
Interact with hosting webpage ✔️ ✔️
Custom render activities ✔️
Custom render attachments ✔️
Add new UI components ✔️
Recompose the whole UI ✔️

See more about customizing Web Chat to learn more on customization.

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

Web Chat API Reference

There are several properties that you might pass into your Web Chat React Component (<ReactWebChat>) or the renderWebChat() method. Feel free to examine the source code starting with packages/component/src/Composer.js. Below is a short description of the available props.

Property Description
activityMiddleware A chain of middleware, modeled after Redux middleware, that allows the developer to add new DOM components on the currently existing DOM of Activities. The middleware signature is the following: options => next => card => children => next(card)(children).
activityRenderer The "flattened" version of activityMiddleware, similar to the store enhancer concept in Redux.
adaptiveCardHostConfig Pass in a custom Adaptive Cards host config.
attachmentMiddleware A chain of middleware that allows the developer to add their own custom HTML Elements on attachments. The signature is the following: options => next => card => next(card).
attachmentRenderer The "flattened" version of attachmentMiddleware.
cardActionMiddleware A chain of middleware that allows the developer to modify card actions, like Adaptive Cards or suggested actions. The middleware signature is the following: cardActionMiddleware: () => next => ({ cardAction, getSignInUrl }) => next(cardAction)
createStore A chain of middleware that allows the developer to modify the store actions. The middleware signature is the following: createStore: ({}, ({ dispatch }) => next => action => next(cardAction)
directLine Specify the DirectLine object with DirectLine token.
disabled Disable the UI (i.e. for presentation mode) of Web Chat.
grammars Specify a grammar list for Speech (Bing Speech or Cognitive Services Speech Services).
groupTimeStamp Change default settings for timestamp groupings.
locale Indicate the default language of Web Chat. Four letter codes (such as en-US) are strongly recommended.
renderMarkdown Change the default Markdown renderer object.
sendTypingIndicator Display a typing signal from the user to the bot to indicate that the user is not idling.
store Specify a custom store, e.g. for adding programmatic activity to the bot.
styleOptions Object that stores customization values for your styling of Web Chat. For the complete list of (frequently updated) default style options, please see the defaultStyleSetOptions.js file.
styleSet The non-recommended way of overriding styles.
userID Specify a userID. There are two ways to specify the userID: in props, or in the token when generating the token call (createDirectLine()). If both methods are used to specify the userID, the token userID property will be used, and a console.warn will appear during runtime. If the userID is provided via props but is prefixed with 'dl', e.g. 'dl_1234', the value will be thrown and a new ID generated. If userID is not specified, it will default to a random user ID. Multiple users sharing the same user ID is not recommended; their user state will be shared.
username Specify a username.
webSpeechPonyFillFactory Specify the Web Speech object for text-to-speech and speech-to-text.

Contributing

See our Contributing page for details on how to build the project and our repository guidelines for Pull Requests.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Reporting Security Issues

Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at secure@microsoft.com. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the MSRC PGP key, can be found in the Security TechCenter.

Copyright (c) Microsoft Corporation. All rights reserved.

You can’t perform that action at this time.