Configuring the Design

This guide shows you how to customize the visual appearance of your ept AI chatbot using CSS overrides. After integrating the chatbot, you can style it to match your brand.

How Customization Works

The chatbot can only be customized through CSS by targeting the #eptai-chat-container element and its child elements. All styling is done via CSS overrides - there are no JavaScript configuration options for design.

CSS Variables

The chatbot uses modern CSS variables (Custom Properties) that you can override to customize its appearance. All variables are prefixed with --ept-custom- for easy customization.

Core Color Variables

:root {
  /* Primary Colors */
  --ept-custom-primary-color: #6366f1;           /* Modern indigo primary */
  --ept-custom-primary-hover: #5b5cf6;           /* Primary hover state */
  --ept-custom-secondary-color: #8b5cf6;         /* Modern purple secondary */
  --ept-custom-accent-color: #06b6d4;            /* Modern cyan accent */
  
  /* Status Colors */
  --ept-custom-success-color: #10b981;           /* Modern green success */
  --ept-custom-warning-color: #f59e0b;           /* Modern amber warning */
  --ept-custom-error-color: #ef4444;             /* Modern red error */
}

Background & Surface Colors

:root {
  --ept-custom-background-color: #ffffff;        /* Pure white background */
  --ept-custom-surface-color: #f8fafc;           /* Light surface */
  --ept-custom-surface-hover: #f1f5f9;           /* Surface hover state */
  --ept-custom-glass-bg: rgba(255, 255, 255, 0.85); /* Glassmorphism background */
}

Text Colors

:root {
  --ept-custom-text-color: #1e293b;              /* Dark slate text */
  --ept-custom-text-secondary: #64748b;          /* Secondary text */
  --ept-custom-text-muted: #94a3b8;              /* Muted text */
  --ept-custom-text-inverse: #ffffff;            /* White text for dark backgrounds */
}

Link Colors

:root {
  --ept-custom-link-color: #053f98;              /* Link/anchor color */
  --ept-custom-link-color-hover: #042d75;        /* Link hover state */
  --ept-custom-link-color-light: #007bff;        /* Light link color */
}

Code & Monospace Colors

:root {
  --ept-custom-code-bg: #f4f5f7;                 /* Code block background */
  --ept-custom-code-text: #333;                  /* Code block text */
  --ept-custom-code-inline-bg: #fafafa;          /* Inline code background */
  --ept-custom-code-border: #ddd;                /* Code block border */
  --ept-custom-code-accent-border: #f36d33;      /* Code block accent border */
}

Table Colors

:root {
  --ept-custom-table-cell-bg: #f4f5f7;           /* Table cell background */
  --ept-custom-table-cell-text: #333;            /* Table cell text */
  --ept-custom-table-header-bg: #f2f2f2;         /* Table header background */
}

Notification Colors

:root {
  --ept-custom-notification-success: #4BB543;            /* Success notification text */
  --ept-custom-notification-error: #ff4444;              /* Error notification text */
  --ept-custom-notification-warning-text: #856404;       /* Warning text color */
  --ept-custom-notification-warning-bg: #fff3cd;         /* Warning background */
  --ept-custom-notification-warning-border: #5a4a1a;     /* Warning border */
  --ept-custom-notification-warning-text-light: #ffeaa7; /* Light warning text */
}

Button & Badge Colors

:root {
  --ept-custom-badge-bg: #053f98;                /* Badge background */
  --ept-custom-badge-text: #ffffff;              /* Badge text */
  --ept-custom-button-disabled-bg: #ccc;         /* Disabled button background */
}

Loading & UI States

:root {
  --ept-custom-loading-text: #666;               /* Loading text color */
  --ept-custom-json-message-bg: #fff;            /* JSON message background */
  --ept-custom-json-message-border: #e1e5e9;     /* JSON message border */
  --ept-custom-warning-bg: #fff3cd;              /* Warning background */
  --ept-custom-warning-border: #ffeaa7;          /* Warning border */
}

