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.

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') {
    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.

  • can you please share also the mutationObserver code? – Itai Shmida Jul 18 '19 at 8:35
  • How do you operate within the window object when it's locked by the Locker Service? I am having trouble reaching embedded_svc. It would be great if you can elaborate on your answer! – Arthlete Aug 8 '19 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.