Help and support

Resources that will teach you everything about LiveChat.

Chat button guide

by Jacob Firuta

Chat buttons play an important role in chat generation. The better and more visible your chat button is, the more people will use it to start a chat.

This article is divided into three sections which are:

  1. Creating LiveChat button and placing it on your page
  2. Choosing right place for the button on the page
  3. Chat button customization ideas

Creating a chat button

Chat button creation is a two-step process. First, you need to decide how your button will look like. You can design the button or pick one from a gallery of ready-made examples.

Next step is to place the button on your website. You need to do it carefully, since even the best chat button won’t generate much chats if it is placed poorly.

Start off by going to the Chat buttons section. Here, you will be able to upload a new button or choose one from a gallery and then generate the code for it.

Adding a chat button

If you want to upload your own graphic, click on Add a chat button and then on Upload online button. The file should be in a PNG or a JPG format since those formats can handle transparency and the file size is relatively small, allowing for short loading times. Remember to finalize the change by selecting Save changes.

Uploading a chat button

Avoid uploading buttons that take a lot space – they should be easily visible, however, they also shouldn’t be too overwhelming. A button that is too big will be a nuisance when looking for information on your site.

You can also select a button from a pre-made gallery. To do this, click on Choose buttons from gallery after editing or adding a button.

Choosing a chat button from gallery

When you are done with choosing or uploading your button, you can copy its code, paste it into your website source and publish the changes.

Installing a chat button

Wanna learn more? Refer to our webinar about chat branding and customization in which we discuss chat buttons.

Button placement

When choosing a good place for your chat button, you will have to remember about a few things. Giving your visitors a way to contact you is important, however, it shouldn’t be presented as the main aspect of a given site.

A really bright button may be easily noticeable, however, you should get one that is toned down. This way your visitors won’t have a problem with starting a chat and also nothing will distract them.

You should place your button in an easy-to-reach and visible place, like the top of your page, to get the best results.

Customization ideas and resources

Ambient Bamboo is an example of a site that managed to successfully incorporate a chat button into their website design. It is easily visible and accessible and doesn’t draw your attention away from the site contents.

Ambient Bamboo's chat button

If you are using embedded window type, you can hide chat bar on your page using a CSS style. Then the chat window will pop up at your page only after the visitor clicks on the chat button.

#livechat-compact-container {
  display: none;
}

Another idea is to create a sliding chat button, which will allow your visitors to reach your chat without having to scroll all the way to the top of the page.

To make a sliding chat button, you have to place your chat button code within the following CSS code:

<div style="bottom: 400px; left: 0px; position: fixed">

/* Place your chat button code here */

</div>

Additionally, if you don’t want to have your offline button displayed when there is no agent available, you can hide it by going over the instructions available in the No offline button after office hours guide.

Did you find this helpful? Yes No
Thanks for your feedback.
65% of people found this helpful.