title: Azure bot UI customization in a react website
body: <p>I am making an azure qna maker bot and embedding it in a react website using iframe. I want to make changes to the UI of the bot, colors, font, size, etc. And add a button to the corner of a website to pop up the chat for the bot. I have attempted to make changes using the bot framework sdk.</p>
  <p><a href="https://github.com/microsoft/BotFramework-WebChat/tree/main/samples/01.getting-started/a.full-bundle" rel="nofollow noreferrer">https://github.com/microsoft/BotFramework-WebChat/tree/main/samples/01.getting-started/a.full-bundle</a></p>
  <p><a href="https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-webchat-customization?view=azure-bot-service-4.0" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-webchat-customization?view=azure-bot-service-4.0</a></p>
  <p>I am still confused as to how or where I have to add the code changes to the <strong>index.html</strong> file. I even downloaded the bot source code and still do not understand where to make the code changes. I have searched extensively for any other tutorials or videos but found nothing fruitful.</p>