​
Web Widget Settings

Learn how to configure your AI agent’s settings to optimize its performance and user experience.

​
Core Settings

Enable/Disable Agent

Toggle your agent’s operational status. When disabled, the agent will immediately stop working and won’t accept new queries.

​
Basic Configuration

​
Advanced Settings

​
Interaction Controls

​
Message Delay (MS)
number
default:"1000"

Default delay between every message (Milliseconds)

​
User Input Delay (MS)
number
default:"6000"

Time to wait before submitting final query to verify the user has finished typing

​
Usage Limits

Monthly Interactions Limit

Set maximum number of interactions allowed per month (0 = unlimited)

Interactions Limit per User

Maximum interactions allowed per user or conversation session (0 = unlimited)

Monthly AI Tokens Limit

Set total monthly token limit for input and output (0 = unlimited)

Credits Limit

Set maximum credits consumption limit, monthly and annual periods (0 = unlimited)

Setting limit for both periods will apply to both.

​
Technical Configuration

​
Additional Features

Translation Options

  • Enable AI Translation - Requires OpenAI API key in agency config
  • Translate User Responses - Convert user messages to selected language

Input Methods

  • Enable Speech-to-Text - Add voice input capability (1 credit per STT request)
  • Enable Quick Upload Button - Allow file attachments with URL triggers

​
Custom Styling

​
Steps for locating and overriding CSS Properties.

  1. Right-click the element and choose Inspect.
  2. Identify the CSS Class in DevTools.
  3. Copy the class you are trying to change.
  4. Go to the dashboard.
  5. Paste the code into your Custom CSS section of your agent.
  6. Override the CSS.

Use !important sparingly—only if you need to override higher-specificity rules.

​
CSS Customization

/* Add custom CSS to modify your agent's appearance across all environments */
.scroll-container {
  overflow: hidden !important;
}

/* Change the size of the window of your chatbot */
#vg-mother-container {
  width: 400px !important; 
  height: 600px !important; 
}

/* Target the inner container if needed */
#vg-inner-container {
  width: 100% !important; 
  height: 100% !important;
}

/* Position the agent bubble on the page (Adjust values to reposition as needed.)*/
.vg-root {
  bottom: 20px !important;
  right: 20px !important;
}

/* Adjust the size of the overlay */
.vg-overlay-root-container {
  width: 450px !important; 
  height: 650px !important; 
}

/* Add extra padding to widget controls */
.vg-widget-controls-container {
  padding-bottom: 200px !important
}

/* Uncomment for automatic aspect ratio on images */
/* .vg-card-image {
    aspect-ratio: auto !important;
} */

/* Hide proactive popup messages */
.vg-proactive-message--container {
  display: none !important;
}

.vg-proactive-message {
  display: none !important;
}

/* Customize the action button style. */
.vg-action-btn {
  background-color: #0078d7 !important;
  color: white !important;
  font-size: 16px !important;
  font-family: 'Roboto', sans-serif !important;
}

/* Display the “open vapi” footer button. */
.vg-footer-open-vapi {
  display: block !important;
}

/* Hide the “open vapi” footer button. */
.vg-footer-open-vapi {
  display: none !important;
}

/*  Turn off the ratings at the end */
.vg-chat-end {
  display: none !important;
}

Custom CSS allows you to match your agent’s appearance to your brand and website design.

​
Best Practices

  • Start with default settings and adjust based on user feedback - Monitor interaction limits to ensure optimal service availability - Test any custom CSS changes across different devices and browsers - Regularly review and update your AI introduction message

Always test significant setting changes in a development environment before applying them to your live agent.