Configuration Options

Customize VueBot to match your brand and requirements.

Basic Configuration

All configuration options are passed through the config object:

VueBotWidget({
  config: {
    // Required
    apiKey: 'vb_your_api_key_here',
    
    // Optional
    apiBaseUrl: 'https://vuebot-api.vuedapt.com',
    position: 'bottom-right',
    primaryColor: '#00a6f4',
    secondaryColor: '#00bcff',
    botName: 'AI Assistant',
    botAvatar: 'https://example.com/avatar.jpg',
    greetingMessage: 'Hello! How can I help you today?',
    darkTheme: false,
  }
})

Configuration Properties

apiKey (Required)

Your VueBot API key. Get one from vuebot-client.vuedapt.com

apiKey: 'vb_your_api_key_here'

apiBaseUrl (Optional)

The base URL for the VueBot API. Defaults to https://vuebot-api.vuedapt.com

apiBaseUrl: 'https://vuebot-api.vuedapt.com'

position (Optional)

Position of the chat button. Can be 'bottom-right' or 'bottom-left'. Defaults to 'bottom-right'.

position: 'bottom-right' // or 'bottom-left'

primaryColor (Optional)

Primary color for the widget. Accepts any valid CSS color value. Defaults to #00a6f4.

primaryColor: '#00a6f4'

secondaryColor (Optional)

Secondary color for the widget. Accepts any valid CSS color value. Defaults to #00bcff.

secondaryColor: '#00bcff'

botName (Optional)

The name of your chatbot. This appears in the chat header. Defaults to 'Chat Assistant'.

botName: 'AI Assistant'

botAvatar (Optional)

URL to the bot's avatar image. Defaults to a default avatar image.

botAvatar: 'https://example.com/avatar.jpg'

greetingMessage (Optional)

A greeting message that appears when the chat is first opened. If not provided, no greeting is shown.

greetingMessage: 'Hello! How can I help you today?'

darkTheme (Optional)

Enable dark theme mode for the widget. When set to true, the widget uses dark colors for backgrounds, text, and UI elements. Defaults to false. You can still customize colors using textColor and backgroundColor props.

darkTheme: true // Enable dark theme

Complete Example

window.VueBot.init({
  apiKey: 'vb_your_api_key_here',
  apiBaseUrl: 'https://vuebot-api.vuedapt.com',
  position: 'bottom-right',
  primaryColor: '#6366f1',
  secondaryColor: '#8b5cf6',
  botName: 'Support Bot',
  botAvatar: 'https://example.com/support-avatar.png',
  greetingMessage: 'Hi! I'm here to help. What can I do for you?',
});