Skip to main content

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​

Override these CSS variables to quickly change colors and fonts:

:root {
  --ept-primary-bg-color: #f2f2f2;
  --ept-secondary-bg-color: #96D4E5;
  --ept-tertiary-bg-color: #d1d1d1;
  --ept-primary-font-family: 'Montserrat', sans-serif;
  --ept-primary-text-color: #333;
  --ept-secondary-text-color: white;
  --ept-button-bg-color: #053F98;
  --ept-button-hover-bg-color: #45a049;
  --ept-border-color: #ccc;
}

Basic Customization Examples​

Colors and Branding​

:root {
  --ept-button-bg-color: #your-brand-color;
  --ept-primary-font-family: 'Your Font', sans-serif;
  --ept-border-color: #your-border-color;
}

Positioning​

/* Bottom right (default) */
#eptai-chat-container {
  bottom: 20px;
  right: 20px;
}

/* Bottom left */
#eptai-chat-container {
  bottom: 20px;
  left: 20px;
  right: auto;
}

/* Custom position */
#eptai-chat-container {
  top: 100px;
  right: 50px;
  bottom: auto;
}

Size and Appearance​

/* Chat container */
#eptai-chat-container {
  min-width: 350px;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Chat box height */
#eptai-chat-box {
  height: 500px;
}

/* Input styling */
#eptai-chat-input {
  background: rgba(your-color, 0.1);
  border-radius: 20px;
}

Key Selectors​

Target these elements for specific customization:

  • #eptai-chat-container - Main widget container
  • #eptai-chat-box - Chat messages area
  • #eptai-chat-input - Text input field
  • #eptai-send-btn - Send button
  • #eptai-close-btn - Close/minimize button
  • .eptai-user-message - User message bubbles
  • .eptai-bot-message - Bot message bubbles
  • .eptai-default-question - Suggestion chips

Dark Mode​

The chatbot includes dark mode support. You can customize dark mode colors:

#eptai-chat-container.dark-mode {
  background-color: #1E1E1E;
  border-color: #333;
  color: #E0E0E0;
}

.dark-mode #eptai-chat-box {
  background-color: #2E2E2E;
  color: #E0E0E0;
}

Implementation​

Add your custom CSS after loading the chatbot:

<!-- Load chatbot -->
<script src="https://assets.ept.ai/chat/v1/ept_chat_loader_bundle.js"></script>

<!-- Add custom styles -->
<style>
  :root {
    --ept-button-bg-color: #your-brand-color;
  }
  
  #eptai-chat-container {
    bottom: 30px;
    right: 30px;
  }
</style>

Or link to an external CSS file:

<link rel="stylesheet" href="/css/chatbot-theme.css">

Next Steps​