'Azure bot UI customization in a react website

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.

https://github.com/microsoft/BotFramework-WebChat/tree/main/samples/01.getting-started/a.full-bundle

https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-webchat-customization?view=azure-bot-service-4.0

I am still confused as to how or where I have to add the code changes to the index.html 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.



Solution 1:[1]

Check this repro link for implementation.

To check the styles implementation and repro to the own, navigate to

tests -> setup -> web -> index.html

The major styling things shouldn't be modified or mentioned in HTML page. Check the index.CSS and other CSS pages for reference and create your own CSS and map that to index.html using style tag

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SairamTadepalli-MT