1739 Views

Chat widget customization with CSS

CSS stands for “Cascading Style Sheet”. It describes how HTML elements are to be displayed on screen, paper, or in other media.

With using CSS, you can customize every single elements in chat widget to make it more attractive or unique.

How to add customized CSS?

  1. Log in dashboard page.
  2. Come to Settings > Chat widget
  3. Click into Themes > Customize

Here are some examples of possible customizations and instructions on how to achieve them:
Changing chat widget size
Customizing logo image
Rounded avatar
Hiding button online/offline
Changing font-size of chat text
Placing bubble image

Changing size of chat widget

  • Width

You can adjust the width value: 340 px
The default chat widget size is: 340 x 486 px
(Width: 340px – Height: 486px)

height

  • Height

Change value (486) to decide the height of chat widget.

Note that:

  • File must be less than 200Kb
  • Standard image size: 100 x 35 px

logo-1

Rounded avatar

rounded-avatar

Hiding button online/offline

hidden1

Changing font-size

Font-size

Placing bubble image