Appearance

Brand the Wittify chat and voice widget. Set up languages, upload your logo and avatar, pick colors, configure the launcher icon, position the widget on the page, choose a font, and customize the welcome banner, post-chat ratings, and minimized state.

Appearance is Step 3 (Hybrid) or Step 2 (Text-only and Voice-only). The page has eight cards stacked in the main column, in order: Conversation Interface Language, Branding, Widget Launcher Icon, Widget Position, Font & Display, Welcome Message Banner, Post-Chat Reviews, Minimized State. The right-side preview updates live as you edit.

What you’re configuring

Everything on this page controls how the Wittify chat widget (and the voice call screen, for voice and hybrid agents) looks and reads to your customers. None of it changes the agent’s behavior, that lives in Text Settings and Voice Settings. None of it changes how WhatsApp / Messenger / Instagram render either, those follow the platform’s native styling.

1. Conversation Interface Language card

Multi-language accordion. You can have up to 10 languages active out of 15 available. Each language ships with native translated defaults (greeting, placeholder, voice prompts, rating chips), so the widget works out of the box even if you don’t customize anything.

Available languages

15 languages with native defaults:

Arabic, English, French, Spanish, German, Italian, Portuguese, Russian, Turkish, Persian, Hindi, Urdu, Indonesian, Malay, Hebrew, Chinese.

How language priority works

• The first language in the list is the default. It also drives the widget preview’s reading direction (Arabic and Urdu flip the preview to right-to-left).
• You can promote any language to default by reordering.
• You can delete any language as long as at least one remains.
• The widget auto-detects the visitor’s browser language at runtime and switches to it if it’s in your active list. If not, it falls back to your default.

A note on the page reads: Auto-detect: the widget switches language based on the website language.

Per-language sub-panels

Each language card opens to four colored sub-panels of text. Related short fields share a 2-column grid layout.

Panel	Color	What’s in it
Chat Text	green	Header title, header subtitle, greeting, input placeholder, suggested replies, footer disclaimer, “powered by” footer line
Voice Text	blue	Voice screen greeting, “tap to talk” prompt, connecting / call active / call ended copy
Welcome Banner	purple	Banner title, banner subtitle (used when the Welcome Message Banner is enabled)
Rating	amber	Rating prompt question + per-star chips (up to 5 chips per star: 1, 2, 3, 4, 5)

Add / remove language

Click Add language below the accordion to insert a new language from the picker (any not yet in your list). Click the trash icon on any expanded language to remove it (disabled when you have only one language left).

2. Branding card

Logo upload

• Drag a file or click to browse.
• Allowed file types: PNG, JPEG, WebP. SVG uploads are rejected for security reasons.
• Maximum file size after preview is 700 KB.
• Preview is instant, the file is read locally in your browser before upload.

Avatar upload

Same constraints as the logo. The avatar is the small circle that appears next to the agent’s bubbles in the chat.

Primary color

Color picker with two modes:

• Solid , one color.
• Gradient , two-color gradient.

Each mode shows a hex input and 12 preset swatches. The active mode is highlighted.

The primary color drives:

• The header bar (or its gradient)
• Send-button background
• Active states (selected items, focus rings)
• The launcher icon background (when “Use primary” is on for the launcher)

Secondary color

Same picker. Secondary color is used for sub-elements like dividers, hover states, and the rating star fills.

3. Widget Launcher Icon card

The “launcher” is the floating button visitors click to open the widget. This card customizes its look.

Shape

Three options: Circle (default), Square, Oval.

Icon source

Four tabs, only one is active at a time:

Tab	What it shows
Icons	A grid of 6 suggested icons (chat bubble, phone, headset, etc.). The selected suggestion is highlighted.
Company Logo	Uses your uploaded logo from the Branding card. Disabled if no logo uploaded.
Bot Avatar	Uses the avatar from the Branding card. Disabled if no avatar uploaded.
Upload Custom	A drag-drop zone with a + button for a custom launcher image. Same file rules as Logo.

Content mode

Three options: Icon only, Text only, Both. When Text only or Both, a small Text input appears (e.g. “Chat with us”).

