Disable widget when no agent is available

Community Support
1

Hi folks, my question is, if it is possible to disable the widget when there is no agent available (instead of having the chat saying “no agent available” or “it’s not our opening hours” …).

Thanks in advance for any info (or JavaScript) :slight_smile:

2

@andrealeo do you have any solution on this?

3

Hi madlen,

Just use the source of this online example:

https://andreasponziello.w3spaces.com/tiledesk-widget-hidden-on-unavailability-example.html

Code is very easy.

  1. Start the widget in hidden mode. (startHidden: true)
  2. Get widget settings using Tiledesk APIs
  3. Use the function window.Tiledesk(‘show’) to show the widget ONLY if some agent is available.

Here is the full code of the page, in the case you can’t access the original one:

<html>
    <head>
        <script type="application/javascript">
            const projectId = "61c4468652d2fa00198da787"; // YOUR PROJECT ID HERE
            window.tiledeskSettings= 
            {
                projectid: projectId, // MOVE YOUR PROJECT ID TO THE "projectId" VARIABLE ABOVE
                startHidden: true // SETTING THIS PROPERTY WILL START THE WIDGET IN HIDDEN MODE
            };
            (function(d, s, id) { 
                var w=window; var d=document; var i=function(){i.c(arguments);};
                i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i;                    
                var js, fjs=d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js=d.createElement(s); 
                js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v5/launch.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document,'script','tiledesk-jssdk'));

            getWidgetSettings((err, result) => {
                const users_available = result['user_available']
                let availability = true;
                if (!users_available || users_available.length == 0) {
                    document.getElementById('available').innerHTML = "No one is available, widget will stay hidden!";
                }
                else {
                    document.getElementById('available').innerHTML = "Someone is available, showing widget...";
                    window.Tiledesk('show');
                }
            });

            function getWidgetSettings(callback) {
                const options = {
                    url: `https://api.tiledesk.com/v2/${projectId}/widgets`, // PROJECT ID IS ALSO USED HERE TO GET PROJECT SETTINGS
                    method: 'GET'
                };
                let xmlhttp = new XMLHttpRequest();
                xmlhttp.open(options.method, options.url, true);
                xmlhttp.onreadystatechange = function() {
                    if (callback && xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText) {
                        try {
                            const json = JSON.parse(xmlhttp.responseText);
                            callback(null, json);
                        }
                        catch (err) {
                            callback(err, null);
                        }
                    }
                };
                xmlhttp.send(null);
            }
        </script>
    </head>
    <body>
        This Tiledesk example will hide the widget if no agent is available
        <div>
            <b>Agents available:</b> <span id='available'>loading availability...</span>
        </div>
    </body>
</html>
4

Great, works perfectly! Thanks a lot !!! :slight_smile: