Make SF Chat appear only when agent is available

Question

I recently created a Chat Button in SF successfully. I created the Routing, the Queue, Pre Chat button and the Chat Embedded Deployment. I used the code snippet form the embedded deployment and placed on my website where I want the chat to take place and it works fine. So when I click the chat "button" it brings up the prechat form and then prompts an agent to go live and a chat starts when they arrive. My question is this and I am not sure how to do this or even get started: What I want is in my website, I want the chat option only to appear when an agent is available/live. Right now, there is a chat "button" which says agent offline (I believe this is default SF setting). I would like the chat "button" only to appear when an agent is live. Is there a setting in SF that allows me to do that? Do I know add a special tag or call a special method to make this feature work? Please help me get started because I cant find much on google. Thank you

Answer 1

    function checkAvailability() {
        const elementEnabled = document.getElementsByClassName('uiButton helpButtonEnabled');
        const elementDisabled = document.getElementsByClassName('uiButton helpButtonDisabled');
        if(elementEnabled && elementEnabled.length > 0) {
            document.getElementsByClassName('embeddedServiceHelpButton').item(0).style.display = "block";
        }
        if(elementDisabled && elementDisabled.length > 0) {
            document.getElementsByClassName('embeddedServiceHelpButton').item(0).style.display = "none";
        }     
    }

   
    window.setInterval(function () {
        checkAvailability();
    }, 500);

this script should work. Please note that delay for chat and SF is one minute

Answer 2

The functionality you are looking for cannot be done with the standard chat button. You would need to hide the default button using the embedded_svc.settings.displayHelpButton snippet setting, check for agent availability using the Omni API, and implement a custom chat button, then use the start chat API to start the chat

Details of start chat API usage : https://developer.salesforce.com/docs/atlas.en-us.snapins_web_dev.meta/snapins_web_dev/embedded_services_web_start_and_end_chat.htm