Your chatbot should look like it belongs on your website—not like a generic widget dropped in from somewhere else. Here's how to customize every aspect of your WordPress chatbot's design.

Why Chatbot Design Matters

First impressions count:

Visitors decide in 0.05 seconds whether to trust your chatbot
Branded design increases engagement by 40%
Consistent styling reduces friction and confusion
Professional appearance = professional business

A well-designed chatbot doesn't just look good—it converts better.

Quick Start: Choosing a Pre-Built Theme

Sant Chat AI includes 12 professionally designed themes. Start here before customizing from scratch.

Available Themes

1. Modern (Default)

Clean, minimal design
Rounded corners
Soft shadows
Best for: SaaS, tech startups

2. Professional

Sharp edges
Strong borders
Corporate feel
Best for: B2B, legal, financial

3. Friendly

Bright colors
Playful animations
Welcoming tone
Best for: E-commerce, education, community

4. Dark Mode

Dark background
High contrast
Easy on eyes
Best for: Developer tools, gaming, media

5. Minimal

No shadows or borders
Flat design
Maximum simplicity
Best for: Blogs, portfolios, content sites

Plus 7 more: Gradient, Nature, Bold, Soft, Vibrant, Classic, Elegant

How to Apply a Theme

Go to Sant Chat AI → Design in WordPress
Browse theme previews
Click your favorite
Click Apply Theme
Refresh your site to see changes

Pro tip: Test themes on different pages. What works on your homepage might not work on your blog.

Customizing Colors

Match your chatbot to your brand identity perfectly.

Primary Color (Main Accent)

This color appears on:

Send button
User message bubbles
Links and CTAs
Active states

How to change:

