At Tidio, you can change the widget's position between the right and left sides in your Tidio admin panel. If you wish to move and display the widget a bit higher or lower, it can be done using the custom CSS code implementation that we explain in this article.

Please note that separate options are available for different versions of your Tidio widget: the desktop version, the mobile version, and the Sidebar.

In this article, you'll learn:

• How to change widget position horizontally (left/right)
• How to change widget position vertically (higher/lower)

Horizontal position (left/right)

You can change the left/right position of your desktop chat widget by going to the Settings > Live Chat > Appearance section of your Tidio admin panel, where you can find the Widget position option (inside the Look & feel tab):

Vertical Position (higher/lower)

A custom CSS code implementation is required if you would like to move our chat icons a bit higher or lower. The implementation of the code will allow you to move the chat widget of the custom amount of spaces. 

If you are unsure where to place the code or access your code source, we recommend contacting your web developer to help you with the implementation. 

How to use the CSS code 

To move the widget, add the code shown below into the header of the website, directly above the closing </head> tag.

<style>
#tidio-chat-iframe { bottom: 50px !important; }
@media only screen and (max-width: 980px) {
 #tidio-chat-iframe { bottom: 50px !important;}
}
</style>

The first line #tidio-chat iframe controls the placement of the widget on both desktop and mobile devices. 

The second and third line controls the movement of the widget only on mobile devices (it overrides the first rule), allowing to specify the target screen size as well. If you just want to move the widget for mobile devices, only change those lines - or look at the code above - if you want to move the chat only on desktop.

The value of the movement is represented by 'px'.

The direction of the movement is set by the first value in the { } brackets:

top - means 'away from the top'

bottom - means 'away from the bottom'

left - means 'away from the left'

right - means 'away from the right'

Using a negative px value (e.g. setting it to -100px) will move it in the opposite direction, so e.g. if you'll type in bottom: -100px the code, the chat will go downwards for 100pix on the website.