How to create a custom appearance for the live chat widget

Included for free in plans

It is possible to create your very custom own appearance for live chat widget. Just follow these steps:

1.Download the initial files (link)

If you want to keep our default label on mobile devices, please replace jivosite.js file with the file from this archive

2.Copy the "jivosite" directory from the archive to the root directory of your site. For example, if you use shared hosting it will be: …/Public_html/your_domain/jivosite

3.Ensure that the initial script code is available at

4.Add this code between the <head> and </head> tags on each page of your site.

<link href="/jivosite/jivosite.css" rel="stylesheet" />

<script src="/jivosite/jivosite.js" type="text/javascript"></script>

5.Ensure that the main JivoChat code has already been added to your site. For more information please follow these instructions

6.You can easily change the shortcut picture to something more acceptable for you in the directory. You can find the initial Photoshop file in the archive

7.Change the div height in the "jivosite/jivosite.css" file to match the picture’s height, if needed.

Related articles
Have questions?
Ask in the live chat, we are ready to help around the clock