Sant Chat AI → Design → Colors
Click Primary Color
Enter your brand hex code (e.g., #FF5733)
Save

Choosing the right primary color:

Use your brand's main color
Ensure good contrast with white text
Test readability on different backgrounds

Secondary Color (Backgrounds)

Used for:

Bot message bubbles
Widget background
Hover states

Best practices:

Light colors work best (easier to read)
Avoid pure white (harsh on eyes)
Use your brand's secondary color or a tint

Text Colors

Three text colors to set:

Primary text — Main conversation text
Secondary text — Timestamps, system messages
Link color — Clickable elements

Accessibility tip: Aim for 4.5:1 contrast ratio minimum. Test at WebAIM Contrast Checker.

Color Presets

Save time with pre-configured color schemes:

Tech Startup:

Primary: #6366F1 (Indigo)
Secondary: #F3F4F6 (Light gray)
Text: #111827 (Dark gray)

E-commerce:

Primary: #EF4444 (Red)
Secondary: #FEF2F2 (Light red)
Text: #1F2937 (Charcoal)

Nature/Eco:

Primary: #10B981 (Green)
Secondary: #ECFDF5 (Mint)
Text: #064E3B (Forest)

Positioning the Chat Widget

Where should the chatbot appear on your page?

Position Options

Bottom Right (Default)

Most common placement
Doesn't block content
Expected location
Best for: Most websites

Bottom Left

Alternative to avoid clashing with other widgets
Less conventional
Best for: Sites with bottom-right CTAs or live chat

Top Right

Always visible without scrolling
More prominent
Best for: High-traffic pages where engagement is priority

Top Left

Unique placement
Matches navigation area
Best for: Help/support sections

Custom Position

Fine-tune with CSS
Advanced users only

How to Change Position

Sant Chat AI → Design → Position
Select position
Adjust offset (distance from corner)
Save

Mobile positioning:

Automatically adjusts for small screens
Takes up more space for easier tapping
Can't be customized separately (responsive by default)

Customizing the Chat Bubble Icon

The chat bubble is the first thing visitors see.

Icon Options

1. Default Chat Bubble

Universal symbol
Instantly recognizable
Safe choice

2. Robot/AI Icon

Shows it's AI-powered
Modern feel
Best for: Tech-forward brands

3. Help Icon (Question Mark)

Emphasizes support
Friendly
Best for: Help desks, documentation

4. Custom Icon

Upload your logo or custom icon
Maximum brand alignment
Requirements: SVG or PNG, 48x48px minimum

Adding a Custom Icon

Sant Chat AI → Design → Chat Icon
Click Upload Custom
Select your file (SVG recommended for scalability)
Adjust size if needed
Save

Design tips:

Keep it simple (will be small on screen)
High contrast (visible against any background)
Square or circular shape works best

Customizing the Greeting Message

The greeting sets the tone for the entire conversation.

Default Greeting

"👋 Hi! How can I help you today?"

When to keep it:

General audience
No specific use case
Broad support scope

Customized Greetings by Use Case

E-commerce:

"Welcome! Looking for something specific? I can help you find it."

SaaS Product:

"Hi! Need help getting started? I'm here to answer any questions about [Product Name]."

Support Site:

"👋 Stuck on something? Ask me anything about [Service/Product]."

Membership Site:

"Welcome back! How can I assist you today?"

Dynamic Greetings (Advanced)

Change greeting based on page context:

Homepage:

"Welcome! New here? I can show you around."

Pricing Page:

"Questions about pricing? I'm here to help you find the right plan."

Blog:

"Enjoying the article? I can help you find related content or answer questions."

Setup:

Sant Chat AI → Design → Greetings
Enable Page-Specific Greetings
Add rules (URL contains → Show greeting)
Save

Animations and Behavior

Control how the chatbot appears and behaves.

Entrance Animation

Options:

Slide in (smooth, professional)
Fade in (subtle, minimal)
Pop in (playful, attention-grabbing)
None (instant, no animation)

How to change:

Sant Chat AI → Design → Animations
Select entrance style
Adjust speed (fast, normal, slow)
Save

Auto-Open Behavior

Should the chatbot open automatically?

Never (Default)

Visitors open it manually
Less intrusive
Best for: Most sites

On First Visit

Opens for new visitors only
Good for onboarding
Best for: SaaS, products with learning curves

After Time Delay

Opens after X seconds on page
Subtle engagement nudge
Best for: Support sites, documentation

On Exit Intent

Opens when visitor moves to close tab
Last-ditch engagement
Best for: E-commerce, sales pages

Setup:

Sant Chat AI → Behavior → Auto-Open
Choose trigger
Set delay (if applicable)
Save

Warning: Auto-open can annoy users if overused. Test carefully.

Advanced Customization with CSS

For developers who want pixel-perfect control.

Adding Custom CSS

Sant Chat AI → Design → Custom CSS
Add your styles
Preview in real-time
Save

Common CSS Customizations

Change widget size:

.sant-chat-widget {
  width: 400px;
  height: 600px;
}

Round corners more:

.sant-chat-widget {
  border-radius: 24px;
}

Add a border:

.sant-chat-widget {
  border: 2px solid #6366F1;
}

Customize message bubbles:

.sant-message-bot {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

Change font:

.sant-chat-widget {
  font-family: 'Inter', sans-serif;
}

Hide the Sant branding (Pro+ plans):

.sant-powered-by {
  display: none;
}

CSS Class Reference

.sant-chat-widget — Main container
.sant-chat-bubble — Floating chat icon
.sant-chat-header — Top bar with title
.sant-message-bot — Bot message bubble
.sant-message-user — User message bubble
.sant-input — Text input field
.sant-send-button — Send button

Mobile Optimization

Your chatbot should work perfectly on phones and tablets.

Responsive Design (Automatic)

Sant Chat AI automatically adjusts for mobile:

Full-width on small screens
Larger tap targets
Bottom sheet style on mobile
Optimized keyboard handling

Mobile-Specific Settings

Override mobile behavior:

Sant Chat AI → Design → Mobile
Adjust:
- Opening animation (slide up recommended)
- Maximum height (don't block full screen)
- Close button size (larger for thumbs)

Testing on Mobile

Before going live:

Open your site on your phone
Test the chatbot
Check:
- Easy to tap?
- Keyboard doesn't block input?
- Can scroll conversation?
- Close button accessible?

Emulator testing:

Chrome DevTools → Device Toolbar
Test iOS and Android sizes
Test landscape and portrait

Design Checklist

Before launching your customized chatbot:

Design Inspiration

Minimalist Tech:

Clean sans-serif font
Monochrome with one accent color
Subtle shadows
Flat icons

Friendly E-commerce:

Rounded everything
Bright, welcoming colors
Emoji in greetings
Bouncy animations

Professional B2B:

Conservative colors (navy, gray)
Serif or corporate sans-serif font
Minimal animation
Formal greeting

Creative Agency:

Bold, unexpected colors
Custom illustrations
Unique positioning
Playful animations

Common Design Mistakes

Mistake 1: Too many colors Stick to 2-3 colors maximum. More looks chaotic.

Mistake 2: Poor contrast Light gray text on white background? Unreadable.

Mistake 3: Overwhelming animations Bouncing, spinning, flashing = annoying.

Mistake 4: Ignoring mobile 60% of traffic is mobile. Test there first.

Mistake 5: Brand mismatch Hot pink chatbot on a law firm site? Confusing.

Next Steps

Start with a theme — Pick the closest match to your brand
Adjust colors — Match your brand palette
Write a custom greeting — Make it personal
Test on mobile — Ensure it works everywhere
Get feedback — Ask colleagues or friends

Want to see how your design looks? Visit your site and test it live!

Pro tip: The best chatbot design is invisible—it feels like a natural part of your website, not an add-on.

How to Customize Your WordPress Chatbot Design to Match Your Brand