Change rasa webchat blue background colour and add a logo

Rasa Open Source
1

Problem Statement:- I have use index.html file for getting a chatbot interaction in that i have use webchat.default , now i wanted to change the colour of my chatbot from blue to orange and add a logo in that .

Solution tried:- Used headerconfig but didn’t help , below is the code snippet of index.html file i refered

    window.WebChat.default(
      {
        initPayload: "/greet",
        customData: { language: "en" },
        socketUrl: "http://localhost:5005",
        title: 'Bot',
        subtitle: "Type hi to restart!!",
        headerConfig: {
          avatar: 'src/logo.png',
          titleColor: 'orange',
          backgroundColor: '#FF9800'
        }

Please do suggest how can i get the bot colour changed and add a logo?

2

Hello,

To change the color of your chatbot and add a logo, you can modify the CSS styles in your index.html file. Here’s what you can do:

Changing the color: Look for the CSS class or ID associated with the chatbot container, usually defined in a

element. Use the appropriate CSS properties, such as background-color, to change the color to orange. For example:

.bot-container { background-color: orange; } Adding a logo: You can add a logo by including an element inside the chatbot container. Place the image file in the appropriate location (e.g., in the same directory as your index.html file) and provide the path to the image in the src attribute. For example:

Logo

Make sure to adjust the CSS selector and image path according to your specific code structure. After making these changes, the chatbot container should have an orange background color and display the logo image.