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 (next to the website name).

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

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.

Choose a “Header Pattern” for your chat widget.

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.

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

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.

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.

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).

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.