Creating a personalized Chatbot using Azure Conversation

Looking to customize the conversation with an Azure Chatbot (developed with Typescript) on a webchat or directLine channel (changing the color of the conversation, one for the bot and one for the user, for example). I've been following the guidelines from this Microsoft documentation: https://learn.microsoft.com/fr-fr/azure/bot-service/bot-builder-webchat-customization?view=azure-bot-service-4.0

While it works locally when I add an index.html file to my project using the command npx serve, after deploying my entire project on an app service in the Azure Portal connected to my Azure Bot service, I can't see the changes on the direct line or webchat in production. Is there something within Azure services that may be blocking the custom modifications when my bot is on a production channel?

Any help would be appreciated! Thanks!

htmlcsstypescriptazurechatbot

Answer №1

After exploring Azure services, I couldn't find any features that would block custom modifications when deploying a bot. Without access to the code being deployed in the Azure App Service, it's difficult to pinpoint the root cause of the issue you're encountering.

To personalize the default canvas with JavaScript-based styling on the website where your bot is deployed, you have the option to modify elements such as background color and chat bubbles. By incorporating the following code snippet into the style script on your index page, customization can be achieved:

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
});

Using simple CSS and JavaScript styling options, you can tailor the appearance of the chat canvas. It's important to include your Bot ID as well. For more details on customizing the default canvas, refer to this resource. If the issue persists, ensure you are adhering to the guidelines outlined in the Azure bot deployment documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can markers be positioned on top of scroll bars?

Looking for a way to display small markers on the scrollbar of an overflow: scroll element, similar to features found in IDEs and text editors like this one: https://github.com/surdu/scroll-marker. I've considered using a pointer-events: none overlay ...

javascripthtmlcssscrollbar

Receive the outcome once the form is submitted

Can someone provide quick assistance? I am looking to allow users to upload a CSV file for me to parse and analyze. Once the processing is done, I need to display the results back to the users. While uploading the file, I also need to ensure that the file ...

javascriptjavajqueryhtmljsp

Error message: Issue encountered while rendering Angular Bootstrap accordion template

Despite my attempts to find a solution before reaching out for help, I am struggling to get the accordion feature to work in my Angular and Bootstrap application utilizing ui.angular.js. The error message in the developer tools indicates an issue with the ...

htmlangularjstwitter-bootstrap-3accordion

How to prevent redundancy in CSS styling

Exploring CSS on my own and have the following HTML structure: <style type="text/css"> #content { display: block; width: 250px; height: 50px; background-color: #330000; } /* pink */ #one, #two, #three, #four { height: 25px; width: 25px; float: left ...

css

I'm having issues with both ng-if and ng-show in my Ionic app as they don't

This snippet of HTML code showcases the following structure: <div ng-if="name=='John'"> <div class="item item-avatar"> <img ng-src="john.jpg"></div> </div> <div ng-if="name=='Margaret'" <div class="i ...

htmlangularjsionic-framework

Display a circular div containing information; upon hovering over it, reveal all details

Looking to create a layout with three circular divs side by side where the bottom of each circle displays the beginning of an information text. Upon hovering, the full text should be revealed: My initial approach involved setting the CSS properties for a ...

csshtmlhovergeometry

Tips for increasing the size of the SVG icon within Material UI iconButtons

Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...

csssvgreactjsmaterial-designmaterial-ui

Angular 4 - Automatically scroll to specific list item based on search query input

While I can achieve this with custom JavaScript, I'm curious if Angular 4 has any built-in features that could help. I have a list of checkboxes that are scrollable and a search input above them. My goal is to enable users to quickly jump to a section ...

javascriptangulartypescriptsearch

flexbox with a table that can be scrolled vertically

I am currently working on creating a scrollable tbody within a flexbox layout. I have two flexboxes, each containing a table. When the items in the table overflow, I want to display a vertical scrollbar within the tbody. However, the tables are within f ...

htmlcssflexbox

a text input field with an invariable placeholder inside

I'm attempting to design a textarea with a consistent title in the top left corner. Here's what I have so far: <div style="position: relative"> <div style="position:absolute; top:3px; left:3px; font-size:9px; line-height:10px">My ...

csstextareapaddingfixed

Generate fresh input fields with distinct identifiers using JavaScript

My challenge is to dynamically create new empty text boxes in JavaScript, each with a unique name, while retaining the text entered in the previous box. I struggled with this for a while and eventually resorted to using PHP, but this resulted in unnecessar ...

javascriptphpjqueryhtml

Angular 12 experiencing CSS alignment issues

In my Angular component, I have the following CSS: .folders { border-left: 5px solid #b8744f; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; /*CORRECTION NEEDED ...

cssangular

I seem to be having some issues with the functionality of .not() and it's

I am working on creating a menu that remains open for a set amount of time and then fades out if neither the parent nor the menu is hovered over. The goal is to have all other menus close when hovering over a new parent in the menu, but the current code k ...

jqueryhtml

Jsoup has removed HtmlToPlainText from its features

Currently, I am in the process of transforming HTML into plain text. Initially, I relied on jsoup's HtmlToPlainText for this task. However, it seems that in recent releases of jsoup, this functionality has been removed as it was intended solely as an ...

javahtmljsoup

Submitting an AJAX form redirects to a different page instead of keeping the user on the current page

I've encountered an issue with my popup ajax form. Instead of staying on the same page after data submission, it redirects me to send.php file. This behavior is different from another website where I successfully implemented a similar form. I'm n ...

phpjqueryhtmlajaxforms

Having trouble with this 'string', need assistance with the syntax error

I have the following code snippet: $fq.=" + (fritidsboende_uth_from:[$fritids_uth_from TO *] AND fritidsboende_uth_to:[* TO $fritids_uth_to]) OR (fritidsboende_uth_from:'1972-01-01T01:01:00Z' AND fritidsboende_uth_to:'2019-01-01T01:01:00 ...

phphtmlstring

Stop the transmission of ts files

Recently, I noticed that when using node JS with Angular-CLI, my .ts files are being transmitted to the client through HTTP. For example, accessing http://localhost/main.ts would deliver my main.ts file to the user. My understanding is that ts files are s ...

node.jsangulartypescript

Adding .js extension to relative imports in TypeScript compilation for ES6 modules

This particular issue may appear simple at first glance, but determining the required settings/configurations to resolve it is not straightforward. Below are the directory structure and source code for a Hello World program: Directory Structure: | -- Hel ...

javascriptnode.jstypescriptnpmnode-modules

Angular 2: Creating a Jasmine test case for accessing the query parameters in activateRoute.snapshot

Currently, I am extracting values from the URL using ActiveRoute in my Angular project. http://localhost:4200/project-test/#/add?orderId=156&customerNumber=431 In order to retrieve these values, I have implemented a separate component with an ngOnIni ...

angulartypescriptjasmine

"Put Jest to the test by running it with the Express

Currently, I am in the process of learning how to build an API with TypeScript and experimenting with testing it using the Jest framework. When utilizing a basic Express application like app = express() supertest(app) everything works smoothly. However, ...

javascripttypescriptapiexpressts-jest