​
Integration Preview Overview

Integration Preview Overview The integration preview feature allows you to test and validate your chatbot configuration before deploying it to your live website, ensuring optimal performance and user experience.

​
Preview Capabilities

Live Preview

Real-time demonstration of your chatbot widget appearance and behavior

Interactive Testing

Full functionality testing in a controlled preview environment

Multi-Device Views

Preview across desktop, tablet, and mobile device layouts

Performance Validation

Loading speed and functionality verification before deployment

​
Live Preview Features

​
Real-Time Widget Demonstration

​
Interactive Testing Environment

1

Full Functionality Testing

Complete Feature Validation:
  • Test all chatbot interactions and responses
  • Verify lead capture forms and data collection
  • Validate demo booking integration functionality
  • Confirm proper error handling and edge cases
2

Conversation Flow Testing

Interaction Validation:
  • Test typical user conversation scenarios
  • Verify agent response quality and relevance
  • Validate conversation flow and user experience
  • Test integration with knowledge base content
3

Integration Testing

System Connectivity:
  • Verify connection to knowledge base and agent configuration
  • Test lead capture and CRM integration functionality
  • Validate demo booking and calendar synchronization
  • Confirm proper analytics tracking and data collection

​
Multi-Device Preview

​
Desktop and Mobile Views

Desktop Experience

Full Desktop Testing:
  • Standard desktop browser simulation
  • Mouse interaction and hover effects
  • Complete feature functionality
  • Professional appearance validation

Mobile Experience

Mobile Optimization:
  • Touch interface interaction validation
  • Responsive design verification
  • Mobile-specific feature testing
  • Cross-platform compatibility

​
Performance Validation

​
Code Examples and Implementation

​
Copy-Ready Integration Snippets

1

JavaScript Widget Implementation

Standard Integration Code:
<!-- Ravvio AI Chatbot Widget -->
<script>
  (function() {
    var script = document.createElement('script');
    script.src = 'https://widget.ravvio.com/v1/widget.js';
    script.async = true;
    script.setAttribute('data-agent-id', 'your-agent-id-here');
    script.setAttribute('data-primary-color', '#your-brand-color');
    script.setAttribute('data-position', 'bottom-right');
    document.head.appendChild(script);
  })();
</script>
Customization Parameters:
  • Replace ‘your-agent-id-here’ with your actual agent ID
  • Set ‘data-primary-color’ to match your brand colors
  • Configure ‘data-position’ for optimal placement
2

HTML/CSS Bubble Implementation

Lightweight Alternative:
<!-- Ravvio Lightweight Chat Bubble -->
<div id="ravvio-chat-bubble" 
     data-agent="your-agent-id" 
     data-color="#your-brand-color"
     style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
  <link rel="stylesheet" href="https://cdn.ravvio.com/bubble.css">
</div>
<script src="https://cdn.ravvio.com/bubble.js"></script>
Benefits:
  • Minimal JavaScript dependencies
  • Fast loading and lightweight
  • Easy CSS customization
  • Modern browser compatibility
3

Direct Embed Implementation

iFrame Integration:
<!-- Direct Embed Ravvio Chat -->
<iframe src="https://chat.ravvio.com/embed/your-agent-id"
        width="350" 
        height="500"
        frameborder="0"
        style="position: fixed; bottom: 0; right: 20px; z-index: 999;">
</iframe>
Use Cases:
  • Simple integration without JavaScript
  • Sandboxed implementation
  • Quick testing and prototypes
  • Legacy browser compatibility

​
Installation Instructions

WordPress Installation

Theme Integration:
  • Add code to theme’s footer.php file
  • Use WordPress plugin for easier management
  • Ensure caching plugin compatibility
  • Test with different themes

Other Platforms

CMS Integration:
  • Shopify: Add to theme.liquid template
  • Wix: Use HTML embed widget in footer
  • Squarespace: Add to footer injection
  • Custom sites: Place before closing body tag

​
Troubleshooting Guides

​
Common Integration Issues

​
Best Practice Recommendations

1

Implementation Guidelines

Optimal Integration:
  • Always place script before closing body tag
  • Use async loading to prevent page blocking
  • Implement proper error handling
  • Test across multiple browsers and devices
2

Performance Optimization

Speed and Efficiency:
  • Minimize impact on page loading speed
  • Use CDN for optimal resource delivery
  • Implement proper caching strategies
  • Monitor resource usage regularly
3

User Experience Excellence

UX Best Practices:
  • Ensure placement doesn’t obstruct content
  • Provide clear visual indicators
  • Maintain consistent branding
  • Optimize for conversion

​
Advanced Preview Features

​
Performance Validation

Speed Testing

Performance Metrics:
  • Widget loading and initialization times
  • Response times for user interactions
  • Resource usage and optimization
  • Network efficiency measurements

Optimization Insights

Improvement Areas:
  • Loading speed optimization opportunities
  • Resource usage reduction strategies
  • User experience enhancement suggestions
  • Performance benchmarking data

​
Testing Methodology

Preview Accuracy: The preview environment provides an accurate representation of how your widget will appear and function on your live website.
Testing Strategy: Use the preview feature extensively before deploying to ensure optimal user experience and avoid potential issues on your live site.
Browser Compatibility: While preview works in most modern browsers, always test your final integration on the actual browsers your customers use.