Here is how you can customize the chatbot icon popping up on your website!
Many customers want to update the design of the chatbot icon that shows up on their website. Some of the desired modifications could be.
Make the icon square rather than circular
Use the custom image in place of the chatbot icon
Use the human avatar in place of the chatbot icon
Basically, the sky is the limit because we have given you full control to modify the CSS code of your website and update the icon of the chatbot.
?As an example to customize the chat widget with respect to their size, you have to add this style block just before the ending <head> tag on your website.
You can keep on editing the CSS as you wish in the code below.
<style> .wpic-launcher { border-radius: 0px; background: transparent none repeat scroll 0% 0% !important; box-shadow: none !important; width: 200px !important; /* You can change this depending upon the width of your icon */ }
.wpic-launcher-open { border-radius: 0 !important; border: none !important; background-repeat: no-repeat; background-size: contain !important; width: 100% !important; transform: scale(1.3) !important; /* optional, you can change the zoom scale */ }
