Integration Overview
Ravvio provides multiple integration methods to deploy your AI chatbot on any website, from simple script tags to advanced iframe embedding, ensuring compatibility with all major platforms and content management systems.
Available Integration Methods
JavaScript Widget
RecommendedDynamic, feature-rich chatbot with real-time configuration updates
HTML/CSS Bubble
LightweightPure HTML/CSS solution with minimal resource requirements
Direct Embed URL
SimpleDirect iframe integration for quick deployment
JavaScript Widget (Recommended)
Key Features
Dynamic Configuration
Dynamic Configuration
Real-Time Updates:
- Configuration changes reflect immediately without code updates
- Synchronized with dashboard settings and customizations
- Automatic feature updates and platform improvements
- Live customization without website redeployment
- No need to update website code for configuration changes
- Instant access to new features and improvements
- Centralized management through Ravvio dashboard
- Reduced maintenance overhead and technical complexity
Advanced Features
Advanced Features
Enhanced Capabilities:
- Welcome popups with customizable messages and branding
- Suggested questions for improved user engagement
- Lead capture forms with intelligent email collection
- Demo booking integration with Calendly and other platforms
- Mobile-responsive design with touch optimization
- Smooth animations and professional appearance
- Context-aware messaging and personalization
- Accessibility compliance and screen reader support
- Cross-browser compatibility and performance optimization
Easy Installation
Easy Installation
Simple Implementation:
- Single script tag implementation process
- Automatic loading and initialization handling
- No additional dependencies or libraries required
- Compatible with all modern browsers and devices
- Copy integration code from Ravvio dashboard
- Paste code before closing body tag on website
- Widget automatically loads and becomes functional
- No additional configuration or setup required
Implementation Process
1
Generate Integration Code
Code Generation:
- Access integration settings in Ravvio dashboard
- Configure widget appearance and behavior preferences
- Generate custom integration code with your agent ID
- Copy complete JavaScript implementation code
2
Install on Website
Code Placement:
- Locate closing
</body>tag in website HTML - Paste Ravvio script immediately before closing body tag
- Save changes and deploy to live website
- Verify widget appears and functions correctly
3
Test and Optimize
Validation:
- Test widget functionality across different browsers
- Verify mobile responsiveness and touch interactions
- Confirm lead capture and demo booking integration
- Monitor performance and user engagement metrics
HTML/CSS Bubble
Lightweight Solution
Minimal Dependencies
Pure Implementation:
- No JavaScript framework dependencies
- Minimal resource requirements and fast loading
- Pure HTML/CSS with minimal JavaScript
- Optimal for performance-critical websites
Fast Loading
Performance Benefits:
- Minimal resource consumption and bandwidth usage
- Fast initialization and immediate availability
- Reduced impact on page loading speed
- Optimal for mobile and slow network connections
Browser Compatibility
Universal Compatibility
Universal Compatibility
Wide Browser Support:
- Works on all modern browsers including Chrome, Firefox, Safari, Edge
- Compatible with older browser versions for legacy support
- Consistent appearance and functionality across platforms
- Graceful degradation for unsupported features
- Desktop, tablet, and mobile device compatibility
- iOS and Android operating system support
- Responsive design adaptation for different screen sizes
- Touch interface optimization for mobile devices
Customization Options
Customization Options
Styling Flexibility:
- Easy CSS customization for brand alignment
- Customizable colors, fonts, and visual elements
- Flexible positioning and sizing options
- Integration with existing website design systems
- Simple HTML structure for easy modification
- CSS-based styling for designer-friendly customization
- Minimal JavaScript for enhanced functionality
- Clean code structure for maintainability
Direct Embed URL
iFrame Integration
Simple Integration
Straightforward Implementation:
- Direct website embedding using iframe element
- No JavaScript configuration or setup required
- Immediate functionality with minimal code
- Perfect for quick testing and prototyping
Sandboxed Security
Security Benefits:
- Isolated execution environment for enhanced security
- Protection from potential JavaScript conflicts
- Secure data handling and privacy protection
- Minimal impact on parent website security
URL Parameters and Customization
Customization Through Query Strings
Customization Through Query Strings
Parameter Options:
- Primary color customization through URL parameters
- Agent ID specification for correct chatbot connection
- Position and sizing configuration through parameters
- Welcome message and behavior customization options
Responsive Design
Responsive Design
Flexible Sizing:
- Responsive iframe dimensions for different screen sizes
- Automatic scaling and layout adaptation
- Mobile-optimized display and touch interactions
- Desktop and tablet compatibility with optimal sizing
Method Comparison and Selection
Feature Comparison
| Feature | JavaScript Widget | HTML/CSS Bubble | Direct Embed |
|---|---|---|---|
| Setup Complexity | Simple | Moderate | Very Simple |
| Customization | Extensive | High | Limited |
| Performance | Optimized | Lightweight | Fast Loading |
| Features | Full Suite | Basic | Standard |
| Updates | Automatic | Manual | Automatic |
| Browser Support | Modern | Universal | All Browsers |
Selection Criteria
Choose JavaScript Widget For:
Optimal Scenarios:
- Full feature functionality requirements
- Dynamic configuration and real-time updates
- Advanced lead capture and demo booking
- Professional appearance and user experience
- Regular feature updates and improvements
Choose Alternatives For:
Specific Use Cases:
- HTML/CSS Bubble: Performance-critical websites, custom styling needs
- Direct Embed: Quick testing, simple integration, legacy browser support
- JavaScript Widget: Most comprehensive solution for full functionality
Platform-Specific Integration
Content Management Systems
WordPress Integration
WordPress Integration
Implementation Methods:
- Add code directly to theme’s footer.php file
- Use WordPress plugin for easier management and updates
- Widget placement through WordPress admin dashboard
- Custom post type and page-specific integration
- Test compatibility with active plugins and themes
- Ensure proper caching plugin integration
- Verify mobile responsiveness across different themes
- Monitor performance impact on page loading speeds
E-commerce Platforms
E-commerce Platforms
Shopify Integration:
- Add code to theme.liquid file before closing body tag
- Product page specific implementation for targeted support
- Integration with Shopify checkout and customer data
- Multi-language store support and localization
- WordPress-based implementation with e-commerce optimization
- Product inquiry and support integration
- Cart abandonment recovery and customer support
- Order status inquiry and shipping information
Website Builders
Website Builders
Wix Integration:
- Use HTML embed component in site footer
- Drag-and-drop widget placement and customization
- Mobile editor optimization and responsive design
- Integration with Wix contact forms and CRM
- Add code to site-wide footer code injection
- Template-specific implementation and customization
- Mobile optimization and responsive design testing
- Integration with Squarespace commerce and forms
Integration Best Practices
Performance Optimization
1
Loading Speed Optimization
Performance Strategies:
- Implement asynchronous loading to prevent page blocking
- Use CDN delivery for optimal resource loading speed
- Minimize HTTP requests and optimize resource bundling
- Implement proper caching strategies and browser optimization
2
Resource Management
Efficiency Measures:
- Monitor and optimize JavaScript execution time
- Minimize CSS and image resource usage
- Implement lazy loading for non-critical resources
- Optimize for mobile networks and slower connections
3
User Experience Optimization
UX Best Practices:
- Ensure widget doesn’t interfere with website functionality
- Provide clear visual feedback for user interactions
- Optimize placement for maximum engagement without obstruction
- Test user flows and optimize for conversion goals
Security Considerations
Data Protection
Security Measures:
- HTTPS implementation for secure data transmission
- Data encryption in transit and at rest
- Compliance with privacy regulations (GDPR, CCPA)
- Secure API authentication and access control
Website Security
Integration Security:
- Content Security Policy (CSP) compatibility
- Cross-site scripting (XSS) protection
- Secure iframe implementation and sandboxing
- Regular security updates and vulnerability patching
Troubleshooting Integration Issues
Common Problems and Solutions
1
Widget Not Loading
Diagnostic Steps:
- Verify correct script placement before closing body tag
- Check browser developer console for JavaScript errors
- Confirm agent ID is correct in integration code
- Test with different browsers and disable browser extensions
2
Functionality Issues
Resolution Process:
- Validate internet connectivity and API accessibility
- Check for JavaScript conflicts with other website scripts
- Verify configuration settings and parameters
- Test in isolation to identify conflicting elements
3
Performance Problems
Optimization Actions:
- Monitor impact on page loading speed and optimize
- Check for resource conflicts and loading delays
- Optimize integration method for better performance
- Consider alternative integration approach if needed
Integration Method Selection: Choose the integration method that best fits your technical requirements, performance needs, and maintenance capabilities.
Testing Strategy: Always test your chosen integration method thoroughly across different browsers and devices before deploying to your live website.
Script Placement: Incorrect script placement is the most common integration issue. Always place integration code before the closing body tag, never in the head section.