Published on

Customizing Your Chatbot: Mastering Theming on Predictable Dialogs

Authors

In the fast-paced world of digital interactions, a chatbot serves as the first point of contact between your brand and users. Making it look and feel like an extension of your website or app proves crucial. Predictable Dialogs (PD) offers a versatile platform that continuously evolves its theming capabilities. What started as basic styling options has grown into a robust system where you can use custom CSS to transform your chatbot widget into something truly unique.

Whether you're aiming for a sleek corporate vibe or a whimsical comic book flair, PD's theming system empowers you to target specific classes for precise control. This comprehensive guide shows you how to create custom CSS for your PD chatbot. We'll cover all the targetable classes, their purposes, and limitations, plus showcase a variety of ready-to-use themes complete with code snippets. By the end, you'll have the knowledge to craft a chatbot that functions flawlessly and captivates your audience.

The Power of Strategic Chatbot Theming

Smart businesses understand that every touchpoint shapes user perception. A well-designed chatbot theme creates immediate brand recognition and establishes trust before users even start conversing. Research shows that users form opinions about digital interfaces within 50 milliseconds—making your chatbot's visual design a critical competitive advantage. PD's theming system removes the guesswork by providing direct CSS control over every visual element.

Why Theme Your PD Chatbot?

Theming goes beyond aesthetics—it's about user experience. A well-themed chatbot can boost engagement, reinforce brand identity, and even improve conversion rates. For instance, a healthcare site might opt for calming blues to build trust, while an e-commerce platform could use vibrant oranges to encourage purchases. PD's evolution in this area means you no longer need complex hacks; simple CSS targeting does the trick.

PD enables customization through custom CSS, where you target existing classes on the chatbot elements. This approach offers flexibility while maintaining stability guardrails. This guide starts with basic examples and builds complexity from there.

How to Apply These Themes

You can use any of the CSS themes below in two simple ways:

Method 1: Theme Page (Recommended for Final Implementation)

  1. Log into your Predictable Dialogs dashboard
  2. Navigate to the Theme page for your chatbot
  3. Scroll to the Custom CSS section
  4. Copy and paste any theme's CSS code directly into the text area
  5. Use the live playground to test changes before saving
  6. Click Save when you're satisfied with the result

Method 2: Home Page Live Preview (Perfect for Quick Testing)

  1. Visit the PD home page
  2. Click the "SEE LIVE DEMO" button.
  3. Look for the Custom CSS section in the preview options
  4. Paste any theme's CSS code to see instant results
  5. Once you find a theme you like, save it using Method 1

💡 Pro Tip: The playground environments let you experiment safely—changes won't go live until you explicitly save them. This makes it perfect for testing multiple themes or customizing colors before committing.

Inspiring Template Themes: Ready-to-Use Examples

To spark your creativity, here are 10 battle-tested themes. Each includes a description, key elements, color scheme and perfected CSS code. Feel free to copy-paste and adapt!

1. Modern Corporate Theme

Modern Corporate Theme - Professional chatbot with blue accents and clean lines

