# Change the Tiledesk widget position on my webpage

**URL:** <https://tiledesk.discourse.group/t/change-the-tiledesk-widget-position-on-my-webpage/73>\
**Category:** Community Support\
**Created:** [June 25, 2021, 4:01pm UTC](https://tiledesk.discourse.group/t/change-the-tiledesk-widget-position-on-my-webpage/73 "2021-06-25T16:01:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrealeo](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@andrealeo](https://tiledesk.discourse.group/u/andrealeo)\
**Post date:** [June 25, 2021, 4:01pm UTC](https://tiledesk.discourse.group/t/change-the-tiledesk-widget-position-on-my-webpage/73/1 "2021-06-25T16:01:08Z")

</div>

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](https://developer.tiledesk.com/widget/web-sdk)

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

```auto
   <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](https://global.discourse-cdn.com/free1/uploads/tiledesk/original/1X/2b6921dc3ffea7ca055e2806ef1f7325e27b07a1.gif)

---

<div class="post-metadata">

**Author:** ![michele](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@michele](https://tiledesk.discourse.group/u/michele)\
**Post date:** [July 2, 2022, 9:05am UTC](https://tiledesk.discourse.group/t/change-the-tiledesk-widget-position-on-my-webpage/73/2 "2022-07-02T09:05:35Z")

</div>