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.

Enable “hidden” for the style of the widget when closed on the Chatlio dashboard if you don’t want to see Chatlio at all when collapsed.

Then create your button or link. Eg below. Important parts are onclick event and data attribute.

<button onclick="_chatlio.showOrHide();" data-chatlio-widget-button>....</button>

Then (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) {
    updateCustomButtons(e.data.visibility)
  });
  document.addEventListener('chatlio.visibilityChange', function (e, data) {
    updateCustomButtons(e.data.visibility)
  });
</script>
:(
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