> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wittify.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# 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
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.
Use a 2x resolution version (e.g. 80x80 if you want a 40x40 final size). PNG with transparency works best.
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.
Use the **3x3 fine-tune grid** in the Widget Position card to nudge it. The launcher always sits in one of the 9 corners.
Not on this page. Create a second agent with the alternative appearance and split your traffic with [Deployment](/en/Systems/AI-Agents/Wizard/Deployment) allowed-domain rules.
Plan dependent. Pro plans and above can hide it via the Chat Text panel of each language. Free and starter plans keep the credit.
Either your default language is set to English, or Arabic isn't in your active language list. Add Arabic and promote it to default.
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
Upload files, add FAQs, crawl URLs, and configure the agent's web search tool.