Smartify

Mobile positioning

In this tutorial we show how to simply and effectively position the Tiledesk Widget on your website when served on a mobile browser.

1

Add the basic widget script

Copy and paste the basic widget script into your page.

2

Set mobile margins

Set the mobileMarginX and mobileMarginY properties inside window.tiledeskSettings to adjust the widget's horizontal and vertical offset on mobile.

3

Show the widget only when agents are available

Use the function window.Tiledesk('show') to display the widget only if an agent is available.

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,
                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.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'));

        </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>

Here is, in detail, what exactly mobileMarginX and mobileMarginY do:

Mobile positioning

For related topics:

  • https://developer.tiledesk.com/widget/tutorials/widget-force-loading

  • https://developer.tiledesk.com/widget/tutorials/custom-size

Privacy & cookies note

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the privacy policy.

PreviousCustom size (width/height)NextPreset the Widget on a specific Department