Customization | VueBot

Color Customization

Customize the widget colors to match your brand:

window.VueBot.init({
  apiKey: 'vb_your_api_key_here',
  primaryColor: '#6366f1', // Indigo
  secondaryColor: '#8b5cf6', // Purple
});

Position Customization

Choose where the chat button appears:

window.VueBot.init({
  apiKey: 'vb_your_api_key_here',
  position: 'bottom-left', // or 'bottom-right'
});

Branding Customization

Customize the bot's name and avatar:

window.VueBot.init({
  apiKey: 'vb_your_api_key_here',
  botName: 'Your Company Support',
  botAvatar: 'https://yourdomain.com/logo.png',
  greetingMessage: 'Welcome! How can we help you today?',
});

Advanced Styling

For more advanced styling, you can override CSS variables or add custom CSS:

/* Custom CSS */
.vuebot-chat-button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vuebot-chat-window {
  border-radius: 16px;
}