Border & Radius

:root {
  --ept-custom-border-color: #e2e8f0;            /* Light border */
  --ept-custom-border-hover: #cbd5e1;            /* Border hover */
  --ept-custom-border-radius: 16px;              /* Modern rounded corners */
  --ept-custom-border-radius-sm: 8px;            /* Small radius */
  --ept-custom-border-radius-lg: 24px;           /* Large radius */
}

Typography

Font Family & Weights

:root {
  --ept-custom-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --ept-custom-font-weight-normal: 400;
  --ept-custom-font-weight-medium: 500;
  --ept-custom-font-weight-semibold: 600;
  --ept-custom-font-weight-bold: 700;
}

Heading Sizes

Control the size of all heading elements in chat messages:

:root {
  --ept-font-size-h1: 24px;                     /* Heading 1 */
  --ept-font-size-h2: 20px;                     /* Heading 2 */
  --ept-font-size-h3: 18px;                     /* Heading 3 */
  --ept-font-size-h4: 16px;                     /* Heading 4 */
  --ept-font-size-h5: 14px;                     /* Heading 5 */
  --ept-font-size-h6: 12px;                     /* Heading 6 */
}

Text Element Sizes

Control paragraph and list text:

:root {
  --ept-font-size-p: 12px;                      /* Paragraph text */
  --ept-font-size-li: 12px;                     /* List item text */
}

UI Component Sizes

Fine-tune different UI elements throughout the chatbot:

:root {
  --ept-font-size-base: 12px;                   /* Base size for general UI */
  --ept-font-size-xs: 8px;                      /* Very small (badges, labels) */
  --ept-font-size-sm: 10px;                     /* Small helper text */
  --ept-font-size-md: 14px;                     /* Medium text */
  --ept-font-size-lg: 16px;                     /* Large text */
  --ept-font-size-xl: 18px;                     /* Extra large text */
  --ept-font-size-2xl: 20px;                    /* Extra extra large */
  --ept-font-size-display: 48px;                /* Display/icon sizes */
}

Legacy Support

For backwards compatibility, --ept-custom-font-size maps to --ept-font-size-base:

:root {
  --ept-custom-font-size: var(--ept-font-size-base);  /* Legacy support */
}

Shadows & Effects

