Bot Framework v4 styling webchat sample
This sample shows how to create a web page with customized Web Chat component.
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 replacingYOUR_BOT_SECRET_FROM_AZUREwith 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.
-
Host it using
servenpx serve
-
Navigate to the page at http://localhost:5000
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.