Customize Your Chat Widget

In Tidio, you can customize your Tidio chat widget to catch your website visitors' attention or to fit the widget's appearance to your branding.

In this article, you will learn:

• What are the widget appearance settings
• What are the visibility settings
• What's the Get Started widget
• What's the mobile widget settings
• What are Pre-Chat Survey settings
• What's a Sidebar widget
• What's Chat Page

To learn even quicker and see all available settings, watch our video:

Widget Settings

You can customize your Tidio Widget by going to Settings > Channels  > Live Chat > Appearance  > Widget settings section. 

The changes made in the widget settings are based on your preferences & how you want the chat widget to be displayed for your website visitors.

What can be changed in the Widget Settings?

In the Widget Settings section, you can find and edit the following information:

Background Color

Allows you to change the color of your chat's widget.

Welcome Image 

You can decide whether you wish to display your operators' pictures or use the logo of your business. 

Online Status 

A message will be displayed when you are 'online' in your Tidio panel.

Widget Position 

An option to choose where the widget will be displayed; on the left or right side. If you wish to change the position perpendicularly - see our article explaining the advanced settings. 

Button Label 

A message is displayed next to the closed chat widget.

Label Text 

A text is displayed next to the closed chat's widget icon. 

Enable widget sounds

Give you an option yo use sound in your widget. Whenever your website visitors receive a message from you, they will hear a sound of a new message, etc. 

Brand Logo

This option allows you to upload your own logo to use instead of our Tidio branding. At this moment, this feature is only available for our Tidio+ users. 

While editing the Widget Settings,  you can see how the chat will be presented on your site. A chat preview will be available on the right side so that you can see the changes in real time.

Widget Visibility

In the following section, you can decide about the visibility settings of your widget. 

The Display Widget toggle allows you to decide whether to show or hide the chat widget on your website. 

The Devices option, allows you to choose the exact devices on which the chat widget should be shown. For example - if you decide to show the chat widget only on the desktop version - the Tidio widget will be hidden for all mobile users who are opening your website in the mobile version. 

Display the chat when you're offline option allows you to decide whether to show the widget on your website when you are offline. Disabling the toggle will hide the widget from your website whenever you change your status to offline. 

If you decide to keep the widget visible when you are offline - you can adjust your offline message and status that will be visible to your website visitors. That will help you let them know, for example, when you can respond. 

Get Started Widget

Under the Get Started section, you can set a welcome screen displayed when the conversation in the chat's widget still needs to be initiated. For example, when the chatbots are disabled, and the visitor hasn't sent a message yet. 

In the Get Started section, you can edit the Status and message that can encourage your website's visitors to send you a message. As well as choosing or uploading your Background picture.

Mobile Widget

In the Mobile Widget section, you can change the chat's widget Position on mobile devices and the Button Size. 

Pre-chat Survey

The Pre-Chat Survey settings are located right below the Get Started section.

Pre-Chat Survey can ask your visitor for their name, email address, phone number, or GDPR compliance. 

The Pre-Chat Survey will be displayed when visitors type in their first message to attempt to start a conversation with you. The collected information is later saved in the conversation panel as well as on the list with all the contacts collected through the Tidio chat. 

A sidebar is a static widget displayed on the right side of the page in a form or a small rectangle. 

If you feel the Sidebar option will work better on your site - you can set it up in the Settings > Channels > Live Chat > Sidebar section.

Chat Page

The Chat Page is a completely separate page with only the Chat's Widget that allows you to open the Tidio chat in a new, separate window.

There are some additional options available, like a change of Background Color setting, and the ability to upload your Company Logo, Company URL, Header, and Welcome message.

You will also find the Chat Page URL address and the Search Engine Optimization settings there.