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