Examples - Text Documentation

Here you can find some example usage of the Chat Widget JavaScript API. They all require the Widget to be installed on the page and window.LiveChatWidget to be defined. Show the Chat Widget after 30 seconds and keep it open after reloading.

LiveChatWidget.on("visibility_changed", function (data) {
  if (data.visibility === "maximized") {
    localStorage.setItem("livechat_chat_visible", true);
  }
});

var isWidgetVisible = Boolean(localStorage.getItem("livechat_chat_visible"));

if (!isWidgetVisible) {
  setTimeout(function () {
    LiveChatWidget.call("maximize");
  }, 30000);
}

Show the hidden or minimized Widget after a button has been clicked. You can change the Widget visibility as described in our Help Center.

var chatButton = document.getElementById("chat-btn");
chatButton.addEventListener("click", function () {
  LiveChatWidget.call("maximize");
});

Prefill username and email

It sets the Customers name and email using their login and email.

var user = JSON.parse(localStorage.getItem("user"));

LiveChatWidget.call("set_customer_name", user.login);
LiveChatWidget.call("set_customer_email", user.email);

Initialize Chat Widget after clicking the button.

<html>
  <head>
    <script>
      window.__lc = window.__lc || {};
      window.__lc.organizationId = "<ORGANIZATION_ID>";
      window.__lc.asyncInit = true;

      /* rest of the standard snippet code */
    </script>
  </head>
  <body>
    <button id="chat-btn">Chat with us!</button>
    <script>
      var chatButton = document.getElementById("chat-btn");
      chatButton.addEventListener("click", function () {
        // Initialize Chat Widget
        LiveChatWidget.init();
      });
    </script>
  </body>
</html>