chat embedded_svc.settings.fallbackRouting not working

Question

I am trying to implement a fallback routing mechanism for my chat implementation with skills routing.

I am putting my chat snippet in a VisualForce page:

<apex:page showheader="false" sidebar="false" standardStylesheets="false">

    <style type='text/css'>
        .embeddedServiceHelpButton .helpButton .uiButton {
            background-color: #005290;
            font-family: "Arial", sans-serif;
        }
        .embeddedServiceHelpButton .helpButton .uiButton:focus {
            outline: 1px solid #005290;
        }
    </style> 

    <script type='text/javascript' src='https://service.force.com/embeddedservice/5.0/esw.min.js'></script>
    <script type='text/javascript'>
        var initESW = function(gslbBaseURL) {
            embedded_svc.settings.displayHelpButton = true; //Or false
            embedded_svc.settings.language = ''; //For example, enter 'en' or 'en-US'


            embedded_svc.settings.fallbackRouting = ['buttonId1','buttonId2']; //An array of button IDs, user IDs, or userId_buttonId


            embedded_svc.settings.enabledFeatures = ['LiveAgent'];
            embedded_svc.settings.entryFeature = 'LiveAgent';

            embedded_svc.init(
                'my sub-domain url',
                'my community url',
                gslbBaseURL,
                'my org id',
                'Skills_Chat_POC',
                {
                    baseLiveAgentContentURL: 'content url',
                    deploymentId: 'deploymentId',
                    buttonId: 'buttonId1',
                    baseLiveAgentURL: 'baseLiveAgentURL',
                    eswLiveAgentDevName: 'EmbeddedServiceLiveAgent_...',
                    isOfflineSupportEnabled: false
                }
            );
        };

        if (!window.embedded_svc) {
            var s = document.createElement('script');
            s.setAttribute('src', 'mydomain.my.salesforce.com/embeddedservice/5.0/esw.min.js');
            s.onload = function() {
                initESW(null);
            };
            document.body.appendChild(s);
        } else {
            initESW('https://service.force.com');
        }
    </script>
    
</apex:page>

Now - I put in the line embedded_svc.settings.fallbackRouting an array of button Ids that I have = ['buttonId1','buttonId2'];.

Expected behavior:

1. If button buttonId1 has an available agent, the button should be clickable to start a chat session.
2. If button buttonId1 does not have an available agent - the chat mechanism should check if buttonId2 has an available agent and if yes - the button should be clickable to start a chat session.

Problem:

The 2nd choice does not happen never, the button shows availability only for the buttonId1 and if it is not available, nothing happens.

Questions:

Am I implementing this wrong?

Is this the expected behavior of embedded_svc.settings.fallbackRouting?

Is there another way to get fallback routing?

Answer 1

Well I am not sure if you're still looking for answer to that but I had to implement fallback routing and that too dynamically. So initially it checks the agent availability based on the button defined in embedded setting, that's a global button and all the agent must be added to the associated queue, so that even if a single agent is available then button is clickable. And then I am dynamically assigning values to fallback setting just before calling the start chat method, so that it'll route to correct agent only.

Aura Pre-chat component Helper.js : on click of start chat button

 var fallbackArray ='userID_buttonID'; //or 'buttonID1_buttonID2'
    var message='fallbackArrayValue#'+fallbackArray;
    window.postMessage(message, '*');

   //setting time out to delay the execution of code till fallback settings get applied
    window.setTimeout(
          $A.getCallback( function() {
           cmp.find("prechatAPI").startChat(preChatfields);
      }));

host javascript where all other embedded settings are defined: to read the values sent by prechat component and to assign it dynamically to fallback setting

window.addEventListener("message", function(event) {
     if (!JSON.stringify(event.data).includes("fallbackArrayValue")) {
           // Not the expected message: reject message!
            return;
       }
       console.log('event.origin:'+ event.origin + '***event.data: '+JSON.stringify(event.data));
        var fallbackArray = JSON.stringify(event.data).split('#');
        
     //To remove extra quotes(") from the end of string
        fallbackArray = fallbackArray[1].substring(0, fallbackArray[1].length - 1)

    //since fallback routing only accepts array, hence wrapping the string inside square bracket
        embedded_svc.settings.fallbackRouting = [fallbackArray]; 
            });