Background color

Solid hex picker. Independent of the Primary color so you can have a brand header but a contrasting launcher.

4. Widget Position card

Two synchronized controls:

• Horizontal radio , Left / Center / Right (three big icon buttons).
• 3×3 fine-tune grid , 9 dots arranged as a tic-tac-toe board. Click any dot to set the launcher’s exact corner.

The grid auto-syncs with the radio (clicking a left-column dot also activates the Left radio, etc.).

5. Font & Display card

A dropdown with 15 fonts. Each option shows the font’s name rendered in that font.

Every font ships with a bilingual fallback:

• English fonts fall back to IBM Plex Sans Arabic when displaying Arabic text.
• Arabic fonts fall back to Inter when displaying English text.

This means visitors never see a broken render no matter which language the page is in.

6. Welcome Message Banner card

A small popover that appears next to the launcher to invite visitors to chat (e.g. Hi! Need help?).

Field	What it does
Enable / disable toggle	Master switch for the banner.
Delay slider	0 to 30 seconds. How long after page load before the banner appears.
Play sound toggle	Plays a soft notification chime when the banner appears.

The actual banner title and subtitle are set per-language inside the Welcome Banner sub-panel of each language in the Conversation Interface Language card.

7. Post-Chat Reviews card

Asks the visitor to rate the conversation when it ends.

Field	What it does
Enable / disable toggle	Master switch for ratings.
Allow skip toggle	When on, visitors can dismiss the rating without scoring. When off, ratings are required to close the chat.

The actual rating prompt and per-star chips (e.g. “Excellent service”, “Slow reply”, up to 5 chips per star) are set per-language inside the Rating sub-panel of each language in the Conversation Interface Language card.

8. Minimized State card

The compact pill that appears when the visitor minimizes the widget but doesn’t close it.

Variant	What it shows
Text	A short text label (e.g. “Chat with us”)
Icon	A small icon only

Pick one. The minimized pill stays clickable to re-expand the widget.

Right-side preview

While you’re on the Appearance step, the right-side preview shows the Wittify chat widget with your live changes:

• Color, logo, avatar, font apply instantly.
• The launcher updates with shape, icon source, content mode, and background.
• The Welcome Message Banner shows up after the configured delay (you’ll see it in real time).
• Switching the default language flips the preview’s direction and replaces all the visible text.
• For voice and hybrid agents, the voice call screen renders with the voice text from the active language.

On smaller screens, click Agent Preview next to the page title to open the preview as a full-screen overlay.

The bottom action bar

Same as every step: Save draft keeps your work, Next , Knowledge Base auto-saves and moves on. The wizard guards against accidental browser close while you have unsaved changes.

Common questions

Why is my SVG logo rejected?

SVG files can carry scripts that run in your visitors’ browsers. We accept PNG, JPEG, and WebP only. Convert your SVG to a high-resolution PNG before uploading.

My logo looks pixelated in the preview.

Use a 2x resolution version (e.g. 80x80 if you want a 40x40 final size). PNG with transparency works best.

The widget direction is wrong on my Arabic site.

The widget’s direction is driven by the default language on this page. Promote Arabic to the top of the language list, the preview will flip to right-to-left.

Visitors complain the launcher covers part of my UI.

Use the 3x3 fine-tune grid in the Widget Position card to nudge it. The launcher always sits in one of the 9 corners.

Can I A/B test two appearances?

Not on this page. Create a second agent with the alternative appearance and split your traffic with Deployment allowed-domain rules.

Can I disable the 'Powered by Wittify' footer?

Plan dependent. Pro plans and above can hide it via the Chat Text panel of each language. Free and starter plans keep the credit.

Customers see my widget in English even though my site is Arabic.

Either your default language is set to English, or Arabic isn’t in your active language list. Add Arabic and promote it to default.

The avatar isn't showing up.

Two checks: (1) the avatar uploaded successfully (you’ll see it in the Branding card preview), (2) your active language has the chat header configured to show the avatar. Most languages do by default.

Next

Step 4: Knowledge Base

Upload files, add FAQs, crawl URLs, and configure the agent’s web search tool.