Skip to main content
Transform your agent into a deployable widget that seamlessly integrates with any website. The Widget Configuration hub provides comprehensive tools for positioning, customizing, and deploying your conversational AI across different platforms and environments.

​
Why Configure Your Widget?

Seamless Integration

Embed your widget naturally into any website without disrupting user experience or design flow

Flexible Deployment

Choose from multiple deployment methods - script embed, iframe, or full-width integration

Advanced Positioning

Control exactly where and how your widget appears on different devices and screen sizes

Enterprise Ready

Production-ready code with CDN delivery, security, and performance optimization

​
Quick Deployment Guide

1

Access Widget Configuration

Navigate to your agent dashboard and click Widget in the left sidebar
2

Configure Position & Behavior

Select widget position, display mode, and interaction settings
3

Generate Integration Code

Choose your deployment method and copy the generated code
4

Deploy to Website

Paste the code into your website and test the integration
Start with the Script Embed method for most websites - it’s the most flexible and easy to implement!

​
Widget Configuration Options

  • Position & Layout
  • Deployment Methods
  • Security & API

Bottom Right

Best For:
  • Most websites and layouts
  • Non-intrusive user experience
  • Traditional chat positioning
  • Mobile-friendly design
Behavior:
  • Appears as floating chat bubble
  • Expands when clicked
  • Stays above page content
  • Auto-adjusts for mobile

Bottom Left

Best For:
  • Left-reading languages (RTL)
  • Unique brand positioning
  • Avoiding conflicts with other widgets
  • Alternative placement strategy
Behavior:
  • Mirror of bottom-right positioning
  • Same floating bubble design
  • Consistent across devices
  • Respects content boundaries

Full Width

Best For:
  • Dedicated chat pages
  • Customer support portals
  • Embedded in page layouts
  • Maximum conversation space
Behavior:
  • Renders directly in container
  • Custom width/height control
  • No floating bubble overlay
  • Integrated page element
Mobile Optimization: All positions automatically adapt to mobile screens with optimized touch targets and responsive layouts.
  • Standard Mode
  • Auto-start Mode

Standard Widget Display

  • 🎯 Floating bubble appears in chosen corner
  • 📱 Click to expand reveals full chat interface
  • 🔄 Persistent state maintains conversation across page navigation
  • ⚡ Fast loading with optimized bundle sizes
  • 🎨 Branded appearance using your custom theme

​
Advanced Configuration

VG_CONFIG = {
  // Custom CSS files for advanced styling
  stylesheets: [
    "https://cdn.example.com/custom-widget-styles.css",
    "https://fonts.googleapis.com/css2?family=Your+Font"
  ]
}

/* Example custom widget CSS */
.vg-widget-container {
  /* Custom border radius */
  border-radius: 20px !important;
  
  /* Custom shadow */
  box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
  
  /* Custom animation */
  transition: transform 0.3s ease !important;
}

.vg-widget-container:hover {
  transform: scale(1.05) !important;
}

/* Custom message bubbles */
.vg-message-user {
  background: linear-gradient(45deg, #your-color1, #your-color2) !important;
}
CSS Priority: Use !important declarations to ensure your custom styles override default widget styling.

Mobile Optimization

  • Automatic touch target sizing
  • Gesture-friendly interactions
  • Optimized for thumb navigation
  • Reduced bandwidth usage
  • Battery-efficient animations

Desktop Enhancement

  • Hover state interactions
  • Keyboard navigation support
  • Multi-monitor awareness
  • High-DPI display support
  • Advanced animation effects
/* Responsive widget sizing */
@media (max-width: 768px) {
  .vg-widget-container {
    width: 90vw !important;
    max-width: 400px !important;
  }
}

@media (min-width: 1200px) {
  .vg-widget-container {
    width: 450px !important;
    height: 650px !important;
  }
}
  • Loading Strategy
  • Bundle Optimization

Deferred Loading (Default)

<script defer>
// Widget loads after page content
VG_SCRIPT.defer = true;
Benefits: Doesn’t block page rendering Use when: Standard website integration

Immediate Loading

<script>
// Widget loads immediately
// Remove 'defer' attribute
Benefits: Faster widget availability Use when: Widget is primary page function

​
Deployment Best Practices

Testing Strategy

Pre-deployment Checklist:
  • Test on multiple browsers
  • Verify mobile responsiveness
  • Check loading performance
  • Validate user data flow
  • Test accessibility features
Staging Environment:
  • Use development build initially
  • Test with real user scenarios
  • Monitor error logs
  • Gather user feedback

Production Deployment

Go-live Preparation:
  • Switch to live build version
  • Configure CDN caching
  • Set up monitoring alerts
  • Prepare rollback plan
  • Document configuration
Post-deployment:
  • Monitor performance metrics
  • Track user engagement
  • Collect feedback
  • Plan iterative improvements

Maintenance

Regular Tasks:
  • Update widget configuration
  • Review performance metrics
  • Test new features
  • Optimize loading times
  • Update custom styling
Version Management:
  • Track widget version changes
  • Test updates in staging
  • Plan feature rollouts
  • Maintain documentation

Analytics Integration

Tracking Setup:
  • Monitor widget interactions
  • Track conversation metrics
  • Measure user satisfaction
  • Analyze performance data
  • A/B test configurations
KPIs to Monitor:
  • Widget engagement rate
  • Conversation completion
  • User satisfaction scores
  • Technical performance

​
Troubleshooting Common Issues

1

Verify Configuration

Check that VG_CONFIG contains valid agent ID and region settings
2

Check Console Errors

Open browser developer tools and look for JavaScript errors
3

Test Network Connectivity

Ensure CDN resources are accessible and not blocked by firewall
4

Validate Script Placement

Confirm script is placed before closing </body> tag
// Debug configuration
console.log('VG_CONFIG:', window.VG_CONFIG);

// Check if script loaded
console.log('VG Script loaded:', !!window.VG_SCRIPT);

CSS Not Applied

  • Check CSS file accessibility
  • Verify selector specificity
  • Use !important for overrides
  • Test without browser cache

Layout Conflicts

  • Check z-index values
  • Verify container positioning
  • Test responsive breakpoints
  • Review CSS conflicts
Common Fix: Clear browser cache and test in incognito mode to see actual styling without cached resources.
  • Touch Problems
  • Performance Issues
  • Ensure adequate touch target sizes (minimum 44px)
  • Test gesture interactions
  • Verify scroll behavior
  • Check viewport meta tag
Pro Tip: Use browser developer tools’ device emulation to test your widget across different screen sizes and device types before deploying to production.

​
What’s Next?

Advanced Analytics

Track widget performance and user engagement with detailed analytics

API Integration

Integrate your widget with backend systems using our REST API

Voice Features

Add voice capabilities to enhance your widget’s conversational experience

Deployment Guide

Detailed deployment guides for different platforms and environments