How to Customize Your Chat Widget
In this article, you will learn how to customize your chat widget that is visible on your website.
Where to customize your chat widget?
At our Tidio App you can choose, edit and use those three chat widgets:
How to edit the Widget:
You can customize the chat widget, by going to the Channels section located on the left side in your Tidio panel -> Live Chat -> Appearance -> Widget settings.
What are the Widget settings?
The settings 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 – you can change the color of your chat’s widget
- Online Status – what message will be displayed when you are ‘online’ in your Tidio panel
- Widget Position – you can choose whether you want the Tidio chat widget to be displayed in the bottom of the left or right side on your website
- Chat Visibility – gives you an option to choose where you want to display your chat widget ( 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 – what message will be displayed in the widget when you are ‘offline’
- Offline message – shows the message when a customer sends you a message during your ‘offline’ hours
- Button Label – gives you a chance to add a message that will be displayed next to the closed chat’s widget
- Label Text – is a text displayed next to the closed chat’s widget icon
Please, be advised that all accounts created after the 14th of June 2018 have no longer an option to choose our old themes.
The support for the Modern and Business theme is discontinued and 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?
The ‘Get Started’ widget will be shown when you do not have any automated messages sent by the bot. Here is 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.
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 survey will be displayed when visitors type in their first message to attempt to start a conversation with you. That information is later saved in the conversation panel as well as on the list with all ‘contacts’ which you have collected through the Tidio chat.
You can find the Pre-Chat Survey settings 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 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?
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 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].