Customize Your Chat Widget
  • 3 Minutes to read
  • Comments
  • Dark
    Light

Customize Your Chat Widget

  • Comments
  • Dark
    Light

Customize your Tidio chat widget and make your website visitors notice they have a chance to communicate with you through the chat.


In this article, you will learn:


See our video on customizing the chat widget to see all the available settings: 


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.

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

Chat Visibility 

Settings on how 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 temporarily).

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 is displayed next to the closed chat widget.

Label Text 

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


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.


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, or phone number. You can add a GDPR consent too!


Get Started Widget


The Get Started widget is a welcome screen that is displayed when the conversation in the chat's widget was not yet initiated. For example, the chatbots are disabled and the visitor hasn't sent a message yet. 


Get Started widget


In the Get Started section you are able to edit the Status and message that can encourage your website's visitors to send you a message.  As well as choosing or uploading 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

 

Mobile Widget


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


What you can edit in the 'Mobile Widget' section
What you can edit in the 'Mobile Widget' section

 

Pre-chat Survey


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


Sidebar



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



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.


Sidebar section

 

You can also switch the color of the sidebar. The color of the chat button in the circle can be adjusted separately under the Channels section.


Chat Page


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


💡
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

 

There are some additional options available like a change of Background Color setting, the 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 still have some questions after reading this article, don't hesitate to contact us.

Was this article helpful?