Move chatbot widget position and increase size within parent.html

[hebrian]

Hi everyone, I have been playing around with moving around the embedded chatbot widget (default on the lower right-hand corner) and increasing it's overall size. I have been mainly editing "custom-chatbot-style.css" but let me know if I am looking at the wrong file. Greatly appreciate any help as I am new to web development. A couple of questions–

1. How do I increase the size of the chatbot widget circle? I have explored the width, height, and border-radius within button.min-button, but the circle appears to cutoff when it is larger because constrained by a 300x85 parent box?
2. Once the chatbot widget circle is increased in size, how do I get the vue icon within it to expand to the correct size?
3. How can I move the chatbot widget to a specific position on my webpage and keep it absolute? Eg. to the middle of my screen, but not moving due to user scroll.

Here is an example exercise that I hope to achieve:

[atjohns]

Apologies that no one ever responded to you here. Is this still something you need assistance with?

[vinayburam]

Can you please help me to change the color of icon

[atjohns]

In the CloudFormation, you can set the 'MinimizedButtonColor' parameter to change the color.

You can also set it in manually by modifying the custom css file like so

button.min-button {border-radius: 60px; background-color: #9c761c !important;}