Widget Customization

A live chat widget that looks like yours

Customize every detail of your chat widget: colors, position, language, dark mode, and more. Make it feel like a natural part of your website.

Request a demo Start free trial

Free for 15 days. No credit card needed.

Every detail, your way

A no-code widget builder with full control over look, feel, and behavior.

No-Code Widget Builder

Customize without writing code

Use Chatwoot's visual widget builder to adjust your widget's appearance, content, and behavior, all with a live preview. No developer needed.

Live preview: see your changes in real time as you adjust settings
Welcome messages: customize the heading, tagline, and reply time shown to visitors
Channel greeting: set an automatic greeting message when a customer opens the widget
Widget color: pick any color to match your brand palette
Position & bubble: choose left or right placement and standard or expanded bubble style
Brand Colors & Appearance

Match your brand perfectly

Set your brand color and the widget adapts everywhere, the launcher bubble, header, buttons, and message highlights all stay consistent.

Any hex color: set any color and the widget, launcher, header, and buttons all adapt
Standard bubble: a clean circular icon that floats in the corner of your site
Expanded bubble: a wider launcher with custom text like 'Chat with us' for more visibility
Custom launcher text: set the text displayed on the expanded bubble via the launcherTitle setting
Welcome heading & tagline: greet visitors with your own heading and reply-time description
Dark Mode

Respect your visitors' preferences

Enable automatic dark mode so your widget adapts to your visitor's OS preference. The chat window renders in a dark theme without any extra effort.

Auto mode: follows the visitor's OS preference automatically (light or dark)
Light mode: always render the widget in light theme, regardless of OS settings
Simple configuration: set darkMode to 'auto' in chatwootSettings: one line of code
Consistent styling: all widget elements (header, messages, inputs) adapt to the theme
Position & Bubble Type

Place it where it works best

Choose the widget's position on your site, pick the bubble style that fits your design, and customize the launcher text for expanded bubbles.

Left or right: place the widget launcher on whichever side fits your layout
Standard bubble: a compact circular chat icon, minimal and familiar
Expanded bubble: a wider pill-shaped launcher with customizable text for higher visibility
Popout window: let visitors open the chat in a separate browser window for distraction-free messaging
Language & Localization

Speak your customers' language

Chatwoot supports 50+ languages out of the box. The widget automatically adapts to your visitor's browser locale, or you can set it manually via the SDK.

50+ languages: widget UI automatically displays in the visitor's browser language
RTL support: full right-to-left rendering for Arabic, Hebrew, Persian, and more
SDK locale override: set the language manually using the setLocale SDK method
Multilingual teams: different inboxes can serve different language audiences
Widget Behavior

Control how the widget behaves

Fine-tune the widget experience, popout into a separate window, toggle emoji pickers, file uploads, email collection, and the end conversation button.

Popout window: visitors can open chat in a full-size browser window for longer conversations
Email collection: prompt visitors for their email so conversations can continue if they leave
Emoji picker: enable or disable the emoji selector in the widget composer
File attachments: allow visitors to upload and share images, documents, and other files
End conversation: let visitors close conversations from the widget when their issue is resolved
Proactive Campaigns

Start conversations, don't wait for them

Trigger targeted messages in the widget when visitors match specific conditions, time on page, URL pattern, or custom events. Convert more visitors into customers.

Ongoing campaigns: send proactive messages based on page URL, time on page, or custom rules
URL targeting: trigger messages only on specific pages like pricing, checkout, or docs
Time delay: wait a set number of seconds before showing the campaign message
Custom messages: write personalized messages for each campaign to match the context
SDK & Developer Control

Full programmatic control

Go beyond the builder. Use SDK methods to dynamically control the widget, set user attributes, change locale, and trigger actions from your application code.

User Identification

Pass user data like name, email, and custom attributes to personalize the experience and route conversations.

Widget Control

Open, close, toggle, and popout the widget programmatically. Set language, reset sessions, and more.

Identity Validation

Enable HMAC-based identity validation to prevent impersonation and ensure secure widget sessions.

Interactive Messages

Rich, interactive widget content

Go beyond plain text with interactive cards, forms, quick-reply options, and embedded articles, all rendered natively inside the chat widget.

Quick reply buttons: present options visitors can tap to route themselves to the right team
Cards: display rich content cards with images, titles, and descriptions inside the chat
Forms: collect structured data through in-chat forms without redirecting visitors
Embedded articles: surface help center articles directly inside the widget for instant answers

Make the widget yours

Start customizing your live chat widget to match your brand. Set up in minutes, no design skills needed.

Start free trial Request a demo

Free for 15 days. No credit card needed.