Description: Clean, professional design perfect for business websites and corporate communications. Features subtle shadows, corporate blue/gray palette, and minimalist aesthetics.
Key Elements: Professional typography, subtle gradients, muted colors, clean lines, high readability.
Color Scheme:

  • Background: Light gray (#f8f9fa)
  • AI Bubbles: Pure white (#ffffff) background with dark text (#212529)
  • User Bubbles: Light gray (#e9ecef) background with dark text (#495057)
  • Buttons: Corporate blue (#0d6efd) with white text (#ffffff)
  • Inputs: White (#ffffff) background with dark text (#212529)
  • Typography: Inter font family
  • Borders: Subtle gray borders (#dee2e6, #ced4da) with rounded corners (8-12px)
  • Effects: Soft shadows and gentle hover animations

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* Modern Corporate Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #f8f9fa;
  font-family: 'Inter', 'Segoe UI', system-ui;
  color: #212529;
  border: 1px solid #dee2e6;
  border-radius: 12px;
}

.agent-host-bubble .bubble-typing {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.agent-host-bubble {
  color: #212529;
}

.bubble1 {
  background-color: #212529;
}
.bubble2 {
  background-color: #212529;
}
.bubble3 {
  background-color: #212529;
}

.agent-guest-bubble {
  background-color: #e9ecef;
  color: #495057;
}

/* Input styling */
.agent-input {
  background-color: #ffffff;
  color: #212529;
  border: 1px solid #ced4da;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.agent-input:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Button styling */
.agent-button {
  background-color: #0d6efd;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2);
  font-weight: 500;
}

.agent-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

Highlights

  • ✅ Clean corporate background (#f8f9fa)
  • ✅ Professional container styling with Inter font family
  • ✅ AI Bubble Colors - Clean white background (#ffffff) with dark text (#212529)
  • ✅ User Bubble Colors - Light gray background (#e9ecef) with dark text (#495057)
  • ✅ Corporate input styling with subtle shadows and clean white background
  • ✅ Professional blue buttons (#0d6efd) with hover effects and transforms
  • ✅ Complete modern corporate atmosphere with rounded corners and soft shadows
  • ✅ Input focus states with corporate blue accent

2. Gaming Console Theme

Gaming Console Theme - Dark neon-lit chatbot with glowing green elements

Description: Dark theme inspired by gaming interfaces with neon accents, glowing effects, and console-style design elements.
Key Elements: Dark backgrounds, neon green/blue accents, glowing borders, futuristic typography, high contrast.

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* Gaming Console Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #0a0a0b;
  font-family: 'Courier New';
  border: 2px solid #00ff88;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.agent-host-bubble .bubble-typing {
  background-color: #1a1a1b;
}

.agent-host-bubble {
  color: #00ff88;
}

.bubble1 {
  color: #00ff88;
}
.bubble2 {
  color: #00ff88;
}
.bubble3 {
  color: #00ff88;
}

.agent-guest-bubble {
  background-color: #2d1b69;
  color: #00ccff;
}

/* Input styling */
.agent-input {
  border: 2px solid #333333;
  background-color: #1a1a1b;
  color: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.agent-input:focus-within {
  border-color: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

/* Button styling */
.agent-button {
  background-color: #00ff88;
  color: #000000;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.agent-button:hover {
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
  transform: translateY(-2px);
}

Highlights

  • ✅ Dark gaming background (#0a0a0b)
  • ✅ Neon green glowing container border with shadow effects
  • ✅ AI Bubble Colors - Dark gray background (#1a1a1b) with neon green text (#00ff88)
  • ✅ User Bubble Colors - Dark purple background (#2d1b69) with cyan text (#00ccff)
  • ✅ Dark gaming input styling with focus effects
  • ✅ Neon green buttons with hover effects and transforms
  • ✅ Complete gaming console atmosphere

3. Medical/Healthcare Theme

Medical Healthcare Theme - Calming blue and white chatbot for wellness sites

Description: Clean, accessible design with calming blues and whites, optimized for healthcare and wellness applications.
Key Elements: Calming blue palette, high contrast for accessibility, clean fonts, soft shadows, trust-inspiring design.
Color Scheme:

  • Background: Clean white (#ffffff)
  • AI Bubbles: Light blue (#f0f8ff) background with dark text (#2c3e50)
  • User Bubbles: Soft green (#f0fff0) background with dark text (#2c3e50)
  • Buttons: Medical blue (#3498db) with white text (#ffffff)
  • Inputs: White (#ffffff) background with dark text (#2c3e50)
  • Typography: System fonts for maximum readability
  • Borders: Soft gray borders (#e1e8ed) with gentle rounded corners
  • Effects: Subtle shadows and accessible focus states

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* Medical/Healthcare Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui;
  color: #2c3e50;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.agent-host-bubble .bubble-typing {
  background-color: #f0f8ff;
  border: 1px solid #dbeafe;
  border-radius: 12px;
}

.agent-host-bubble {
  color: #2c3e50;
}

.bubble1 {
  background-color: #2c3e50;
}
.bubble2 {
  background-color: #2c3e50;
}
.bubble3 {
  background-color: #2c3e50;
}

.agent-guest-bubble {
  background-color: #f0fff0;
  color: #2c3e50;
  border-radius: 12px;
}

/* Input styling */
.agent-input {
  background-color: #ffffff;
  color: #2c3e50;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.agent-input:focus-within {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Button styling */
.agent-button {
  background-color: #3498db;
  color: #ffffff;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
}

.agent-button:hover {
  background-color: #2980b9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

Highlights

  • ✅ Clean medical white background (#ffffff)
  • ✅ Professional healthcare container with soft borders and shadows
  • ✅ AI Bubble Colors - Calming light blue background (#f0f8ff) with dark text (#2c3e50)
  • ✅ User Bubble Colors - Soothing light green background (#f0fff0) with dark text (#2c3e50)
  • ✅ Accessible input styling with focus states
  • ✅ Medical blue buttons (#3498db) with professional hover effects
  • ✅ High contrast, accessible design perfect for healthcare
  • ✅ System fonts for maximum readability

👉 Try this theme: Copy the CSS above and test it in your Theme page playground!

4. E-commerce Shopping Theme

E-commerce Shopping Theme - Vibrant orange-accented chatbot for online stores

Description: Bright, conversion-focused design with prominent call-to-action elements and product-friendly color scheme.
Key Elements: Orange/red accent colors, clear CTAs, product-focused styling, shopping cart aesthetics.
Color Scheme:

  • Background: Warm cream (#fefcf3)
  • AI Bubbles: Pure white (#ffffff) background with dark text (#2c3e50)
  • User Bubbles: Soft orange (#fff5e6) background with dark text (#2c3e50)
  • Buttons: Shopping orange (#ff6b35) with white text (#ffffff)
  • Inputs: White (#ffffff) background with dark text (#2c3e50)
  • Typography: System fonts optimized for readability and conversion
  • Borders: Warm gray borders (#e8dcc0) with friendly rounded corners
  • Effects: Warm shadows and engaging hover animations

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* E-commerce Shopping Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #fefcf3;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui;
  color: #2c3e50;
  border: 2px solid #e8dcc0;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.12);
}

.agent-host-bubble .bubble-typing {
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.agent-host-bubble {
  color: #2c3e50;
}

.bubble1 {
  background-color: #2c3e50;
}
.bubble2 {
  background-color: #2c3e50;
}
.bubble3 {
  background-color: #2c3e50;
}

.agent-guest-bubble {
  background-color: #fff5e6;
  color: #2c3e50;
  border-radius: 16px;
  border: 1px solid #ffcc9a;
}

/* Input styling */
.agent-input {
  background-color: #ffffff;
  color: #2c3e50;
  border: 2px solid #e8dcc0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.agent-input:focus-within {
  border-color: #ff6b35;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

/* Button styling */
.agent-button {
  background-color: #ff6b35;
  color: #ffffff;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
}

.agent-button:hover {
  background-color: #e55a2b;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4);
}

Highlights

  • ✅ Warm shopping background (#fefcf3) with orange accent shadows
  • ✅ Clean container styling with warm borders and friendly corners
  • ✅ AI Bubble Colors - Clean white background (#ffffff) with dark text (#2c3e50)
  • ✅ User Bubble Colors - Warm orange background (#fff5e6) with dark text (#2c3e50)
  • ✅ Shopping-focused input styling with orange focus states
  • ✅ Strong CTA buttons (#ff6b35) with engaging hover effects and transforms
  • ✅ Complete e-commerce shopping atmosphere with conversion-optimized styling
  • ✅ Warm, welcoming design perfect for online stores

👉 Try this theme: Copy the CSS above and test it in your Theme page playground!

5. Educational Platform Theme

Educational Platform Theme - Friendly purple and blue chatbot for learning sites

Description: Friendly, approachable design perfect for learning platforms with good readability and encouraging colors.
Key Elements: Soft gradients, friendly colors (blues/greens), clear typography, encouraging visual hierarchy.
Color Scheme:

  • Background: Soft paper white (#fafafa)
  • AI Bubbles: Light purple (#f3f0ff) background with dark text (#2d3748)
  • User Bubbles: Light blue (#e6f3ff) background with dark text (#2d3748)
  • Buttons: Academic purple (#8b5cf6) with white text (#ffffff)
  • Inputs: White (#ffffff) background with dark text (#2d3748)
  • Typography: System fonts optimized for reading and comprehension
  • Borders: Soft gray borders (#e2e8f0) with learning-friendly rounded corners
  • Effects: Gentle shadows and encouraging hover animations

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* Educational Platform Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui;
  color: #2d3748;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.agent-host-bubble .bubble-typing {
  background-color: #f3f0ff;
  border: 1px solid #e9e6ff;
  border-radius: 14px;
}

.agent-host-bubble {
  color: #2d3748;
}
.bubble1 {
  background-color: #2d3748;
}
.bubble2 {
  background-color: #2d3748;
}
.bubble3 {
  background-color: #2d3748;
}

.agent-guest-bubble {
  background-color: #e6f3ff;
  color: #2d3748;
  border-radius: 14px;
}

/* Input styling */
.agent-input {
  background-color: #ffffff;
  color: #2d3748;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.agent-input:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

/* Button styling */
.agent-button {
  background-color: #8b5cf6;
  color: #ffffff;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(139, 92, 246, 0.25);
}

.agent-button:hover {
  background-color: #7c3aed;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
}

Highlights

  • ✅ Academic paper background (#fafafa) with soft educational atmosphere
  • ✅ Learning-focused container with gentle borders and shadows
  • ✅ AI Bubble Colors - Light purple background (#f3f0ff) with dark text (#2d3748)
  • ✅ User Bubble Colors - Light blue background (#e6f3ff) with dark text (#2d3748)
  • ✅ Student-friendly input styling with purple focus states
  • ✅ Academic purple buttons (#8b5cf6) with encouraging hover effects
  • ✅ Complete educational platform atmosphere perfect for learning
  • ✅ High readability design optimized for knowledge sharing

👉 Try this theme: Copy the CSS above and test it in your Theme page playground!

6. Vintage Paper Theme

Vintage Paper Theme - Sepia-toned chatbot with paper-like textures

Description: Warm, nostalgic design with paper-like textures, sepia tones, and handwritten-style aesthetic.
Key Elements: Cream/beige backgrounds, brown text, paper textures, vintage typography, warm color palette.
Color Scheme:

  • Background: Aged paper (#faf7f0)
  • AI Bubbles: Cream parchment (#f9f6f0) background with dark brown text (#3e2723)
  • User Bubbles: Light sepia (#f5f2e8) background with dark brown text (#3e2723)
  • Buttons: Classic brown (#8d6e63) with cream text (#faf7f0)
  • Inputs: Cream (#f9f6f0) background with dark brown text (#3e2723)
  • Typography: Serif fonts for classic literary appearance
  • Borders: Warm brown borders (#d7ccc8) with gentle vintage corners
  • Effects: Soft sepia shadows and nostalgic hover animations

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* Vintage Paper Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #faf7f0;
  font-family: 'Times New Roman', 'Georgia', serif;
  color: #3e2723;
  border: 2px solid #d7ccc8;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(62, 39, 35, 0.15);
}

.agent-host-bubble .bubble-typing {
  background-color: #f9f6f0;
  border: 1px solid #efebe9;
  border-radius: 8px;
}

.agent-host-bubble {
  color: #3e2723;
}

.bubble1 {
  background-color: #3e2723;
}
.bubble2 {
  background-color: #3e2723;
}
.bubble3 {
  background-color: #3e2723;
}

.agent-guest-bubble {
  background-color: #f5f2e8;
  color: #3e2723;
  border-radius: 8px;
  border: 1px solid #d7ccc8;
}

/* Input styling */
.agent-input {
  background-color: #f9f6f0;
  color: #3e2723;
  border: 2px solid #d7ccc8;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px rgba(62, 39, 35, 0.08);
}

.agent-input:focus-within {
  border-color: #8d6e63;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2);
}

/* Button styling */
.agent-button {
  background-color: #8d6e63;
  color: #faf7f0;
  border-radius: 6px;
  font-weight: 500;
  font-family: 'Times New Roman', serif;
  box-shadow: 0 3px 10px rgba(141, 110, 99, 0.3);
}

.agent-button:hover {
  background-color: #795548;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(141, 110, 99, 0.4);
}

Highlights

  • ✅ Vintage paper background (#faf7f0) with nostalgic sepia atmosphere
  • ✅ Classic container styling with warm brown borders and vintage shadows
  • ✅ AI Bubble Colors - Cream parchment background (#f9f6f0) with brown text (#3e2723)
  • ✅ User Bubble Colors - Light sepia background (#f5f2e8) with brown text (#3e2723)
  • ✅ Typewriter-style input styling with vintage focus states
  • ✅ Classic brown buttons (#8d6e63) with elegant hover effects
  • ✅ Complete vintage paper atmosphere with serif typography
  • ✅ Timeless design perfect for literary and heritage websites

👉 Try this theme: Copy the CSS above and test it in your Theme page playground!

7. Futuristic Hologram Theme

Futuristic Hologram Theme - Sci-fi glowing chatbot with cyan and purple accents

Description: Translucent, high-tech design with glowing borders, holographic effects, and sci-fi inspired colors.
Key Elements: Translucent backgrounds, glowing cyan/purple borders, futuristic fonts, holographic effects.
Color Scheme:

  • Background: Deep space black (#0a0a0f)
  • AI Bubbles: Dark cyan (#0f1419) background with bright cyan text (#00d4ff)
  • User Bubbles: Dark purple (#1a0f2e) background with bright purple text (#b347d9)
  • Buttons: Electric cyan (#00d4ff) with dark text (#0a0a0f)
  • Inputs: Dark slate (#151820) background with cyan text (#00d4ff)
  • Typography: Monospace fonts for futuristic code aesthetic
  • Borders: Glowing cyan borders with sharp, technological corners
  • Effects: Neon glows, pulsing animations, and holographic hover effects

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* Futuristic Hologram Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #0a0a0f;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  color: #00d4ff;
  border: 2px solid #00d4ff;
  border-radius: 4px;
  box-shadow:
    0 0 30px rgba(0, 212, 255, 0.4),
    inset 0 0 20px rgba(0, 212, 255, 0.1);
}

.agent-host-bubble .bubble-typing {
  background-color: #0f1419;
  border: 1px solid #00d4ff;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.agent-host-bubble {
  color: #00d4ff;
}

.bubble1 {
  background-color: #00d4ff;
}
.bubble2 {
  background-color: #00d4ff;
}
.bubble3 {
  background-color: #00d4ff;
}

.agent-guest-bubble {
  background-color: #1a0f2e;
  color: #b347d9;
  border-radius: 4px;
  border: 1px solid #b347d9;
  box-shadow: 0 0 15px rgba(179, 71, 217, 0.3);
}

/* Input styling */
.agent-input {
  background-color: #151820;
  color: #00d4ff;
  border: 2px solid #2a3441;
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.agent-input:focus-within {
  border-color: #00d4ff;
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.4),
    inset 0 0 10px rgba(0, 212, 255, 0.2);
}

/* Button styling */
.agent-button {
  background-color: #00d4ff;
  color: #0a0a0f;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  border: 1px solid #00d4ff;
}

.agent-button:hover {
  background-color: #00b8e6;
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.7);
}

Highlights

  • ✅ Deep space holographic background (#0a0a0f) with cyan glow effects
  • ✅ High-tech container with glowing borders and holographic shadows
  • ✅ AI Bubble Colors - Dark cyan background (#0f1419) with bright cyan text (#00d4ff)
  • ✅ User Bubble Colors - Dark purple background (#1a0f2e) with purple text (#b347d9)
  • ✅ Terminal-style input styling with holographic focus effects
  • ✅ Electric cyan buttons (#00d4ff) with pulsing glow hover effects
  • ✅ Complete futuristic hologram atmosphere with monospace typography
  • ✅ Cyberpunk design perfect for tech and innovation websites

👉 Try this theme: Copy the CSS above and test it in your Theme page playground!

8. Nature Forest Theme

Nature Forest Theme - Green-toned chatbot with organic shapes

Description: Earth-inspired design with natural colors, organic shapes, and environmentally conscious aesthetics.
Key Elements: Green color palette, earth tones, organic rounded shapes, natural textures, calming atmosphere.
Color Scheme:

  • Background: Soft sage (#f7f9f7)
  • AI Bubbles: Light moss (#f0f5f0) background with forest green text (#2d5016)
  • User Bubbles: Warm beige (#f9f7f4) background with forest green text (#2d5016)
  • Buttons: Forest green (#4a7c59) with white text (#ffffff)
  • Inputs: Clean white (#ffffff) background with forest text (#2d5016)
  • Typography: System fonts optimized for natural readability
  • Borders: Soft green borders (#c8d5b9) with organic rounded corners
  • Effects: Natural shadows and gentle hover animations

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* Nature Forest Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #f7f9f7;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui;
  color: #2d5016;
  border: 2px solid #c8d5b9;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(45, 80, 22, 0.12);
}

.agent-host-bubble .bubble-typing {
  background-color: #f0f5f0;
  border: 1px solid #e8f0e8;
  border-radius: 12px;
}

.agent-host-bubble {
  color: #2d5016;
}

.bubble1 {
  background-color: #2d5016;
}
.bubble2 {
  background-color: #2d5016;
}
.bubble3 {
  background-color: #2d5016;
}

.agent-guest-bubble {
  background-color: #f9f7f4;
  color: #2d5016;
  border-radius: 12px;
  border: 1px solid #e8e3d3;
}

/* Input styling */
.agent-input {
  background-color: #ffffff;
  color: #2d5016;
  border: 2px solid #c8d5b9;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(45, 80, 22, 0.08);
}

.agent-input:focus-within {
  border-color: #4a7c59;
  box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15);
}

/* Button styling */
.agent-button {
  background-color: #4a7c59;
  color: #ffffff;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(74, 124, 89, 0.25);
}

.agent-button:hover {
  background-color: #3d6b4a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(74, 124, 89, 0.35);
}

Highlights

  • ✅ Natural sage background (#f7f9f7) with peaceful forest atmosphere
  • ✅ Organic container styling with green borders and natural shadows
  • ✅ AI Bubble Colors - Light moss background (#f0f5f0) with forest text (#2d5016)
  • ✅ User Bubble Colors - Warm beige background (#f9f7f4) with forest text (#2d5016)
  • ✅ Typing Dots - Forest green (#2d5016) to match AI bubble text color
  • ✅ Nature-friendly input styling with forest green focus states
  • ✅ Forest green buttons (#4a7c59) with natural hover effects
  • ✅ Complete nature forest atmosphere perfect for wellness and environmental sites
  • ✅ Calming design optimized for peaceful user experiences

👉 Try this theme: Copy the CSS above and test it in your Theme page playground!

9. Social Media Theme

Social Media Theme - Bright messaging-style chatbot with blue and pink bubbles

Description: Modern, familiar design inspired by popular messaging applications with bright, engaging colors.
Key Elements: Familiar messaging UI patterns, bright accent colors, modern typography, social media aesthetics.
Color Scheme:

  • Background: Social white (#ffffff)
  • AI Bubbles: Light blue (#e3f2fd) background with dark blue text (#1565c0)
  • User Bubbles: Light pink (#fce4ec) background with dark pink text (#ad1457)
  • Buttons: Social blue (#1976d2) with white text (#ffffff)
  • Inputs: White (#ffffff) background with dark text (#212121)
  • Typography: Modern system fonts optimized for social readability
  • Borders: Soft gray borders (#e0e0e0) with friendly social corners
  • Effects: Playful shadows and engaging hover animations

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* Social Media Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', system-ui;
  color: #212121;
  border: 2px solid #e0e0e0;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.agent-host-bubble .bubble-typing {
  background-color: #e3f2fd;
  border: 1px solid #bbdefb;
  border-radius: 16px;
}

.agent-host-bubble {
  color: #1565c0;
}

.bubble1 {
  background-color: #1565c0;
}
.bubble2 {
  background-color: #1565c0;
}
.bubble3 {
  background-color: #1565c0;
}

.agent-guest-bubble {
  background-color: #fce4ec;
  color: #ad1457;
  border-radius: 16px;
  border: 1px solid #f8bbd9;
}

/* Input styling */
.agent-input {
  background-color: #ffffff;
  color: #212121;
  border: 2px solid #e0e0e0;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.agent-input:focus-within {
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

/* Button styling */
.agent-button {
  background-color: #1976d2;
  color: #ffffff;
  border-radius: 24px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.25);
}

.agent-button:hover {
  background-color: #1565c0;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(25, 118, 210, 0.35);
}

Highlights

  • ✅ Clean social media background (#ffffff) with modern platform feel
  • ✅ Contemporary container styling with soft borders and social shadows
  • ✅ AI Bubble Colors - Light blue background (#e3f2fd) with blue text (#1565c0)
  • ✅ User Bubble Colors - Light pink background (#fce4ec) with pink text (#ad1457)
  • ✅ Typing Dots - Social blue (#1565c0) to match AI bubble text color
  • ✅ Modern input styling with rounded social borders and blue focus states
  • ✅ Social blue buttons (#1976d2) with engaging platform-style hover effects
  • ✅ Complete social media atmosphere perfect for community platforms
  • ✅ Contemporary design optimized for social engagement

👉 Try this theme: Copy the CSS above and test it in your Theme page playground!

10. Comic Book Theme

Comic Book Theme - Vibrant bold chatbot with comic-style bubbles and red buttons

Description: Playful, vibrant design with comic book-inspired elements, bold colors, and fun bubble shapes.
Key Elements: Bold primary colors, comic-style speech bubbles, strong contrasts, playful typography, vibrant accents.
Color Scheme:

  • Background: Comic yellow (#fff9c4)
  • AI Bubbles: Speech bubble white (#ffffff) background with bold black text (#000000)
  • User Bubbles: Thought bubble blue (#e6f3ff) background with bold black text (#000000)
  • Buttons: Superhero red (#dc2626) with white text (#ffffff)
  • Inputs: White (#ffffff) background with bold text (#000000)
  • Typography: Bold system fonts for comic book readability
  • Borders: Bold black borders (#000000) with sharp comic corners
  • Effects: Dramatic shadows and POW-style hover animations

Ready to use: Copy this CSS code and paste it into the Custom CSS section on your Theme page:

/* Comic Book Theme - Complete Working Solution */

.agent-embed-container {
  background-color: #fff9c4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui;
  color: #000000;
  border: 4px solid #000000;
  border-radius: 8px;
  box-shadow: 8px 8px 0px #000000;
}

.agent-host-bubble .bubble-typing {
  background-color: #ffffff;
  border: 3px solid #000000;
  border-radius: 20px;
}

.agent-host-bubble {
  color: #000000;
}

.bubble1 {
  background-color: #000000;
}
.bubble2 {
  background-color: #000000;
}
.bubble3 {
  background-color: #000000;
}

.agent-guest-bubble {
  background-color: #e6f3ff;
  color: #000000;
  border-radius: 20px;
  border: 3px solid #000000;
}

/* Input styling */
.agent-input {
  background-color: #ffffff;
  color: #000000;
  border: 3px solid #000000;
  border-radius: 8px;
  box-shadow: 4px 4px 0px #000000;
}

.agent-input:focus-within {
  border-color: #dc2626;
  box-shadow: 6px 6px 0px #dc2626;
}

/* Button styling */
.agent-button {
  background-color: #dc2626;
  color: #ffffff;
  border-radius: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0px #000000;
}

.agent-button:hover {
  background-color: #b91c1c;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000000;
}

Highlights

  • ✅ Comic book yellow background (#fff9c4) with bold graphic novel feel
  • ✅ Dramatic container styling with thick black borders and comic shadow effects
  • ✅ AI Bubble Colors - Speech bubble white background (#ffffff) with bold black text (#000000)
  • ✅ User Bubble Colors - Thought bubble blue background (#e6f3ff) with bold black text (#000000)
  • ✅ Typing Dots - Bold black (#000000) to match AI bubble text color
  • ✅ Comic-style input styling with bold borders and dramatic shadows
  • ✅ Superhero red buttons (#dc2626) with POW-style hover effects
  • ✅ Complete comic book atmosphere perfect for entertainment and creative sites
  • ✅ Bold design optimized for playful, engaging experiences

👉 Try this theme: Copy the CSS above and test it in your Theme page playground!

Tips and Best Practices for PD Theming

  • Start Simple: Begin with main classes like .agent-embed-container and .agent-host-bubble for broad changes, then fine-tune with states like :hover or :focus-within.
  • Mind Limitations: Always use .agent-host-bubble .bubble-typing for AI bubble backgrounds—skipping this is a common pitfall. Match typing dots (.bubble1 etc.) to text colors for cohesion.
  • Accessibility First: Avoid hiding scrollbars (e.g., .scrollable-container) if possible, and ensure high contrast in colors.
  • Experiment Safely: Use the playground on the Theme page or the live preview tool on the home page to test classes. Changes won’t take effect until you save them, so only save the custom CSS if you want it to go live.
  • Combine with Input Types: Fixed-Bottom suits professional sites; Floating adds a dynamic feel for creative ones.

Frequently Asked Questions

How do I apply custom CSS themes to my Predictable Dialogs chatbot?

You can apply custom CSS themes by targeting specific classes like .agent-embed-container, .agent-host-bubble, and .agent-guest-bubble in your chatbot's custom CSS settings.

What's the difference between Fixed-Bottom and Floating input themes?

Fixed-Bottom themes keep the input area at the bottom of the chat container, suitable for professional sites. Floating themes allow more dynamic positioning, perfect for creative websites.

Can I customize the typing indicator dots in my chatbot theme?

Yes, you can style the typing indicator dots using .bubble1, .bubble2, and .bubble3 classes. Match these colors to your AI bubble text color for visual cohesion.

Which CSS classes control the AI and user message bubbles?

AI message bubbles use .agent-host-bubble for text color and .agent-host-bubble .bubble-typing for background. User bubbles use .agent-guest-bubble for both background and text styling.

Are there any limitations when theming Predictable Dialogs chatbots?

Yes, avoid hiding scrollbars for accessibility, don't override animation timings, and always test responsiveness. Focus on overrideable elements like colors, fonts, and spacing.

How can I ensure my chatbot theme is accessible?

Maintain high contrast ratios between text and backgrounds, use readable font sizes, ensure focus states are visible, and avoid hiding essential UI elements like scrollbars.

What are the most important CSS classes for basic chatbot theming?

Start with .agent-embed-container for the main container, .agent-host-bubble .bubble-typing for AI bubble backgrounds, and .agent-guest-bubble for user message styling.

Can I use custom fonts in my chatbot themes?

Yes, you can specify custom font families in the .agent-embed-container class. Use web-safe fonts or ensure your custom fonts are loaded on your website first. If the font is on fonts.bunny.net, the embed code loads it automatically.

How do I style the input field and send button?

Use .agent-input for the text input field styling and .agent-button for the send button. Don't forget to include hover and focus states for better user experience.

What's the best way to test my custom chatbot theme before deploying?

You have two excellent testing options: 1) Use the playground on your chatbot's Theme page - paste your CSS, see live changes, and only click Save when satisfied. 2) Try the live preview tool on the PD home page for instant testing. Both environments let you experiment safely without affecting your live chatbot until you explicitly save the changes.

With these tools, you're ready to elevate your PD chatbot. If you create something cool, share it with us—we'd love to see your themes in action!

Happy theming!