Skip to main content

​
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

  • Scroll Animation - Enable/disable smooth scrolling during response generation
  • Record Transcripts - Save interactions with the widget for future reference
  • Enable Sound Effects - Play notification sounds when new messages arrive
  • Forget Chat History - Prevent chat history from persisting on user devices
  • Autostart With Popup - Automatically display the chat widget on page load - Proactive Message - Configure a welcome message that appears when the widget loads
Simple 1-line proactive message can be used instead of autostart widget
  • Chat End Message - Customize the message shown when a chat session ends
  • AI Introduction Message - Set the initial message users see when starting a chat
    According to Meta’s requirements, you MUST declare that users will be interacting with an AI

​
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

  • Prefer HTTP instead of websockets - Advanced setting for connection method
    Only modify if you understand the implications for UI rendering
  • Does Know Threshold - Used for channels like Discord and Slack to determine AI response behavior
  • Enable Handoff Popup - Toggle the top handoff popup display
  • Fixed Handoff Popup - Requires organization assignment
  • Always Show Handoff - Display handoff popup regardless of agent availability

​
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.
⌘I