# Customize your chat widget Section: Get Started Description: Change your chat widget's colors, welcome screen, texts, position and visibility in Settings \> Live Chat \> Appearance, and switch to the new widget design. Verified against Tidio panel 12.304.0 Last updated: 2026-11-09 Source: https://help.tidio.com/articles/customize-widget/ In Tidio, you can customize your Tidio chat widget to catch your website visitors' attention or to suit the widget's appearance to your branding as well as business needs. **In this article, you will learn:** - [The possible widget appearance settings]() - [How to change the widget's general look]() - [How to modify the widget's detailed content]() - [How to change the widget's visibility and position (on desktop and mobile)]() - [How to use the Multilanguage function]() - [What the Advanced section offers]() [Video]() Silent walkthrough. Put your logo in the chat widget: open Settings \> Live Chat \> Appearance, point at Brand logo, choose Your logo as the welcome image, upload a logo, save, and open the Ready to upgrade Chat widget? window without applying it. ## The available settings You can customize your Tidio widget by going to the **Settings** **\> Live Chat \> Appearance **section. In there, you will find several different sub-sections that allow you to modify different aspects of your chat widget: ![The Appearance page shows General, Content, Visibility and position, Multilanguage and Advanced sections beside a live preview of the widget’s Home screen.]() The different sections are as follows: - [General]() - [Content]() - [Visibility and position]() - [Multilanguage]() - [Advanced]() At all times, you also see a **preview** of your widget on the right. From the **Preview** menu on the right, you can select a state of the widget that you'd like to see (e.g. what the Pre-Chat Survey looks like, or an example of a live chat conversation): ![The widget Preview menu offers Home, Home - Agents are offline, Chat, Pre-chat survey, Chat - Agents are offline, Create ticket form and Minimized.]() Using the preview can be very helpful in deciding how to configure your widget, as it allows you to see what Tidio will look like for your visitors before you even make any changes. If your widget still uses the previous design, you'll also see **Ready to upgrade Chat widget?** at the top of the **Appearance** page. Click on **Preview it** to see the new design on your own website (this option shows when the widget is installed there), or on **Apply changes** to switch. In the window that opens, hit **Apply new look**: ![The top of Settings \> Live Chat \> Appearance on a project with the previous widget design: the "Ready to upgrade Chat widget?" banner with the Preview it and Apply changes buttons, and the "Ready to upgrade Chat widget?" window opened over it, with its description, the note about custom scripts, the "Preview on yourwebsite.com" link and the Apply new look button]() 💡 **Please note:** applying the new look permanently updates your chat widget, and your customers will see the new design right away. If you use custom scripts to adjust the widget's position, they'll need updating for the new design - see [Widget Position](). ![The widget Home preview shows a greeting, three suggested questions, a Chat with us card, Home and Chat navigation, and the close button below.]() ## General #### Background color Here you can change the general color of your chat widget. You can select from a number of available color themes, or select a custom color using the **Pick your color** option. ![The General section has the Background color dropdown open, showing Pick your color and five preset themes, with Color 1 selected.]() #### Action color This choice affects the color of several smaller elements of the widget, like the **Home** and **Chat** buttons, or the **Send** button. This customization allows your Tidio widget to be more on-brand and compatible with the rest of the website. You can pick one of the listed colors or pick your own, custom color: ![The General settings with the "Action color" menu open, offering preset colors and "Pick your color".]() #### Text color This setting only appears if you've selected your own **custom background color**; it allows you to modify how the majority of text appears in the widget. Again, you can select one the pre-set colors or create your own: ![The General settings with a custom background color and the "Text color" menu offering Black, White, and "Pick your color".]() #### Brand logo This option - **Custom branding in widget and emails** - allows you to upload your own logo to use instead of our default Tidio branding, in your widget and in your emails (an image of up to 100 KB). Custom branding is only available to our [**Plus**]() subscribers. Without it, you'll see **Custom branding is available on the Plus plan.** instead of the upload field, with a **Contact us** link if you manage billing (otherwise, a reminder to ask your admin). 💡 **Please note:** Custom branding isn't the only way to show your brand. On every plan, you can put your own logo at the top of the widget's home screen - see [Welcome image]() below. And if you'd simply like to remove the "Powered by Tidio" logo from your widget and email footer, that's the **No Tidio branding** add-on, available on the **Growth** plan and included in **Plus** and **Premium**. ![The "Brand logo" setting with a notice that custom branding requires the Tidio+ plan and a "Contact us" link.]() ## Content ### Home In the **Home** tab, you decide what the visitors see when they open your widget. The widget's **home screen** is normally your visitors' first interaction with the widget in general, and you can change several aspects of it. The visitor can switch to the **chat screen** to message you, or use a **conversation starter** (if you've added any). ![The Content "Home" tab with welcome image options, header and message fields, conversation starters, and online and offline status text.]() #### #### Welcome image You can choose to display the **Agents collage** - a collage of your agents' profile pictures at the top of your widget - or use **Your logo**, a single image of your own choice, like your company logo. Click on **Upload logo** to add a PNG, JPG or GIF file of up to 1 MB. The corners of your logo will be rounded, so it's best to upload a logo with clear corners. This option is available on every plan: ![Settings \> Live Chat \> Appearance, Content section on the Home tab: the Welcome image field with "Your logo" selected and a company logo uploaded, the Header and Welcome message fields below, and the widget preview on the right showing the logo at the top of the home screen]() #### Header The **header** is a short message that will display at the top of your widget's home screen. It will also appear at the top of the widget's chat screen, but only if the visitor is interacting with a flow or the Lyro AI agent. #### Message This is a visually smaller piece of text that appears directly underneath the large header, and you can modify it to your liking. #### Conversation starters If you wish, you can add different **conversation starters** for your visitors to choose from. This is a quick way to encourage your visitors to initiate a chat; when a visitor clicks on a specific conversation starter, you simply receive that exact message in your live conversations folder. You can add many starters, but **enable up to five** at any given time. Those starters will appear on the widget's** home screen**; you can also **remove** starters permanently or change their **order**. #### Online status A message that is displayed when your widget is online; this happens when at least one live agent is logged in and has their own status set to **online**. #### Offline status A message that is displayed when your widget is **offline**; this happens when none of your agents are online. Please note that you'll find the online and offline status texts in the **Home** tab on the new widget design. On the previous design, they're in the **Chat** tab. ### Chat In the **Chat** tab, you determine your status texts, offline message, and whether your visitors can submit tickets when you're offline. ![The Content "Chat" tab with an offline message, an offline ticket creation switch, and an enabled privacy policy message.]() #### Offline message An additional message that pops up if a visitor tries to initiate a chat (during your offline time). Whenever this happens, the offline message will also ask the visitor to provide their **email address** (for getting back to them easily). This function cannot be disabled. #### Let visitors create ticket when offline This option **replaces the offline message** (described above); instead of leaving their email address and a chat message, the visitor will be asked to **submit a ticket**. This way, they will not be able to use the chat widget until you're back online, and you will receive the ticket inside your **Unassigned** tickets folder. #### Privacy policy message This options allows you to display a **custom privacy policy message** at the top of your Tidio widget whenever someone starts chatting. The message can provide some basic information that you need to share with such visitors, and can be closed by hitting the '**X**' icon on the message itself. ### Pre-Chat Survey It is a form that can ask your visitor for their **name**, **email address**, **phone number**, or **GDPR compliance**; it also gives the option to ask for **newsletter permission**. On top of that, the survey allows the visitor to select a [**department**]() (if you have that feature available on your project - it's meant for our **Plus** package subscribers). ![The enabled "Pre-chat survey" settings with name and email fields, a newsletter permission checkbox, and an "Add new" button.]() If enabled, the** Pre-Chat Survey** is displayed to visitors when they try to send their first chat message, and it's mandatory to complete then. The collected information is saved, so that you can see it when chatting later; the data will also be listed on the[** Customers**]() section of your Tidio project. ### ![The pre-chat survey preview asking for an email address and name, with a newsletter signup checkbox and a "Send" button.]() ### Minimalized Here, you can enable and modify the **button label** - a short message that is displayed next to the chat icon, when the chat widget is closed. ![The Content "Minimalized" tab with "Button label" enabled and a greeting entered.]() It can be useful for increased visibility or as a simple greeting - if you're not using an automated flow message. Please note that the button label won't have any effect if you set your desktop button type to **Sidebar** (more on that in the next section of this article). ![The closed chat widget with a "Chat with us" label and waving-hand emoji beside the launcher.]() ## Visibility and position Here you can determine where your Tidio widget is displayed and how. You can limit your widget visibility to specific **domains** or **countries**. There are also several options for the **desktop** version of your website as well as the **mobile** version, and you can decide about both aspects of your widget separately. ![The "Visibility and position" settings with trusted domain and country controls above Desktop and Mobile tabs and an enabled "Display" switch.]() #### Trusted domains You can decide if your Tidio widget is going to appear on any domain where it's installed, or only on the domains you list here. ![The "Trusted domains" setting set to "Show only on listed domains", with "tidio.com" added.]() #### Country visibility This setting lets you decide if you'd like to show your Tidio widget only to visitors from specific countries, or perhaps hide your widget from certain countries. Note that this only affects which visitors see your Tidio widget, and not who can enter your website. ![The "Country visibility" setting set to "Show only in specific countries", with Ireland and Poland selected.]() #### Display The **Display** toggle allows you to decide whether to show or hide the widget on your website in general. You can configure this separately for the desktop and the mobile version. ![The widget visibility controls with "Desktop" selected beside "Mobile" and the "Display" switch enabled.]() #### Page visibility You can make the widget invisible on certain pages (desktop or mobile). You can use the **contains** option if you want to hide Tidio on any URL that includes that particular string, or the **exact** option if you want to hide Tidio on some specific URLs. ![The "Page visibility" exclusion list with a "Contains" rule for "/blog", an "Exact" page rule, and an "Add new" button.]() #### Widget/Button position This option lets you decide if the widget is displayed in the **bottom-right corner** of your website, or the **bottom-left corner**. This can be configured separately for desktop and mobile devices. If you wish to change the position vertically - see our article explaining the [advanced settings](). ![The "Widget position" control with "Right" selected beside a desktop illustration.]() #### Button type (desktop only) This setting lets you decide what form the widget takes (on desktop) when it's closed. The default version of the closed desktop button is **Corner**; the round widget button sits in the bottom-right (or -left) corner of your page, and displays the **button label** (if enabled in the **Minimalized** section, mentioned earlier). The **Sidebar** version displays your widget on the right (or left) side of the page; it takes the form of a small rectangle and with its own text label and color. ![The "Button type" options with "Corner" selected and "Sidebar" available.]() #### Button size (mobile only) For the mobile version, you can decide about the button's size; you can select from among **three sizes**. #### ![The "Button size" slider set to "large", with "small" and "medium" positions also marked.]() ## Multilanguage In this section, you can select the **default language** of your Tidio widget - the language that will be shown for all visitors who use your chat. ![The "Multilanguage" settings with English as the default, a translation selector, and a "Manage and edit translations" link.]() For subscribers of the** Plus** package, there is the additional option of **Translations**. This feature allows you to add more language packs, enabling them for visitors from all around the world (based on their browser preferences). You can learn more about the **Multilanguage** feature in[ this article](). ## Advanced Here, you can modify some of the remaining options for your Tidio widget. ![The "Advanced" settings with offline widget display, background image, and widget sounds enabled, plus background image choices.]() #### #### #### Display widget when agents are offline This option allows you to decide whether to show the widget on your website when you are offline, which is the default. Disabling the toggle will hide the widget from your website whenever you [change your status to offline](). If you decide to keep the widget visible when you are offline - you can adjust your **offline message** and **status** that will be visible to your website visitors. Alternatively, you can allow them to** submit tickets** (as mentioned earlier in this guide). #### Background image Here you can enable an additional background image, which will be displayed as part of your widget's **home screen **(please note that it will blend with your general **color theme**). You can choose from among several available images, or upload your own. #### Enable widget sounds Whenever your website visitors receive a message from you, your flows, or the Lyro AI agent, they will normally hear a notification. This setting allows you to disable these sounds in your widget, if you prefer. ## Further reading - [Change and add Languages in your Chat Widget]() - [Widget Position]() - [Which upgrades do I need?]()