Livechat Widget Javascript API

JavaScript API allows advanced control and customization for the widget directly from your website's code. You can programmatically show or hide the chat, set themes, and pass user data for a more integrated experience.

This article assumes some familiarity with Javascript programming.

The API methods are available on the global window.BeChat object once the chat widget script has been loaded on your page.

onLoaded(callback)

This is the most important method to start with. It registers a callback function that will be executed only when the chat widget is fully initialized and ready to receive commands.

To ensure your commands don't fail, you should wrap all other API calls inside the onLoaded callback.

Example

window.BeChat.onLoaded(() => {
  // The chat widget is now ready.
  // You can safely call other API methods here!
  console.log('LiveChat widget is loaded and ready.');
});

showLauncher() & hideLauncher()

These two methods give you control over the visibility of the chat launcher icon. This is perfect if you want to hide default launcher and trigger the chat window from a custom button, link, or another element on your page.

If you want the launcher to always start hidden, you can enable Hide launcher option from admin -> settings -> livechat -> widget -> launcher panel.

Example

Let's say you have your own custom button to open the chat.

HTML:

<button id="my-custom-chat-button">Need help? Chat with us!</button>

JavaScript:

window.BeChat.onLoaded(() => {
    // First, hide the default launcher so only our button is visible.
    window.BeChat.hideLauncher();

    // Add a click listener to our custom button.
    document.getElementById('my-custom-chat-button').addEventListener('click', () => {
    // When the button is clicked, show the chat.
    window.BeChat.showLauncher();
  });
});

setTheme(themeId)

You can dynamically change the visual theme of the chat widget using this method. Eg. dark mode or light mode.

You can set the default widget theme and find theme names in admin -> settings -> livechat -> widget -> style panel.

Example

window.BeChat.onLoaded(() => {
  // Change the chat widget to your custom dark mode theme.
  window.BeChat.setTheme('dark');
});

setUserData(userData)

This method allows you to dynamically change the logged in user multiple times without reloading the page.

If you just need to log the user in once on page load, you can use BeChatSettings object instead. Refer to Identifying Logged-in users article for details.

This method accepts the same properties as BeChatSettings.user object.

Example

Here's how you would pass the details of a currently logged-in user, including custom data, to the chat widget.

window.BeChat.onLoaded(() => {
  // Define the user's data.
  const visitorInfo = {
    name: 'John Appleseed',
    email: 'john.appleseed@email.com',
    language: 'en',
    subscriptionPlan: 'Premium',
    company: 'Pixel Perfect Designs'
  };

  // Pass the data to the chat widget.
  window.BeChat.setUserData(visitorInfo);
});