In Tidio, you can change the widget position between the right and left side of your Tidio admin interface. If you want to move and display the widget a little higher or lower, you can do so by implementing custom CSS code that we explain in this article.
Please note that there are different options for different versions of your widget in Tidio: the desktop version, the mobile version, and the sidebar.
In this article you will learn:
Horizontal position (left/right)
You can change the left/right position of the chat widget on desktop by going to the Settings section.> Live chat> Appearance in your Tidio admin interface, where you can find the widget placement option (within the Appearance tab):
Tip: If you want the widget to appear on a specific side only at certain times of the day, you can combine the position change with a JavaScript script that will check the time and update the CSS accordingly.
Vertical position (high/low)
A custom CSS code implementation is required if you want to move our chat icons a little higher or lower. Implementing the code will allow you to move the chat widget by a custom amount of space.
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 CSS code
To move the widget, add the code shown below to your site’s header, just above the tag.< /head> The clasp.
The first line #tidio-chat iframe triggers the widget’s placement on both desktop and mobile devices.
The second and third lines enable the widget to be moved only on mobile devices (they override the first rule), and also allow you to specify the target screen size. If you only want to move the widget for mobile devices, only change these lines – or look at the code above – if you only want to move the chat on a desktop computer.
The offset value is represented by ‘px’ .
The direction of the movement is defined by the first value in brackets { }:
top – means ‘far from the top’
bottom – means ‘far from the bottom’
left – means ‘far from the left side’
right – means ‘far from the right side’
Using a negative px value (for example, setting it to -100px) will move it in the opposite direction, so if you type bottom: -100px in the code, the chat will move down 100px on the site.
Practical example: If you have an advertising banner at the top of your site, you can use CSS to move the widget down so it doesn’t obscure the banner.
Further customization
In addition to changing the widget’s position, there are other options for customizing the Tidio widget. These options include:
- Change colors: You can change the widget colors to match the overall design of your site.
- Resize: You can resize the widget to fit where you place it.
- Add a logo: You can add your personal logo to the widget to reinforce your brand.
- Set up welcome messages: You can set up custom welcome messages that users will receive when they open the widget.
Changing colors
To change the widget colors, go to the Settings section.> Live chat> Appearance in your admin interface. There you can choose different colors for the widget’s background, text, and buttons.
Resize
Resizing the widget is also done in the same section. You can set the height and width of the widget to fit where you want to place it.
Adding a logo
To add a logo, look for the Add Logo option in the Tidio admin interface. Upload your logo and save your changes.
Setting up welcome messages
To set up welcome messages, go to the Settings section.> Live chat> Messages in your admin interface. There you can add custom messages that will be received by users.
summary
Changing the position and customization of the Tidio widget is a simple process that can improve the user experience on your site. By following the instructions in this article, you can customize the widget to suit your needs and the needs of your users.
If you have any further questions or need further assistance, feel free to contact Tidio support or a professional web developer.
