How to change design of chat on your website

Note that you should make the changes in the channel which contains the code installed on your website.

To change the design settings of your JivoChat widget, please log in to our Desktop or Web app and go to Manage -> Channels -> Settings (next to the website name).

Next, click on the "Chat design" menu.

You can make changes to the texts, colors, position and the shape of the JivoChat widget without having to edit any code on your website. On the same page, you will see a preview of the current settings - how it will look on your site, after saving the current settings, all changes are applied to your website immediately.

Chat window

Now you can customize the shape of the chat window. The icon you choose will be displayed on the site in the desktop version. The Bubble chat icon will look like this:

Align

Perhaps the most important of the settings besides the color scheme is the position of the button and the chat window, or rather, where exactly our service will be located on your site.

You can choose the position of the button at the desired location on your site.

Please note that the position of chat window is defined by the placement of the chat button. If the button is on the left side of the screen (bottom / top / side views), the chat window on the website will be on the left, attached to the bottom left side of the screen. Similarly, if the button is placed on the right side or in the center, the chat window will open on the lower right corner of the screen.

We recommend using the right bottom location as the most optimal position.

If you're using the bubble design, there are 2 options available: bottom left and bottom right.

Font

In the "Font" tab you can set the style, type, color and size of the font.

Color

In the Color subsection you can set colors for the chat button: choose a color scheme from the available options or even customize your own color by clicking on the dropper icon. Both monochrome and gradient design of the chat button is possible.

The settings also allow you to adjust the background of the client's messages and the color of the callback button. These colors can be selected from a list of suggested colors.

Pattern

You can add texture art to the chat widget by selecting one of the options in this section:

Text editor

In this section, you can change the texts that are used on the chat button and in offline mode. Also in this tab, you can change the text of the offline message form (which is shown when clients click to open the chat widget manually).

Please note that if you set a long text for the chat button, the button will increase in width depending on the length of the text.

Mobile version

It is also possible to customize the look of the chat on the mobile version of your site. You can choose the color of the chat button from the suggested colors, or even customize your own color. You can checkmark the option "Use desktop color" to use the same colors as your desktop widget. In addition, you can choose which side the chat button will be located on: on the right or on the left.

That's it! If you need any help or have any questions, we're always available to help in the live chat here on our website.