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:

How our Tidio ‘widget’ looks

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.

How to find the chat’s 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.

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

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.

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?

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:

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

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

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

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?

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.

A Chat Page widget open in a new, separate window

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.

Where the Chat Page URL is located

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

Can't find what you're looking for?