# Themes

## Designer Themes: Create, Save, and Apply Brand Themes

**Goal:** Quickly brand your Web Chat panel (and supporting previews like Ads and the RCS Emulator) using reusable Themes.\
**Estimated Time:** 10–20 minutes

***

### ⚡ Quick Start (Most Teams Do This)

1. Go to **Designer → Themes**.
2. Adjust **colors, fonts, and sizes** to match your brand.
3. Click **Save**, name your theme (e.g., “Acme – Primary”), **Save** again.
4. Click **Themes → select your theme → Use Theme**.
5. Open the Web Chat preview and confirm everything looks right (text contrast, buttons, quick replies).

> 💡 Save multiple variants (e.g., “Light”, “Dark”, “High Contrast”) and switch per campaign.

***

### 🧭 What Themes Control

Themes are reusable style presets for:

* **Web Chat Panel** (colors, fonts, sizes, UI controls)
* **RCS Emulator preview**
* **Ad previews** (visual consistency during build/review)

Change settings once → reuse as a theme across projects.

***

### 🎛️ Theme Customization (All Options)

Below is a human-friendly reference of what you can configure. You’ll find these on **Designer → Themes**.

#### General UX

| Field                           | What It Does                        | Tip                             |
| ------------------------------- | ----------------------------------- | ------------------------------- |
| **Text Type Delay (ms)**        | Delay between “typing…” and sending | 500–1200ms feels realistic      |
| **Placeholder**                 | Hint text in the input field        | Keep short: “Message here…”     |
| **Avatar Icon**                 | Launcher icon for Web Chat          | Use a simple, on-brand SVG/PNG  |
| **Background Image**            | Chat panel background               | Prefer subtle textures/patterns |
| **Remove Footer Input Form**    | Hide the input box                  | Use for read-only experiences   |
| **Get Started Without History** | Hide previous messages on open      | Useful for fresh starts/demos   |

#### Color Settings

| Area                                    | What It Styles                    |
| --------------------------------------- | --------------------------------- |
| **Status/Background/Hover**             | Global states, canvas, link hover |
| **Right/Left Speech Bubbles – BG/Text** | Customer vs. brand bubble colors  |

#### Size Settings (px)

| Area                                     | What It Styles                      |
| ---------------------------------------- | ----------------------------------- |
| **Width / Height**                       | Chat panel size                     |
| **Message Top Margin / Item Top Margin** | Spacing above the chat and messages |
| **Speech Bubbles Font Size**             | In-bubble text size                 |

#### Video & Image

| Area                  | What It Styles           |
| --------------------- | ------------------------ |
| **Max Width (%)**     | Video or image max width |
| **Auto Play (video)** | Autoplay video on render |

#### Font Settings

| Group             | Fields                                                      |
| ----------------- | ----------------------------------------------------------- |
| **Name/Fallback** | Font for user names/system fallback                         |
| **Message Fonts** | Font for message content                                    |
| **URL**           | Google Fonts URL (e.g., `https://fonts.googleapis.com/...`) |

#### Input Form

| Field                             | What It Styles              |
| --------------------------------- | --------------------------- |
| **BG / Placeholder / Text Color** | Input field colors          |
| **Height / Font Size / Padding**  | Input size and spacing      |
| **Icons Color/Size/Padding**      | Attachment/emoji/etc. icons |

#### Button Settings

| Field                                | What It Styles        |
| ------------------------------------ | --------------------- |
| **Text / Background / Border Color** | Button visuals        |
| **Font Size / Padding / Radius**     | Readability and shape |

#### Quick Replies

| Field                             | What It Styles                                         |
| --------------------------------- | ------------------------------------------------------ |
| **Display Mode**                  | Scrollable bottom / Left stack / Right stack / Cleared |
| **Text/Background/Border/Radius** | Chip style                                             |
| **Height / Font Size / Padding**  | Chip sizing                                            |

**Multi-Select (Quick Replies)**

| Field                               | What It Styles        |
| ----------------------------------- | --------------------- |
| **Submit Width / Radius / Padding** | Submit button         |
| **Submit Background / Text**        | Submit colors         |
| **Selected Reply BG / Text**        | Selected state styles |