:root {
  --ept-custom-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ept-custom-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ept-custom-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ept-custom-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ept-custom-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --ept-custom-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

Spacing

:root {
  --ept-spacing-xs: 4px;
  --ept-spacing-sm: 8px;
  --ept-spacing-md: 16px;
  --ept-spacing-lg: 24px;
  --ept-spacing-xl: 32px;
  --ept-spacing-2xl: 48px;
}

Transitions

:root {
  --ept-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ept-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ept-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

Dark Mode Colors

Dark Mode Base Colors

:root {
  --ept-dark-background: #0f172a;
  --ept-dark-surface: #1e293b;
  --ept-dark-surface-hover: #334155;
  --ept-dark-glass-bg: rgba(15, 23, 42, 0.85);
  --ept-dark-text-primary: #f1f5f9;
  --ept-dark-text-secondary: #cbd5e1;
  --ept-dark-text-muted: #64748b;
  --ept-dark-border: #334155;
  --ept-dark-border-hover: #475569;
}

Dark Mode Specific UI Colors

:root {
  --ept-custom-dark-progress-fill: #4a9eff;         /* Dark mode progress fill */
  --ept-custom-dark-loading-text: #ccc;             /* Dark mode loading text */
  --ept-custom-dark-json-bg: #2a2a2a;               /* Dark mode JSON background */
  --ept-custom-dark-json-border: #444;              /* Dark mode JSON border */
  --ept-custom-dark-json-key: #7db3f0;              /* Dark mode JSON key color */
  --ept-custom-dark-json-value: #e0e0e0;            /* Dark mode JSON value color */
  --ept-custom-dark-warning-bg: #3d2914;            /* Dark mode warning background */
  --ept-custom-dark-scrollbar-thumb: #333;          /* Dark mode scrollbar thumb */
  --ept-custom-dark-scrollbar-track: #111;          /* Dark mode scrollbar track */
}

Quick Customization Examples

Brand Colors

Apply your brand colors to the chatbot:

:root {
  /* Change primary brand color (buttons, links, accents) */
  --ept-custom-primary-color: #your-brand-color;
  --ept-custom-primary-hover: #your-brand-hover-color;
  
  /* Change secondary/accent colors */
  --ept-custom-secondary-color: #your-secondary-color;
  --ept-custom-accent-color: #your-accent-color;
}

Typography

Customize fonts and text styling:

:root {
  /* Change font family */
  --ept-custom-font-family: 'Your Font', 'Helvetica Neue', sans-serif;
  
  /* Increase overall text size */
  --ept-font-size-base: 14px;           /* UI elements (default: 12px) */
  --ept-font-size-p: 14px;              /* Message paragraphs (default: 12px) */
  --ept-font-size-h1: 28px;             /* Headings (default: 24px) */
  
  /* Make specific UI elements larger */
  --ept-font-size-lg: 18px;             /* Large text (default: 16px) */
  --ept-font-size-md: 16px;             /* Medium text (default: 14px) */
}

Example: Create a more readable chatbot for accessibility:

:root {
  --ept-font-size-base: 16px;           /* Larger base size */
  --ept-font-size-p: 16px;              /* Larger paragraphs */
  --ept-font-size-h1: 32px;             /* Larger headings */
  --ept-font-size-h2: 28px;
  --ept-font-size-h3: 24px;
  --ept-font-size-sm: 14px;             /* Larger small text */
}

Border Radius & Corners

Adjust roundedness for different design styles:

:root {
  /* More rounded (default is modern) */
  --ept-custom-border-radius: 20px;
  --ept-custom-border-radius-lg: 32px;
  
  /* Less rounded (more conservative) */
  --ept-custom-border-radius: 8px;
  --ept-custom-border-radius-lg: 12px;
  
  /* Sharp corners (no rounding) */
  --ept-custom-border-radius: 0px;
  --ept-custom-border-radius-lg: 0px;
}

Advanced CSS Customization

High Specificity Required

The widget uses high specificity selectors (e.g., html body div#eptai-chat-container) to prevent conflicts with your site's CSS. To override styles, use the same or higher specificity in your custom CSS.

Important: Load your custom CSS after the chatbot widget integration for overrides to work.

Example: Customize Position and Size

/* Use high specificity to override widget styles */
html body div#eptai-chat-container {
  bottom: 30px;
  right: 30px;
  max-width: 450px;
}

Common Customizations

Reposition the widget:

html body div#eptai-chat-container {
  bottom: 20px;
  left: 20px;  /* Move to bottom-left */
  right: auto;
}

Adjust chat height:

html body div#eptai-chat-container div#eptai-chat-box {
  height: 600px;
}

Style input area:

html body div#eptai-chat-container textarea#eptai-chat-input {
  background: rgba(240, 240, 255, 0.5);
}

tip

You can override CSS for any element in the chatbot. Use your browser's developer tools to inspect elements and find their selectors, then apply your custom styles with the same or higher specificity.

Dark Mode Support

The chatbot includes built-in dark mode support. Customize dark mode colors using the --ept-dark-* variables:

:root {
  /* Dark mode backgrounds */
  --ept-dark-background: #0f172a;
  --ept-dark-surface: #1e293b;
  --ept-dark-surface-hover: #334155;
  
  /* Dark mode text */
  --ept-dark-text-primary: #f1f5f9;
  --ept-dark-text-secondary: #cbd5e1;
  --ept-dark-text-muted: #64748b;
  
  /* Dark mode borders */
  --ept-dark-border: #334155;
  --ept-dark-border-hover: #475569;
}

