70.styling-webchat

styling webchat sample

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.

• 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

• Host it using serve

  npx serve

• Navigate to the page at http://localhost:5000

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

• Bot Framework Documentation
• Web Chat GitHub repository
• Connect a bot to Web Chat
• Customizing Web Chat