Ctrlk
Book a DemoVisit WebsiteOn-Demand Content
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

PreviousWebhooksNextFunctional Overview

Last updated

Was this helpful?