How to Customize Your Chat Widget

In this article, you will learn how to customize your chat widget that is visible on your website.

The ‘New’ Widget
Sidebar
Chat Page

At our Tidio App you can choose, edit and use these three chat widgets:

How the 'Get Started' widget looks like in our Tidio app — *How our Tidio ‘widget’ looks*

If you would like to customize the ‘New’ Chat Widget, you can do that by going to Settings > Channels section located on the left side in your Tidio panel > Live Chat > Appearance > Widget settings.

Widget Settings

Changes that you can make in the ‘widget settings’ are based on your preferences on how you want the chat widget to be presented on your website.

*You can adjust your chat widget to your needs in the ‘chat settings’ section*

What can I change 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
Online Status – a message which 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
Chat Visibility – where the widget will be displayed ( desktop, mobile app, both or advanced rules where you can exclude some pages of your website or hide the widget temporary)
Display the Chat When You’re Offline – you can decide if you want the Tidio chat widget to be displayed when you are ‘offline’
Offline Status – a message that will be displayed in the widget when you are in the ‘offline’ status
Offline message – a message shown when a customer sends you a message during your ‘offline’ hours
Button Label – a message displayed next to the closed chat’s widget
Label Text – a text displayed next to the closed chat’s widget icon

Please, be advised! All accounts created after the 14th of June 2018 have no longer an option to choose our old themes.

We no longer support the Modern and Business theme so, all further updates will impact only the New Theme. We strongly recommend switching to it if you’ve created your account prior to its release!

Three different themes of our chat widget — *Themes available before 14th of June 2018*

While editing the ‘Widget Settings‘ section – you can see how the chat button will look like on your site. A chat preview will be available on the right side so that you can see the changes in real-time.

A preview of the widget is located on the right side of the widget settings panel — *The real-time chat preview where you can see all the changes*

In the following section, you can add a pre-chat survey for your visitors to complete before starting a chat. You can ask for an email address, name and/or phone number. You can add a GDPR consent too!

How can I edit the Get Started widget?

Firstly, the ‘Get Started’ Widget is a ‘welcome screen’ that is displayed when the conversation in the chat’s widget was not yet initiated.

How the 'Get Started' widget looks — *How the ‘Get Started’ widget looks*

In the ‘Get Started’ section you are able to edit the ‘Status’ that will encourage your website’s visitors to send you a message. You can also choose or upload your own ‘Background‘ picture.

How to add your own 'background' picture to the 'Get Started' widget — *How to add your own ‘background’ picture to the ‘Get Started’ widget*

What can I edit in the ‘Mobile Widget’ section?

You can change the chat’s widget ‘Position’ on mobile devices as well as the ‘Button Size’ in the ‘Mobile Widget’ section.

What you can edit in the 'Mobile Widget' section — *What you can edit in the ‘Mobile Widget’ section*

What is a Pre-chat Survey and what can I edit?

Pre-Chat Survey asks 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’ which you have collected through the Tidio chat.

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

You can ask your visitors abut their email address, phone number, name and GDPR compliance in the 'Pre-chat Survey' section — *What you can edit in the ‘Pre-chat Survey’ section*

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

*Where to find the ‘Sidebar’ section in your Tidio panel*

Set up your chat to appear as a sidebar on the left or right side of your website. Once a user clicks on the sidebar, the chat widget will appear.

You can change the color of the Sidebar widget — *How the sidebar widget looks and what you can change*

New Widget users can switch the color of the sidebar. The color of the chat button in the circle you can adjust separately under the Channels section.

What is the Chat Page and what can I edit?

The ‘Chat Page‘ is an additional module – a ready page with only the Chat’s Widget on it. You can open the Tidio chat in a new, separate window.

Pro Tip: You can link the ‘Chat Page’ to a button on your page and have it appear in a new window when clicked by a user.

How Chat Page looks like — *A Chat Page widget open in a new, separate window*

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

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

If you have some more questions about our Tidio Chat Widget, please contact us via chat on our website or at [email protected].