Interact with your customers in real time and increase your sales

A FREE communication tool for you to monitor and chat with your clients on your website, Facebook, Telegram and Viber.

incorrectly entered e-mail address Something went wrong, try again later

Yay! You just completed Step 1.
Now please check your email inbox, we sent you the installation instructions. GO, GO, GO!

How to change design of chat on your website

Choose another article

Note that you should make the changes in the channel which contains the code installed on your website. If you can’t see your website in the background of the designer page, you might be in the wrong channel.

You can make changes to the texts, colors and position of the JivoChat widget without having to edit any code 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 (below your website name).

How_to_change_design_1

Next, click on the “Design” menu. It will open a new tab on your browser with our designer page.

How_to_change_design_2

The “Colors” menu allows you to change the color scheme of the chat widget. You can select the style of colors between plain or gradient, change the widget header colors, select the background color of visitors’ messages, select the callback button color and the text font color between the available options.

How_to_change_design_3

Choose a “Header Pattern” for your chat widget.

How_to_change_design_4

Select the position where you want the minimized chat widget to appear in your website.

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 to use right side location as the most optimal position.

How_to_change_design_5

In the “Font” tab you can set the style, type and size of the font.

How_to_change_design_6

In the “Text” tab 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.

How_to_change_design_7

You can also customize the mobile widget, which loads a different chat button by default. Select the position and color of the button. You can checkmark the option “Use desktop color” to use the same colors as your desktop widget.

How_to_change_design_8

Once you are done with the design customization, press the “Save” button and the changes will be automatically applied to your website (you don’t need to reinstall the chat code).

How_to_change_design_9

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.

Do you still have any questions? Our support team will be more than happy to help you 24x7 in the chat on our site.