The chatbot automatically applies these variables when the .dark-mode class is present on the container.

Implementation

CSS Load Order

Always load your custom CSS AFTER the chatbot widget to ensure your styles override the default widget styles.

Inline Styles

<!-- 1. Load chatbot widget FIRST -->
<script src="https://assets.ept.ai/chatbot/loader.js" data-track="stable" async></script>

<!-- 2. Add custom styles AFTER -->
<style>
  :root {
    /* Brand colors */
    --ept-custom-primary-color: #0066cc;
    --ept-custom-primary-hover: #0052a3;
    
    /* Typography */
    --ept-custom-font-family: 'Inter', -apple-system, sans-serif;
    --ept-font-size-base: 14px;
    --ept-font-size-p: 14px;
    
    /* Spacing & Layout */
    --ept-custom-border-radius: 12px;
  }
  
  /* Position adjustment (requires high specificity) */
  html body div#eptai-chat-container {
    bottom: 20px;
    right: 20px;
  }
</style>

External CSS File

For better organization, create a separate CSS file and load it after the widget:

<!-- 1. Load chatbot widget FIRST -->
<script src="https://assets.ept.ai/chatbot/loader.js" data-track="stable" async></script>

<!-- 2. Link to your custom theme AFTER -->
<link rel="stylesheet" href="/css/chatbot-theme.css">

chatbot-theme.css:

:root {
  /* Brand colors */
  --ept-custom-primary-color: #0066cc;
  --ept-custom-primary-hover: #0052a3;
  --ept-custom-secondary-color: #6a0dad;
  
  /* Typography */
  --ept-custom-font-family: 'Inter', sans-serif;
  --ept-font-size-base: 14px;
  --ept-font-size-p: 14px;
  --ept-font-size-h1: 28px;
  --ept-font-size-h2: 24px;
  
  /* Layout */
  --ept-custom-border-radius: 12px;
}

/* Advanced customization with high specificity */
html body div#eptai-chat-container {
  bottom: 20px;
  right: 20px;
  max-width: 400px;
}

Next Steps

Context-Aware Chat - Make your chatbot intelligent about page content
Continuous Improvement - Monitor and optimize performance
Integrations - Add advanced functionality

How Customization Works​

CSS Variables​

Core Color Variables​

Background & Surface Colors​

Text Colors​

Link Colors​

Code & Monospace Colors​

Table Colors​

Notification Colors​

Button & Badge Colors​

Loading & UI States​

Border & Radius​

Typography​

Font Family & Weights​

Heading Sizes​

Text Element Sizes​

UI Component Sizes​

Legacy Support​

Shadows & Effects​

Spacing​

Transitions​

Dark Mode Colors​

Dark Mode Base Colors​

Dark Mode Specific UI Colors​

Quick Customization Examples​

Brand Colors​

Typography​

Border Radius & Corners​

Advanced CSS Customization​

Example: Customize Position and Size​

Common Customizations​

Dark Mode Support​

Implementation​

Inline Styles​

External CSS File​

Next Steps​

How Customization Works

CSS Variables

Core Color Variables

Background & Surface Colors

Text Colors

Link Colors

Code & Monospace Colors

Table Colors

Notification Colors

Button & Badge Colors

Loading & UI States

Border & Radius

Typography

Font Family & Weights

Heading Sizes

Text Element Sizes

UI Component Sizes

Legacy Support

Shadows & Effects

Spacing

Transitions

Dark Mode Colors

Dark Mode Base Colors

Dark Mode Specific UI Colors

Quick Customization Examples

Brand Colors

Typography

Border Radius & Corners

Advanced CSS Customization

Example: Customize Position and Size

Common Customizations

Dark Mode Support

Implementation

Inline Styles

External CSS File

Next Steps