Open the LiveChat Window When a Link Is Clicked

If you use the LiveChat widget on your site, you can open the chat window from your own link or button. You don’t have to rely only on the floating chat bubble. Call LiveChatWidget.call('maximize') from a click handler: that’s the method LiveChat’s current JavaScript API provides for opening the chat. This only works once LiveChat’s code snippet has added the widget to the page.

Step 1: add the button or link

Place it wherever you want: in a page, a widget or a theme template. What matters is the ID chat_btn, which the script uses to find it. The chat-btn class is only there for styling.

<button type="button" class="chat-btn" id="chat_btn">Click Here to Start</button>

A button is the right element for something that opens a window on the same page. MDN’s page on the a element advises against links with href="#" used as buttons: they behave oddly when opened in a new tab or bookmarked, and they tell screen readers the wrong thing.

If it has to be a link, for example an item in a WordPress menu, give it a real address, such as your contact page:

<a class="chat-btn" id="chat_btn" href="/contact/">Click Here to Start</a>

The script below only takes over the click when LiveChat is on the page. Otherwise the link opens the contact page, so visitors always get somewhere.

Step 2: open the chat on click

Add this code to a JavaScript file your site loads, or inside <script> tags before the closing </body> tag:

document.addEventListener('click', function (event) {
  var link = event.target.closest('#chat_btn');
  if (!link || !window.LiveChatWidget) return;

  event.preventDefault();
  LiveChatWidget.call('maximize');
});

• One click listener on the whole document handles the click. closest('#chat_btn') finds the button or link even when the click lands on something inside it, such as an icon. Because the listener sits on the document, it doesn’t matter whether the script loads before or after the button.
• If window.LiveChatWidget doesn’t exist, the widget’s code isn’t on the page, and the function lets the click do its normal job.
• event.preventDefault() stops a link from opening its address. It does nothing for a button.
• LiveChatWidget.call('maximize') opens the chat window. LiveChat’s code snippet creates LiveChatWidget straight away and keeps calls made before the widget has finished loading in a queue, so an early click isn’t lost.

To start the visitor’s message for them, pass a draft: LiveChatWidget.call('maximize', { messageDraft: 'I need help!' }). The JavaScript API documentation lists the other calls, such as minimize and hide.

With jQuery

If your site already uses jQuery for its other scripts, you can write the same handler with it. WordPress loads jQuery in no-conflict mode, so wrap the code in a jQuery ready handler that passes in $ (jQuery’s no-conflict mode in WordPress explains why), and load the file after jQuery:

jQuery(function ($) {
  $('#chat_btn').on('click', function (event) {
    event.preventDefault();
    LiveChatWidget.call('maximize');
  });
});

This version binds the click to the element directly. So the button must already be on the page when the ready handler runs.

Does it work?

Tested in headless Chrome 153 on LiveChat’s own developer documentation, which runs the current widget with version 2.0 of the code snippet. With the chat minimized, a click on the button, and a click on an element inside a link, both changed LiveChatWidget.get('state').visibility from “minimized” to “maximized”, and the link didn’t open its address. The jQuery version, with jQuery 3.7.1 in no-conflict mode, did the same. On a page without LiveChat, the link opened its own address.

What about LC_API?

An earlier version of this post called LC_API.open_chat_window(), from version 1.0 of LiveChat’s JavaScript API. LiveChat’s documentation now presents LiveChatWidget, which needs version 2.0 or later of the code snippet. For code installed a long time ago, it says to update the snippet or use the old API. In the test above, LC_API was still defined next to the current widget and LC_API.open_chat_window() still opened the chat, but use LiveChatWidget.call('maximize') for new code.

If clicking the button does nothing, or the link simply opens its address, open the browser console and type window.LiveChatWidget. If it’s undefined, the page doesn’t load LiveChat’s current code snippet: check that the widget is installed on that page, and replace an old snippet with LiveChat’s current code.

Related articles

• closing an Elementor popup menu from a link: a similar jQuery click handler for a widget
• opening a URL in a new tab on click: when the link should lead elsewhere