How to toggle Inline Chat with a button in the web page

If you want the inline interface controlled by a button located in the page content as opposed to the launcher that is fixed to the bottom right of the browser window you can use the code located in this article. 

Step-by-step guide

First, deploy inline chat with the code provided in the designer section.


Add this bolded piece of script to the Deploy code underneath the first )); after the boot section of the deploy script as below


Velaro('boot', {
                   siteId: 2097,
                   groupId: 0,
                  // customVars are optional.
                   customVars: {
                   exampleKey1: 'exampleValue1',
                   exampleKey2: 'exampleValue2'
                                        }
                    });


document.getElementById('chat-button').addEventListener('click', function() {
    if(Velaro('isExpanded')) {
        Velaro('collapse')
    } else {
        Velaro('expand')
    }
});
</script>



To Decide where the button will display on the page, you can place this Div element sharing an ID with the JS above for launching the button



<button id="chat-button">Chat Now</button>




IF and ONLY IF you wish to also hide the inline chat launcher that is fixed to the side of the browser window, you can use this code added into the boot section of the regular inline deploy 


Velaro('boot', { ... , disableLauncher: true // only if they want to disable default launcher });