Customize your chat widget

In Tidio, you can customize your Tidio chat widget to catch your website visitors' attention or to suit the widget's appearance to your branding as well as business needs.

In this article, you will learn:

• The possible widget appearance settings
• How to change the widget's general look
• How to modify the widget's detailed content
• How to change the widget's visibility and position (on desktop and mobile)
• How to use the Multilanguage function
• What the Advanced section offers

The available settings

You can customize your Tidio widget by going to the Settings > Live Chat > Appearance section. In there, you will find several different sub-sections that allow you to modify different aspects of your chat widget:

The different sections are as follows:

• General
• Content
• Visibility and position
• Multilanguage 
• Advanced

At all times, you also see a preview of your widget on the right. From the Preview menu on the right, you can select a state of the widget that you'd like to see (e.g. what the Pre-Chat Survey looks like, or an example of a live chat conversation):

Using the preview can be very helpful in deciding how to configure your widget, as it allows you to see what Tidio will look like for your visitors before you even make any changes.

General

Background color

Here you can change the general color of your chat widget. You can select from a number of available color themes (gradients), or select a custom color using the Pick your color option (that only allows solid colors, though - no gradients!).

Action color

This choice affects the color of several smaller elements of the widget, like the Home and Chat buttons, or the Send button. This customization allows your Tidio widget to be more on-brand and compatible with the rest of the website. You can pick one of the listed colors or pick your own, custom color:

Text color

This setting only appears if you've selected your own custom background color; it allows you to modify how the majority of text appears in the widget. Again, you can select one the pre-set colors or create your own:

Brand Logo

This option allows you to upload your own logo to use instead of our default Tidio branding. This feature is only available to our Plus subscribers. 

Content

Home

In the Home tab, you decide what the visitors see when they open your widget.

The widget's home screen is normally your visitors' first interaction with the widget in general, and you can change several aspects of it. The visitor can switch to the chat screen to message you, or use a conversation starter (if you've added any).

Welcome image

You can choose to display a default collage of your operators' profile pictures at the top of your widget, or use a single image of your own choice - like your company logo.

Header

The header is a short message that will display at the top of your widget's home screen. It will also appear at the top of the widget's chat screen, but only if the visitor is interacting with a flow or the Lyro AI agent.

Message

This is a visually smaller piece of text that appears directly underneath the large header, and you can modify it to your liking.

Conversation starters

If you wish, you can add different conversation starters for your visitors to choose from. This is a quick way to encourage your visitors to initiate a chat; when a visitor clicks on a specific conversation starter, you simply receive that exact message in your live conversations folder.

You can add many starters, but enable up to five at any given time. Those starters will appear on the widget's home screen; you can also remove starters permanently or change their order.

Chat

In the Chat tab, you determine your status texts, offline message, and whether your visitors can submit tickets when you're offline.

Online status

A message that is displayed when your widget is online; this happens when at least one live operator is logged in and has their own status set to online.

Offline status

A message that is displayed when your widget is offline; this happens when none of your operators are online.

Offline message

An additional message that pops up if a visitor tries to initiate a chat (during your offline time). Whenever this happens, the offline message will also ask the visitor to provide their email address (for getting back to them easily). This function cannot be disabled.

Let visitors create ticket when offline

This option replaces the offline message (described above); instead of leaving their email address and a chat message, the visitor will be asked to submit a ticket. This way, they will not be able to use the chat widget until you're back online, and you will receive the ticket inside your Unassigned tickets folder.

Pre-Chat Survey

It is a form that can ask your visitor for their name, email address, phone number, or GDPR compliance; it also gives the option to ask for newsletter permission. On top of that, the survey allows the visitor to select a department (if you have that feature available on your project - it's meant for our Plus package subscribers).

If enabled, the Pre-Chat Survey is displayed to visitors when they try to send their first chat message, and it's mandatory to complete then. The collected information is saved, so that you can see it when chatting later; the data will also be listed on the Customers section of your Tidio project. 

Minimalized

Here, you can enable and modify the button label - a short message that is displayed next to the chat icon, when the chat widget is closed.

It can be useful for increased visibility or as a simple greeting - if you're not using an automated flow message. Please note that the button label won't have any effect if you set your desktop button type to Sidebar (more on that in the next section of this article).

Visibility and position

Here you can determine where your Tidio widget is displayed and how. There are several options for the desktop version of your website as well as the mobile version, and you can decide about both aspects of your widget separately.

Display

The Display toggle allows you to decide whether to show or hide the widget on your website in general. You can configure this separately for the desktop and the mobile version.

Hide on specific pages allows you to make the widget invisible on certain pages (desktop or mobile). Here you can read more about this feature.

You can also hide your widget from specific countries by using the Hide or display for specific countries option. Note that visitors from these countries will still be able to access your website; only the Tidio widget will remain hidden. 

Widget/Button position

This option lets you decide if the widget is displayed in the bottom-right corner of your website, or the bottom-left corner. This can be configured separately for desktop and mobile devices.

If you wish to change the position vertically - see our article explaining the advanced settings. 

Button type (desktop only)

This setting lets you decide what form the widget takes (on desktop) when it's closed.

The default version of the closed desktop button is Corner; the round widget button sits in the bottom-right (or -left) corner of your page, and displays the button label (if enabled in the Minimalized section, mentioned earlier).

The Sidebar version displays your widget on the right (or left) side of the page; it takes the form of a small rectangle and with its own text label and color.

Button size (mobile only)

For the mobile version, you can decide about the button's size; you can select from among three sizes.

Multilanguage

Advanced

Here, you can modify some of the remaining options for your Tidio widget.

Display widget when operators are offline

This option allows you to decide whether to show the widget on your website when you are offline, which is the default. 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. Alternatively, you can allow them to submit tickets (as mentioned earlier in this guide).

Background image

Here you can enable an additional background image, which will be displayed as part of your widget's home screen (please note that it will blend with your general color theme). You can choose from among several available images, or upload your own.

Enable widget sounds

Whenever your website visitors receive a message from you, your flows, or the Lyro AI agent, they will normally hear a notification. This setting allows you to disable these sounds in your widget, if you prefer.