Widget Position
  • 2 Minutes to read
  • Comment
  • Dark

Widget Position

  • Comment
  • Dark

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.  

In this article, you'll learn:

Left <> Right Position

You can change the position of our chat widget between the right and left side or by going to the Settings > Channels > Live Chat > Appearance > Widget Settings > Chat Position section your Tidio admin panel. 

Widget Position section in your Tidio admin panel


Higher <> Lower Position 

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. 


Due to every website being different in its structure, the CSS code implementation may differ and should be done by a professional developer to ensure that it will work right.

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.

#tidio-chat-iframe { margin-bottom: 10em !important; }
@media only screen and (max-width: 980px) {
 #tidio-chat-iframe { bottom: 30px !important;
 margin-bottom: 0em !important; }

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 'em', which is usually 16pix in terms of display movement. The value is set by multiplying the em, so e.g., if you'll set the chat to move for 2em - it will be moved by 32pix

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 em value (e.g. setting it to -2em) will move it in the opposite direction, so e.g. if you'll type in bottom:-2emin the code, the chat will go downwards for 32pix on the website.

It's also crucial to leave the !important value, so the code will be executed at all times.

If you still have some questions for our team after reading this article, don't hesitate to contact us.

Was this article helpful?