Skip to content
Documentation
FacebookYouTubeX (Twitter)

Mobile positioning

In this tutorial we will show you how to better and simply position Pingstreams Widget on your website when served on mobile browser. Steps to make them is very easy:

  1. Copy and paste the basic widget script code
  2. Set mobileMarginX and mobileMarginY property inside window.pingstreamsSettings
  3. Use the function window.Pingstreams('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 = "<<PINGSTREAMS_PROJECT_ID>>"
window.pingstreamsSettings=
{
projectid: PROJECT_ID,
startHidden: true,
mobileMarginX: "20px",
mobileMarginY: "10px"
};
(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'));
</script>
</head>
<body>
This Pingstreams example will position the widget with custom margins on mobile devices
<div>
<b>Agents available:</b> <span id='available'>loading availability...</span>
</div>
</body>
</html>

Here is in detail what exactly mobileMarginX and mobileMarginY do:

Mobile positioning diagram

  • mobileMarginX: Sets the horizontal margin from the right edge of the screen
  • mobileMarginY: Sets the vertical margin from the bottom edge of the screen

These properties only apply when the widget is displayed on mobile devices and allow you to fine-tune the positioning to avoid conflicts with your mobile UI elements.