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, or select a custom color using the Pick your color option.

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 agents' 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.

Online status

A message that is displayed when your widget is online; this happens when at least one live agent 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 agents are online.

Chat

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

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.

Privacy policy message

This options allows you to display a custom privacy policy message at the top of your Tidio widget whenever someone starts chatting. The message can provide some basic information that you need to share with such visitors, and can be closed by hitting the 'X' icon on the message itself.

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. You can limit your widget visibility to specific domains or countries. There are also 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.

Trusted domains

You can decide if your Tidio widget is going to appear on any domain where it's installed, or only on the domains you list here.

Country visibility

This setting lets you decide if you'd like to show your Tidio widget only to visitors from specific countries, or perhaps hide your widget from certain countries. Note that this only affects which visitors see your Tidio widget, and not who can enter your website.

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.

Page visibility

You can make the widget invisible on certain pages (desktop or mobile). You can use the contains option if you want to hide Tidio on any URL that includes that particular string, or the exact option if you want to hide Tidio on some specific URLs.

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 agents 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.