Why Use a Custom Script

By default, our webchat code snippet will load your chat on the pages you desire and will be visible to your customers for when they need help. 

If you want to only show your chat widget after a user clicks on a specific element, you will need to use a custom script, which can vary based on the environment you are implementing it in

Here we have included an example script that you can reference or use for this use case. 

Sample Custom Code Script

Here's a some sample code that can be used when loading your WebChat widget on click. You will have to customize it to work with your desired elements on click and to update your actual webchat tokens and IDs, but can be used as a reference point for the implementation.

<button id="show"> show me </button>
<button id="hide"> hide me </button>
<style>
    #web-connect-wrapper {
        display: none;
    }
</style>
<script>document.getElementById('show').onclick = function(){
    document.getElementById('web-connect-wrapper').style.display="block";
}document.getElementById('hide').onclick = function(){
    document.getElementById('web-connect-wrapper').style.display="none";
}
</script><script type="text/javascript">!function(e,t,n,o,a,c){window.WebConnect={},(a=t.createElement(n)).src="https://webchat.goboomtown.com/assets/webConnectChatBox.js",(c=t.getElementsByTagName(n)[0]).parentNode.insertBefore(a,c)}(window,document,"script"),window.onload=function(){WebConnect.configOptions({integrationId:"XXXXXX",partnerToken:"ADDYOURTOKENHERE",partnerTeam:"XXX-XXX",apiHost:"https://api.goboomtown.com",frameSource:"https://webchat.goboomtown.com"})};
</script>

Note: the items in red will need to be updated with your Organizations actual credentials.