{"versionId":"dbce1306-6d8c-4a3a-8a17-08de86ffd947","articleId":"ae3e6366-6ea8-4219-49df-08db04cfd28a","title":"Bot styling","tags":["setup","styles","chatbot basics","All articles"],"content":"

Use Helpfruit's bot styles feature to add or change your own custom bot avatar, customise your chat widget colour scheme and control all other aspects of your chatbot display.

Customise your colour scheme

Go to the Colours tab on Configuration > Bot styles.

Start with one of our preset colour schemes, or use your brand colours.

The colour of each element in the widget can be customised, and previewed using the built in preview bot.

Add an avatar

On the General tab, add an avatar that conveys your bot’s identity and personality

You can start with your logo, or our default, to get up and running fast. Or ask our design team to help design or animate your avatar.

Avatar guidelines

We support .png or .svg format.
Size guide: 100px x 100px
Recommended file size < 64 KB - this will reduce the impact loading the image has on your site

Select the position on the page

Your bot can be positioned on the bottom left or bottom right of your website

Custom CSS

Use the Custom CSS tab for full control of the Helpfruit chat widget. Custom CSS allows you to override styles such as width, height and border styling.

CSS written in the custom CSS tab here will only affect the bot - it won't change anything else on your website.

","description":"How to customise the look of your chatbot widget","isMarkdown":false,"publishedOnUtc":"2026-03-21T04:30:20.410581","modifiedOnUtc":"2023-02-09T04:22:59.4829666"}