Widget Customization & Theming

Style every aspect of your assistant to match your brand identity with curated themes, web fonts, and custom color overrides.

WebChat AI Widget Customization Builder — The dashboard Widget Builder includes real-time live preview for both desktop and mobile viewports.

11 Curated theme presets

One-click themes that instantly balance header gradients, bubble colors, surface tints, and text contrast.

In the dashboard theme selector, the initial view displays 6 curated cards. Clicking "Show more (5 more)" expands all 11 themes, and "Show less" collapses back to 6.

Classic

Default emerald and teal palette with clean white surfaces.

preset: "classic"

WhatsApp Classic

Familiar messaging aesthetic with teal headers and green bubbles.

preset: "whatsapp-classic"

iOS Native

Clean, native iOS messaging feel with crisp blue bubbles.

preset: "ios-native"

Enterprise Slate

Professional, high-contrast theme optimized for long reading sessions.

preset: "enterprise-slate"

Ocean Blue

Trusted SaaS blue with crisp white surfaces.

preset: "ocean-blue"

Midnight Dark

Bold dark-first theme for a modern product vibe.

preset: "midnight-dark"

Emerald Support

Friendly green for support and success teams.

preset: "emerald-support"

Purple AI

Violet accents for AI assistants and innovation.

preset: "purple-ai"

Minimal White

Clean monochrome that fits any brand.

preset: "minimal-white"

Sunset

Warm orange and red for friendly, approachable brands.

preset: "sunset"

Modern Gradient

Vivid primary-to-accent gradient header.

preset: "modern-gradient"

10 Curated font options

Visually distinctive typography loaded on-demand via Google Fonts.

To prevent heavy font binary files from bloating the widget bundle (keeping it strictly under 50 kB gzip), WebChat AI loads web font stylesheets dynamically when configured:

System Default

San Francisco, Segoe UI, Roboto, sans-serif

system

Inter

Clean, neutral geometric sans-serif

inter

Poppins

Friendly, modern rounded geometric sans-serif

poppins

Nunito

Soft, rounded sans-serif with excellent legibility

nunito

Roboto

Neo-grotesque sans-serif with natural reading rhythm

roboto

Open Sans

Humanist sans-serif with open letterforms

open-sans

Montserrat

Distinct urban architectural sans-serif

montserrat

Lato

Warm, corporate sans-serif with sleek curves

lato

Playfair Display

Sophisticated modern serif for premium editorial feel

playfair-display

Space Grotesk

Tech-focused monospace-inspired proportional sans-serif

space-grotesk

Zero Bundled Binaries

No font binaries (.woff2) are embedded in the SDK package. If the visitor is offline or their network blocks Google Fonts, the widget seamlessly degrades to the native system font stack without visual breakage.

Branding hierarchy & colors

Override preset defaults with exact brand assets.

You can override individual styling elements without altering the rest of your chosen preset:

Bot Name: Max 60 characters (e.g. "Acme Support AI").
Status Presence Text: Max 40 characters (e.g. "Online • Answers in seconds").
Avatar URL: Image URL for the bot avatar inside chat messages and header.
Header Logo URL: Optional logo shown in the top navigation bar.
Color Overrides: Set custom HEX colors for Primary, Header Background, Window Surface, and Body Text.