How to Customize Your Chat Widget
In this article, you will learn how to customize your chat widget that is visible on your website.
At our Tidio App you can choose, edit and use these three chat widgets:
How to edit the ‘New’ Widget:
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.
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.
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!
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.
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.
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.
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 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.
How can I edit the Sidebar?
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.
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.
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.
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].