Custom size (width/height)

In this tutorial we will show to you how to better and simply change the Tiledesk Widget size on your website

Steps to make them is very easy:

Copy and paste the basic widget script code
Subscribe to onInit Tiledesk event
Add custom stylesheet to override the default values

Here is the full code example

<html>
    <head>
        <script type="application/javascript">
            var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
            window.tiledeskSettings=
            {
                projectid: PROJECT_ID,
                startHidden: true,
            };
            (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'));

            window.Tiledesk('onInit', function (event_data) {
                //var tiledeskDiv = document.getElementById("tiledeskdiv")

                var head = document.getElementsByTagName('head')[0];
                var style = document.createElement('style');
                style.id = 'customStyle';
                style.type = 'text/css';

                style.innerHTML += '#tiledeskdiv { height: 800px; width: 400px; }\n';

                head.appendChild(style);
            })

        </script>
    </head>
    <body>
        This Tiledesk example will change the widget size in height and width as you want
        <div>
            <b>Agents available:</b> <span id='available'>loading availability...</span>
        </div>
    </body>
</html>

View result here

PreviousMobile positioning NextConversation Embedded Apps

Last updated 1 month ago