Widget Configuration

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.

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

Access Widget Configuration

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

Configure Position & Behavior

Select widget position, display mode, and interaction settings

Generate Integration Code

Choose your deployment method and copy the generated code

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 Positioning

Display Modes

Advanced Configuration

Custom Styling & CSS

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.

Responsive Behavior

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;
  }
}

Performance 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

Widget Not Loading

Verify Configuration

Check that VG_CONFIG contains valid agent ID and region settings

Check Console Errors

Open browser developer tools and look for JavaScript errors

Test Network Connectivity

Ensure CDN resources are accessible and not blocked by firewall

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);

Styling Issues

Mobile Issues

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