Use a custom button or link with Chatlio

Sometimes you want to build your own button or link to open Chatlio chat. This will walk you through the process.

Here are the steps to use your own button:

  1. Open the Chatlio dashboard.

  2. Select the widget for which you want to use a custom button to open.

  3. On the Appearance tab, find the “Style of widget when closed” section and select “Hidden”.

  4. Create your button or link. Eg below. Important parts are the onclick event and the data-chatlio-widget-button attribute.

    <button onclick="_chatlio.showOrHide();" data-chatlio-widget-button>....</button>
  5. (optionally) use our API to update the text of the button or link based on whether widget is open or not. This assumes you have already loaded Chatlio embed code.

    <script type="text/javascript">
      var openedText = "Close chat window"; // change me
      var closedText = "Start chat"; // change me
      var updateCustomButtons = function(visibility) {
        var btns = document.querySelectorAll("[data-chatlio-widget-button]");
        for (var i = 0; i < btns.length; i++) {
          var btn = btns[i];
          btns[i].innerHTML = (visibility === "open" ? openedText : closedText);
      document.addEventListener('chatlio.ready', function (e, data) {
      document.addEventListener('chatlio.visibilityChange', function (e, data) {
Your browser is out-of-date!

This website is built using latest technogies. Unfortunately your browser doesn't support those. Please update your browser to view this website correctly. Thank you.Update my browser now