#### List & Carousel

| Component    | Fields                                                                                           |
| ------------ | ------------------------------------------------------------------------------------------------ |
| **List**     | Title/Subtitle colors, sizes, heights, BG; Image Max W/H                                         |
| **Carousel** | Title/Subtitle colors, sizes, heights, BG; Button colors/sizes/heights; Max Width; Image Max W/H |

***

### 💾 Save as a New Theme

1. Customize options in **Designer → Themes**.
2. Click **Save**.
3. Enter **Theme Name** (required) and optional **Description**.
4. Click **Save** again.

> ✅ Your new theme appears in the **Themes** list for quick reuse.

***

### 🎯 Apply (Use) a Saved Theme

1. Go to **Designer → Themes**.
2. Click **Themes**.
3. Select the theme → **Use Theme**.
4. The Web Chat panel updates instantly.

> 🧪 Open a chat preview and test contrast, buttons, and quick replies before going live.

***

### 🧹 Clear the Current Theme (Reset to Default)

* Go to **Designer → Themes** → click **Clear** (enabled only if a theme is applied).
* The Web Chat panel returns to default styles.

***

### 🗑️ Delete a Theme

1. Go to **Designer → Themes → Themes**.
2. Click the **bin** icon next to a theme.
3. Confirm **Proceed**.

> ⚠️ Deleting a theme removes it from the list (does not affect already-published pages).

***

### 🎨 Best-Practice Guardrails (Design + Accessibility)

* **Contrast matters:** Ensure body text contrasts at least WCAG AA (\~4.5:1).
* **Consistent bubbles:** Keep left/right bubble colors clearly distinct.
* **Button restraint:** Use 1–2 primary button colors; others as neutral.
* **Quick replies:** Choose a legible chip height (36–44px) and font size (14–16px).
* **Fonts:** Load one primary + one fallback; avoid >2 web font families.
* **Imagery:** Keep chat **Background Image** subtle; content must remain readable.
* **Responsive sizing:** If embedding chat in a narrow column, reduce **Width** and **Speech Bubbles Font Size** slightly.
* **Brand links only:** If buttons/quick replies open URLs, prefer your domain (no public shorteners).

***

### 🔧 Troubleshooting

* **“My buttons look cramped.”** Increase **Button Padding** and check **Font Size**.
* **“Quick replies wrap badly.”** Use **Scrollable at Bottom** display or shorten titles.
* **“Text looks blurry.”** Ensure correct font URL and fallback; avoid scaling via CSS transforms.
* **“Images overflow.”** Reduce **Image Max Width (%)** or **Image Max Height (px)**.
* **“Low contrast warnings.”** Darken text or lighten bubble backgrounds.

***

### 🧩 Sample Theme Presets (Copy These Values)

**Light – Primary**

* Right Bubble: BG `#0B5FFF`, Text `#FFFFFF`
* Left Bubble: BG `#F3F5F8`, Text `#1A1F36`
* Buttons: BG `#0B5FFF`, Text `#FFFFFF`, Radius `8px`
* Quick Replies: BG `#EEF2FF`, Text `#0B5FFF`, Radius `24px`
* Fonts: Inter (URL via Google Fonts), fallback: Arial

**Dark – High Contrast**

* Background: `#0F1115`
* Right Bubble: BG `#2563EB`, Text `#FFFFFF`
* Left Bubble: BG `#1A1F36`, Text `#E5E7EB`
* Buttons: BG `#3B82F6`, Text `#0B0D12`, Radius `8px`
* Quick Replies: BG `#111827`, Text `#E5E7EB`, Border `#374151`

> 💡 Use these as a starting point; tweak to your brand palette.

***

### ✅ Pre-Publish Checklist

* [ ] Text contrast is readable in all states (bubbles, buttons, quick replies).
* [ ] Links and buttons match brand colors and are legible on hover.
* [ ] Quick replies don’t wrap awkwardly on mobile widths.
* [ ] Fonts load correctly (primary + fallback).
* [ ] Carousel/List titles are readable over images.
* [ ] Saved theme is named and described clearly for teammates.