Skip to content

Latest commit

 

History

History
 
 

70.styling-webchat

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

styling webchat sample

Bot Framework v4 styling webchat sample

This sample shows how to create a web page with customized Web Chat component.

Screenshot of styled Web Chat

You will need to obtain bot secret from a bot hosted on Azure Bot Services. You can follow this article to get the bot secret key.

To communicate with your bot securely, you will need to obtain a token from your implemented token server. To learn more about the differences between secrets and tokens, and to understand the risks associated with using secrets, read the article on authentication. For simplicity, this sample does not show an implementation of a token server.

  • Clone this repository

    git clone https://github.com/Microsoft/BotBuilder-Samples.git
  • In a terminal,

    cd samples/javascript_es6/70.styling-webchat
  • In index.html, put your bot secret key by replacing YOUR_BOT_SECRET_FROM_AZURE with the key.

Note: Reminder that using your secret to communicate with the bot is not secure, and we reccommend implementing a token server. Please see the notes above on authentication.

Web Chat

Web Chat is a highly-customizable web-based client for Azure Bot Services. It can be integrated with your existing web site using JavaScript and React. In this sample, we are customizing Web Chat using JavaScript without any UI frameworks. For deep-customizations, Web Chat can be rebuilt using React to suit your need.

Further Reading