Appearance Settings

Navigate to Channels → Website Chat → Appearance tab. The page is split into two columns: settings on the left and a live preview on the right that updates automatically as you make changes (auto-saved).

Colors

In the Colors card, configure these color pickers:

• Primary Color — powers the gradient hero on the home screen, the CTA button, the email tab hero, and the floating chat button. Default: #3B82F6 (blue)
• Button Text Color — text and icon color on the floating button. Default: #FFFFFF (white)
• Message Text Color — text color inside visitor message bubbles. Default: #FFFFFF
• Welcome Header Text Color — title color in the white chat header. Default: #1F2937 (dark gray)
• Chat Background — the chat conversation area background. Default: #FFFFFF

Each field has a color picker and a text input so you can type exact hex values.

Button Settings

Configure the floating chat button:

• Position — dropdown: Right (default) or Left side of the screen
• Horizontal Margin (px) — distance from the edge. Default: 20
• Vertical Margin (px) — distance from the bottom. Default: 20

Button Style

Choose the shape of the floating chat button from five styles:

• Circle — fully round button (default)
• Rounded Square — square with rounded corners (14px radius)
• Square — near-sharp corners (4px radius)
• Pill — wide capsule shape that shows the icon + "Chat" text
• Floating — round button with a colored glow shadow effect

Button Icon

Choose the icon displayed inside the floating button from six options:

• Chat Dots — chat bubble with three dots (default)
• Bubble — plain chat bubble without dots
• Message — envelope / mail icon
• Support — headset icon
• Quick — lightning bolt icon
• Wave — waving hand icon

Welcome Message & Configurable Texts

Configure the texts visitors see across the widget's three screens:

• Title — the greeting shown in the header and home screen hero. Default: Hi! 👋
• Message — the welcome text shown below the title. Default: How can we help you today?
• Home Screen Title — the main heading on the home screen, below the gradient hero. Default: Hoe kunnen we je helpen?
• Chat Button Text — text on the CTA button that starts a chat. Default: Laten we chatten
• Email Tab Subtitle — subtitle shown on the email contact form. Default: Stuur ons een e-mail
• Input Placeholder — placeholder in the message input. Default: Type your message...
• Chat Greeting Message — the message shown immediately when someone opens the chat, before they send a message. This is separate from the autoresponder. Default: Welkom! Waarmee kunnen we je helpen? 😊
• Default Language — dropdown: Nederlands, English, or Deutsch. Controls all UI labels in the widget (buttons, form fields, system messages) for visitors who haven't picked a different language.

Multi-language Support (Pro & Enterprise)

On the Pro and Enterprise plans, you can offer your chat widget in more than one language. Below the Default Language field, check the additional languages under Also offer these languages.

Once enabled, visitors see a small flag icon with a dropdown in the top corner of the widget (on the home, chat, and email screens) to switch languages. Switching translates:

• All widget UI text — buttons, headers, placeholders, and system messages
• Your FAQ items
• Custom ticket form fields — labels, placeholders, and options

Translations are generated automatically with AI the first time each language is needed, then cached, so there's no manual translation work. Editing a text, FAQ, or form field automatically refreshes its cached translations the next time that language is requested.

The visitor's selected language is shown in the inbox conversation header next to their name (as a flag icon), so your team immediately knows which language to reply in.

On the Starter plan, only your Default Language is available and no language switcher is shown.

Logo

Enter a Logo URL to display your logo in the home screen hero, the agent card, the chat header, and the email tab hero. If left empty, a default avatar is shown.

Widget Screens

The chat widget now features three screens accessible via a bottom navigation bar:

• Home — a branded landing page with a gradient hero (using your primary color), your logo, welcome title, an agent card with your welcome message, a CTA button to start chatting, and an FAQ accordion (if FAQ items are configured)
• Chat — the conversation view with a clean white header (showing logo, title, and a green "Online" status badge), message bubbles, and a message input field
• E-mail — a contact form with name, email, and message fields, topped by a gradient hero with your logo and the email subtitle. Visitors can submit questions that arrive in your inbox

Live Preview

The right panel shows an interactive preview with three tabs — Home, Chat, and E-mail — so you can see exactly how each screen looks as you make changes. All changes are auto-saved.