Custom website chat button

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 bold 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')    } });




To Decide where the button will display on the page, you can place this Div element sharing an ID with the JavaScript 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



Was this article helpful?