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? 😊
• Language — dropdown: Nederlands or English. Controls all UI labels in the widget (buttons, form fields, system messages).

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.