Theme Customization

The Theme tab allows you to personalize the visual appearance of your bot, ensuring it aligns with your brand or desired aesthetic. Customize fonts, colors, and layouts to create an engaging user experience.

Global Settings

The Global section enables you to configure overarching visual elements, including bot branding, font, and background.

Progress Bar

The Progress Bar visually indicates a user’s progress through the bot, enhancing the user experience by providing a sense of advancement and completion.

To enable the progress bar:

1. Navigate to the Theme tab in your bot’s dashboard.
2. Locate the Progress Bar option in the Global section.
3. Toggle the Enable Progress Bar switch to activate it.

Position When Embedded

Adjust how the progress bar behaves in an embedded bot:

• fixed: Pins the progress bar to the top of the browser window, remaining visible even when the chat container scrolls.
• absolute: Positions the progress bar at the top of the embedded chat container, scrolling with the chat.

Chat Customization

The Chat section lets you personalize components such as avatars, text bubbles, and input fields.

Changing the Bot Avatar

Click the bot avatar to upload a new image:

Custom CSS

For advanced styling, add Custom CSS to target specific elements of your bot. To style an element, right-click it on the Theme page, inspect it, and note its class or ID:

Example: Styling Buttons

To create rounded buttons with a gradient background, add the following CSS:

.bot-button {
  border-radius: 40px;
  background-image: linear-gradient(to right, #e052a0, #f15c41);
  border: none;
}

Resulting appearance:

Customizing a Single Button

To style a specific button, use its unique data-itemid attribute. Inspect the button to find its ID:

Example CSS to change a single button’s color:

[data-itemid="cl3iunm4p000f2e6gfr8cznnn"] {
  background-color: gray;
  border-color: gray;
}

Advanced CSS Customizations

Enhance your bot’s appearance with these advanced CSS examples:

Custom Chat Container

.bot-chat-container {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}
 
/* Dark mode support */
.dark .bot-chat-container {
  background: rgba(26, 32, 44, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Animated Message Bubbles

.bot-message-bubble {
  animation: slideInUp 0.3s ease-out;
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
 
.user-message-bubble {
  animation: slideInUp 0.3s ease-out;
  border-radius: 18px 18px 4px 18px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
 
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Custom Input Field Styling

.bot-input-field {
  border-radius: 25px;
  border: 2px solid #e2e8f0;
  padding: 12px 20px;
  transition: all 0.3s ease;
}
 
.bot-input-field:focus {
  border-color: #4450A6;
  box-shadow: 0 0 0 3px rgba(68, 80, 166, 0.1);
  outline: none;
}

Progress Bar Enhancements

.bot-progress-bar {
  background: linear-gradient(135deg, #4450A6, #45ACDF);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
 
.bot-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}
 
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}