How to Customize the APPEARANCE of Your Chatbot
Learn how to personalize or add branding to the look and appearance of your chatbot
Step 1 - Access the Bot's Appearance Settings
-
Navigate to your Botsonic Dashboard by clicking on [Home] from the left hand side menu. Then click and open the Bot you want to connect. If you haven't created a Bot yet, read this Quick Start Guide
-
Click [Appearance] from the left hand side menu
Preview the look of your chatbot
You can preview the look of your chatbot in real time as you make changes
The preview pane is located on the right-hand side of the page.
Step 2 - Personalize the look and feel of the chatbot
Company Name
Enter your company name or any name you'd like to appear on the Bot's interface.
![](https://files.readme.io/83b2771-image.png)
Subheading
Enter a customized message for your bot's subheading
![](https://files.readme.io/bdbfa94-image.png)
Company Logo
Upload your company logo
![](https://files.readme.io/b559435-image.png)
Bot Avatar
Upload an avatar for your bot
![](https://files.readme.io/9d76e00-image.png)
Accent Color
Select an accent color
![](https://files.readme.io/baa02fe-image.png)
You can also select an accent color from the color picker or enter a hex code
![](https://files.readme.io/a8b6acc-image.png)
Widget icon
Select an icon for the chat widget
![](https://files.readme.io/529da41-image.png)
Widget Position
Select left or right for the widget position on your website's screen
![](https://files.readme.io/e48ce9e-image.png)
Input Placeholder
Enter a message to be displayed as an input placeholder on the chatbot
![](https://files.readme.io/f7dbdf4-image.png)
Weclome Message
- Enter a customized welcome message that will be displayed to users when they start engaging with the Bot
- Toggle OFF to disable
![](https://files.readme.io/9b87f15-image.png)
Show/hide Botsonic's branding
![](https://files.readme.io/1f496ba-image.png)
Hiding Botsonic's branding is an add-on
To activate, please go to your Plans and Billing page to switch ON this add-on.
Widget is Open by Default
Select a setting to open/close the widget by default
![](https://files.readme.io/e8b26b5-image.png)
Step 3 - Save your changes
Click [Save changes]
![](https://files.readme.io/129d4b0-image.png)
Updated about 1 month ago