Pricing
Go to app
User Name
Upgrade Help Center

Add a chat button to your website

Wojciech Pollok
3 min read
updated: Mar 20, 2025

Chat buttons are your stationary website widget triggers that you can implement in any place of your site.

A single well-placed button can generate more leads than your entire call center.

Chat button creation is a two-step process. First, you need to decide how your button will look like. You can use one of the two default graphics we offer, use a plain text version, or upload your own graphic.

The next step is to place the button on your website. Remember: The better and more visible your chat button is, the more people will use it to start a chat.

How do you add a chat button to your website?Link icon

1. Start off by going to the Chat buttons section. Here, you will be able to set up your new button and then generate the code for it.

Arrows_pointing_out_the_way_to_reach_the_LiveChat_Buttons_settings_section

2. Select Create chat button.

Arrow_pointing_towards_the_Create_chat_button_button

3. Select if you want your button to be displayed as a graphic or a text.

Arrow_pointing_towards_the_button_type_selector

4. Upload graphics or enter texts for online and offline states (representing your button state when agents are available and not available to chat).

Arrows_pointing_towards_the_upload_image_options_for_LiveChat_buttons

In case of graphics, we recommend using PNG format since it can handle transparency and the file size is relatively small, allowing for short loading times.

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.

In case of graphics, we recommend using PNG format since it can handle transparency and the file size is relatively small, allowing for short loading times.

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.

5. Select Create button to finish.

Arrow_pointing_towards_the_Create_button_button

When you are done setting up your button, you can copy its installation code, paste it into your website’s source files selected section, and publish it.

Arrow_pointing_towards_the_Copy_code_button

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

How do you edit buttons?Link icon

You can easily reinstall, edit, and delete buttons right in the Chat buttons settings section. You’ll find these options on the right side of every button that exists on your account:

Arrow_pointing_towards_editing_options_for_LiveChat_buttons

Remember to save changes after your’re done with editing!

Button placementLink icon

When choosing a good place for your chat button, you will have to remember 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.
  • You may be tempted to use a bright button as they can catch visitors’ attention, however, you should get one that fits your website’s tone. This way your visitors won’t have a problem with starting a chat while nothing distracts them from, for example, buying your products.
  • You should place your button in an easy-to-reach and visible place, like the top of your page, to get the best results.

Was this article helpful?

Got it!

Thanks for your feedback.

Thank you!

We’re happy to help.

RELATED ARTICLES

More chats with the eye-catcher

Attract yours visitors attention more effectively and offer your real-time help. Read on to learn how to setup attractive eye-catcher on your website.

Read the article

Configure custom variables

See how setters configuration helps you handle chats faster and more efficiently. Set them up and add more context to your customer service.

Read the article

Start using LiveChat® now!

Free 14-day trial AI-driven features No credit card required

Still not convinced? Discover all LiveChat features

Discover Text products: