Change the Tiledesk widget position on my webpage

Community Support
1

You can change the widget position using the following properties:

*marginX : Set the side margin, left or right depending on the align property. Value type: string. Default value : “20px”

*marginY : Set the distance from the page bottom margin. Value type: string. Default value : “20px”

You can find more here: Widget SDK - Tiledesk Docs

You can also customize the widget position using CSS and Javascript as follow:

Moreover in this example I set different positions for :

  • Widget Balloon-> marginX:100px, marginY:300px
  • Widget Chat Window → right:10px, bottom:10px
   <script type="application/javascript">

    window.tiledeskSettings =
    {
        projectid: "5f47e834c85eca0012c97888",
        marginX: "100px",
        marginY: "300px",
    };
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://widget.tiledesk.com/v4/launch.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'tiledesk-jssdk'));


    window.tileDeskAsyncInit = function () {
        window.tiledesk.on('onInit', function (event_data) {
            var head = document.head || document.getElementsByTagName('head')[0]
            var style = document.createElement('style');
            console.log('TEST HTML HEAD ', head)
            style.type = 'text/css';
            var css = ' #tiledesk-container.open #tiledeskdiv {  right: 10px !important;bottom: 10px !important}';
            style.appendChild(document.createTextNode(css));
            head.appendChild(style);
        });
    }
</script>

giu-24-2021 18-16-02