Skip to content
Documentation
FacebookYouTubeX (Twitter)

Force widget loading without user interaction

In this tutorial we will show you how to force the loading of Pingstreams 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 Pingstreams resources and improve the entire performance loading. Only once your website is loaded and user move/scroll mouse, Pingstreams starts load widget source.

Steps to make them is very easy:

  1. Copy and paste the basic widget script code
  2. Use the window event listener to hook ‘load’ event
  3. 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 = "<<PINGSTREAMS_PROJECT_ID>>"
window.pingstreamsSettings=
{
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.Pingstreams=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.pingstreams.com/v6/launch.js";
fjs.parentNode.insertBefore(js, fjs);
}(document,'script','pingstreams-jssdk'));

/** listen to 'load' window event **/
window.addEventListener('load', (event)=> {
document.dispatchEvent(new Event('mousemove'))
})
</script>
</head>
<body>
This Pingstreams example will force the loading of the widget
</body>
</html>

Force the loading only on mobile platform

Section titled “Force the loading only on mobile platform”

If you only want to force the loading of the widget on mobile you can add a function to detect the platform where the widget is currently running on.

<html>
<head>
<script type="application/javascript">
var PROJECT_ID = "<<PINGSTREAMS_PROJECT_ID>>"
window.pingstreamsSettings=
{
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.Pingstreams=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.pingstreams.com/v6/launch.js";
fjs.parentNode.insertBefore(js, fjs);
}(document,'script','pingstreams-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 Pingstreams example will force the loading of the widget <b>only on MOBILE PLATFORM</b>
</body>
</html>