Start snap-in chat with custom button

Question

I'm trying to implement Snap-ins to replace existing contact/chat functionality. To make it as seamlessly as possible to users, I would like to use our existing chat buttons in our web application instead of the standard floating chat/contact us buttons. Is there an official way to do this?

Need to:

1. detect online/offline status to show Chat/Contact buttons accordingly.
2. When the Chat button is clicked, start a snap-in chat session.
3. When the Contact button is clicked, show the offline web-to-case form.

Answer 1

Was able to use own buttons to activate chat.

1. Add styles to hide standard buttons:

   .embeddedServiceHelpButton .helpButton .uiButton.helpButtonDisabled { display: none; }
   .embeddedServiceHelpButton .helpButton .uiButton.helpButtonEnabled { display: none; }
   

2. Add click listener to any chat buttons you want with class:

   const chatHandler = function() {
     if (typeof (<any>window).embedded_svc !== 'undefined') {
       (<any>window).embedded_svc.onHelpButtonClick();
     }
   };
   const els = document.getElementsByClassName('chat-button');
   Array.prototype.forEach.call(els, function(el) {
     el.addEventListener('click', chatHandler);
   });
   

For detecting online/offline status to change buttons style, I ended up using MutationObserver, creating a global observer for document looking for element with class embeddedServiceHelpButton and then creating an observer for any change in element with class helpButtonLabel. This element's text is changed by Salesforce Snap-ins when online/offline status changes.