Do you want to load chat widget, only when the visitor clicks a button on your site and hide the widget otherwise? Follow the steps below to achieve that.

Note: Below steps should be performed on the page where the chat widget has been installed.

Step 1: Add an 'id' to the element (button), that you want to use for triggering the chat widget.

For example, we have added the id 'hf-chat' to the anchor tag below:

<a id="hf-chat">Live Chat</a>

This element can also be a button, image or any other element on your page. You need not specify a 'href' attribute for the anchor tag.

Step 2: Paste the following code at the bottom of your document, right after the HappyFox Chat installation code. You can replace 'hf-chat' with whatever id you used for your anchor tag.

<script type="text/javascript">
HFCHAT_CONFIG.options = {
   showBadgeOnLoad: false, // Will hide badge only on load
};

window.HFCHAT_CONFIG.onload = function() {
   var HappyFoxChat = this;
   document.getElementById('hf-chat').addEventListener('click', function(e){
      e.preventDefault();
      HappyFoxChat.showWidget();
      HappyFoxChat.expandChatbox();
   });
};
</script>

That's it! Clicking on the link should now show the chat window to your visitors.

Note: Please note that the above instructions are intended to work with only one button on your site. If you want multiple buttons on your site to perform this functionality, please get in touch with us at support@happyfox.com.