Skip to main content

Creating a custom chat bubble

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

Video guide and example​

Example can be found on this page:

https://scalloped-superficial-mascara.glitch.me/

Prerequisites​

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

1. LiveChat tracking code needs to be 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')

which opens the chat window. The image is assigned a class named “bubble” that will let us modify its look using CSS.

5. we now have the bubble implemented on the website but its position doesn’t resemble that of our default chat window and doesn’t look right just yet, we’ll fix it by adding a few lines to CSS of the website:

.bubble {
width: 70px;
height 70px;
position: absolute;
right: 30px;
bottom: 30px;
cursor: pointer;
transition: transform .2s;
z-index: 9999;
}

.bubble:hover {
transform: scale(1.2);
}

Those CSS will apply only to elements with class “bubble”.

All the properties can be modified freely - this is just an example and here’s what each of them does:

  • width and height - self explanatory, this lets you define dimensions of your image, it’s recommended for them to be matching in size to prevent element from being stretched.
  • position: absolute - this will make sure our bubble remains in the same place regardless of scroll position and other elements on the website.
  • right and bottom - those properties define spacing from the right side of the page and from the bottom of the page.
  • cursor: pointer - defines what cursor should be displayed when visitor hovers their mouse over the bubble, pointer is the same one LiveChat default minimized chat window uses.
  • z-index: 9999 - that makes sure bubble is displayed over all other elements.
  • transition: transform .2s - this defines duration of animations when applied to the element, used to make transitions smooth if used, in this case transition will take 0.2s.
  • transform: scale(1.2) - defines that the bubble should increase in size to 120% when being hovered over.

If you have any questions, let us know!

Yours, LiveChat Team <3