https://www.youtube.com/watch?v=X3ybxzjKBBQ

Hi, This guide will explain how you can create and design a custom chat bubble to replace default “minimized chat window” available in LiveChat.

Example can be found on this page:

https://lime-paper-scribe.glitch.me/

Prerequisites:

You need to have access to modify both HTML and CSS of your website

1. LiveChat tracking code needs to active on the page, any of the installation methods from here:

https://my.livechatinc.com/settings/code

will work just fine, for the example I’ve inserted the code directly before closing </body> tag into HTML of the website.

2. Please change position of the chat window in section below:

https://my.livechatinc.com/settings/theme/position

to “Always hide minimized widget icon” (this is important to make sure only the custom bubble we’re making is displayed and not both of them)

3. Third thing we’ll need is the image you wish to use as the bubble (it does not necessarily have to be a bubble but due to popular demand - here’s how to make that happen)

upload the image you wish to use here:

https://crop-circle.imageonline.co/

and move the crop tool around to a position that will result in a frame you want to use, then select “crop circle” and next “download image”, once you have the image, it needs to be uploaded to an image sharing site such as Imgur. Once uploaded, right click the image and select “copy image address”.

4. adding the image to your website, please add following code into HTML of the website:

<img class="bubble" onclick="LiveChatWidget.call('maximize')" src="insert image address here" />

and place the link to your image in place of “insert image address here” this will result in the image appearing on your website and clicking the image will launch our JS API method:

LiveChatWidget.call('maximize')