Smartify

Hide widget

In this tutorial we show a simple way to keep the widget hidden when no agent is available.

1

Start the widget in hidden mode

Set the startHidden boolean property to true in the widget settings:

window.tiledeskSettings =
{
    projectid: PROJECT_ID,
    startHidden: true
};
2

Get widget settings

Retrieve widget settings using the Tiledesk APIs to check agent availability.

3

Show the widget only if an agent is available

If agents are available, call window.Tiledesk('show') to display the widget.

Here is the full code example:

index.html
<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: https://andreasponziello.w3spaces.com/tiledesk-widget-hidden-on-unavailability-example.html

Was this helpful?

PrevioustutorialsNextWidget Authentication