In this tutorial we will show to you how to force the loading of Tiledesk Widget on your website.
By default widget is not loaded. It will always appear after 5 seconds unless one of the below listed event triggers an earlier start. This prevent your website to load tiledesk resources and improve the entire performance loading. Only once your website is loaded and user move/scroll mouse, tiledesk starts load widget source.
Steps to make them is very easy:
Copy and paste the basic widget script code
Use the window event listener to hook 'load' event
Manually fire one of the following event listed:
scroll
mousedown
mousemove
touchstart
keydown
Here is the full code example
<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 you can add a funtion to detect the platform where the widget is currently running on.
<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'));
let isMobile = detectIfIsMobile(window)
if(isMobile){
window.addEventListener('load', (event)=> {
document.dispatchEvent(new Event('mousemove'))
})
}
/** check current platform **/
function detectIfIsMobile(windowContext) {
let isMobile = false;
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(windowContext.navigator.userAgent))
isMobile = true
else
isMobile = false
return isMobile;
}
</script>
</head>
<body>
This Tiledesk example will force the loading of the widget <b>only on MOBILE PLATFORM</b>
</body>
</html>
