Find tutorials related to Botsify Voice AI. Dial 1,000 of calls in 5 minutes using AI call Agents and generate leads.
Category: Main
Whitelabel Partner Portal
Learn how to setup whitelabel portal in Botsify, how to add packages and how to invite your customers to start generating revenue.
Customize Website Chatbot Icon Design
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 */
}
.wpic-launcher path {
color: #000 !important;
fill: #000 !important;
}
.wpic-launcher.botsify-active {
background: transparent;
border: 0 !important;
outline: none;
width: 60px !important;
border-radius: 50% !important;
box-shadow: rgb(97, 99, 100) 0px 0px 25px 4px !important;
}
</style>
Yahoo! Your chatbot icon design has been customized✌️
