Styling | VueBot

Color Customization

The easiest way to customize VueBot is through the configuration options:

window.VueBot.init({
  apiKey: 'vb_your_api_key_here',
  primaryColor: '#6366f1', // Main brand color
  secondaryColor: '#8b5cf6', // Accent color
});

Custom CSS

For more advanced styling, you can override VueBot's CSS classes:

/* Custom styles */
.vuebot-chat-button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}

.vuebot-chat-window {
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.vuebot-message-user {
  background-color: #6366f1;
  color: white;
}

.vuebot-message-assistant {
  background-color: #f3f4f6;
  color: #111827;
}

CSS Variables

VueBot uses CSS variables that you can override:

:root {
  --vuebot-primary: #00a6f4;
  --vuebot-secondary: #00bcff;
  --vuebot-bg: #ffffff;
  --vuebot-text: #111827;
}