WebsiteCommunityTutorialsGet started

Hide widget

In this tutorial we will show to you a simple tutorial of how to hide widget if no agent is still available. Steps to make them is very easy:

  1. Start widget in hidden mode setting startHidden boolean property to 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 example

<html>
    <head>
        <script type="application/javascript">
            var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
            window.tiledeskSettings=
            {
                projectid: PROJECT_ID,
                startHidden: true
            };
            (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/6/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/v3/${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>

View result here

PreviousTutorialsNextShow/Hide widget programmatically

Last updated

Was this helpful?