CODEWITHSUNDEEP
htmlcsstypescriptazurechatbot
Trinity
Trinity

Reputation: 21

How to custom Chatbot Azure Conversation

I would like to custom conversation with an Azure Chatbot (develop with Typescript) on a webchat or directLine canal (change the color of the conversation , one for the bot and one for the user for exemple) I try to do it with this Microsoft doc : https://learn.microsoft.com/fr-fr/azure/bot-service/bot-builder-webchat-customization?view=azure-bot-service-4.0

When I add an index.html in my project , it works locally with the following command : npx serve But when i deploy my entire project on an app service on the Azure Portal which is connected to my Azure Bot service, i can't see the changes on a direct line or webchat in production ? How is it possible ? Is there something with azure services who block the custom modifications when my bot is on a production canal ?

Thanks for help !

Upvotes: 0

Views: 263

Answers (1)

SauravDas-MT
SauravDas-MT

Reputation: 1444

I didn't found anything in azure services that blocks the custom modifications when bot is deployed. And without the code that you are deploying in the Azure App Service it's hard to find the root cause of the problem you are facing.

You can customize the default canvas with JavaScript-based styling in the HTML code for the website where you deploy your bot.Generally we can easily customize the background color and the chat bubbles of your web chat. You can do so by simply adding the below code snipper in the style script of your index page.

const styleSet = window.WebChat.createStyleSet({ 
bubbleBackground: /*color for bot chat bubble*/, 
bubbleFromUserBackground: /*color for user chat bubble*/, 
rootHeight: '100%', 
rootWidth: '50%', 
backgroundColor: 'lightblue' /*background of web chat*/
});

You can configure how the chat canvas looks with some simple CSS and JavaScript styling options. But remember that you would need to add your Bot ID also. Check this customize the default canvas for more information. If you are still facing the same issue check is you are following the process mentioned in this deploy your bot in Azure document.

Upvotes: 0

Related Questions