Smartify

Force widget loading without user interaction

In this tutorial we show how to force the loading of the Tiledesk Widget on your website.

By default the widget is not loaded immediately. It will appear after 5 seconds unless one of the listed events triggers an earlier start. This prevents your website from loading tiledesk resources immediately and improves overall performance. Only once your website is loaded and the user moves/scrolls/mouses/touches/presses keys, Tiledesk starts loading the widget source.

Steps to enable forced loading:

1

Copy and paste the basic widget script code

Insert the widget script snippet into your page (example below).

2

Hook the window 'load' event

Use a window event listener to wait until the page has loaded.

3

Manually dispatch one of the following events to trigger widget loading

  • scroll

  • mousedown

  • mousemove

  • touchstart

  • keydown

In the example below we dispatch a synthetic 'mousemove' event on window load to force the widget to start loading.

Here is a full code example:

force-load.html
<html>
    <head>
        <script type="application/javascript">
            var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
            window.tiledeskSettings=
            {
                projectid: PROJECT_ID,
            };
            (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/v6/launch.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document,'script','tiledesk-jssdk'));

            /** listen to 'load' window event **/
            window.addEventListener('load', (event)=> {
                document.dispatchEvent(new Event('mousemove'))
            })

        </script>
    </head>
    <body>
        This Tiledesk example will force the loading of the widget
    </body>
</html>

Force the loading only on mobile platform

If you only want to force the loading of the widget on mobile, add a function to detect the platform and only dispatch the event when on mobile.

PreviousPayment App TutorialNextTags