Nostradamus Predicting Maelstroms
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

botframework-webchat

4.1.0 • Public • Published

Azure Bot Services logo

A highly-customizable web-based client for Azure Bot Services.

npm version Build Status

How to use

For previous versions of Web Chat (v3), you can find it here.

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 to use in the code below.

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

<!DOCTYPE html>
<html>
  <body>
    <div id="webchat"></div>
    <script src="https://cdn.botframework.com/botframework-webchat/master/botchat.js"></script> 
    <script>
      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: 'YOUR_BOT_SECRET_FROM_AZURE_PORTAL' })
      }, document.getElementById('webchat'));
    </script> 
  </body>
</html>

Screenshot of Web Chat

Integrate with JavaScript

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

Full bundle

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

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

See a working sample with full Web Chat bundle here.

Minimal bundle

Instead of using the full, typical package of Web Chat, you can choose a lighter-weight sample with fewer features. This bundle does not contain:

  • Adaptive Cards
  • Cognitive Services
  • Markdown-It

Since Adaptive Cards is not include in this bundle, rich cards that depends on Adaptive Cards will not render, e.g. hero card, receipt card, etc. List of attachments that are not supported without Adaptive Cards can be found here.

See a working sample with minimal Web Chat bundle here.

<!DOCTYPE html>
<html>
  <body>
    <div id="webchat"></div>
    <script src="https://cdn.botframework.com/botframework-webchat/master/botchat-minimal.js"></script> 
    <script>
      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: 'YOUR_BOT_SECRET' })
      }, document.getElementById('webchat'));
    </script> 
  </body>
</html>

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_BOT_SECRET' });
  }
 
  render() {
    return (
      <ReactWebChat directLine={ this.directLine } />
      element
    );
  }
}

You can also run npm install botframework-webchat@master to install a development build that sync with GitHub master branch.

See a working sample with Web Chat rendered by React here.

Customize Web Chat UI

The new 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. See more about customizing Web Chat.

Contributions

Like us? Star us.

Want to make it better? File us an issue.

Don't like something you see? Submit a pull request.

Keywords

none

install

npm i botframework-webchat

Downloadsweekly downloads

51,610

version

4.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability