Echo Reviews ROI Simulator - Iframe Integration

This project has been modified to be fully suitable for embedding within another website using an iframe.

Features

• Isolated Styling: All styles are scoped to prevent leaking into the parent page
• Responsive Design: Adapts to different iframe sizes
• Auto-resizing: Automatically adjusts iframe height based on content
• Two-way Communication: Allows communication between the iframe and parent page
• Security: Includes appropriate security headers for iframe embedding

How to Embed

Add the following code to your website:

<!-- Echo Reviews ROI Simulator Embed -->
<iframe id="roi-simulator" src="https://your-domain.com/roi-simulator/index.html" 
        style="width: 100%; border: none;" height="1000" allowfullscreen></iframe>

<!-- Script to handle iframe resizing -->
<script>
    // Listen for messages from the iframe
    window.addEventListener('message', function(event) {
        // Check if the message is from our iframe
        if (event.data && event.data.type === 'resize') {
            // Get the iframe element
            const iframe = document.getElementById('roi-simulator');
            
            // Update the height with some extra padding
            if (iframe && event.data.height) {
                iframe.style.height = (event.data.height + 30) + 'px';
            }
        }
        
        // Check if the message contains simulation results
        if (event.data && event.data.type === 'simulationResults') {
            console.log('Received simulation results:', event.data.results);
            // You can process the results here
        }
    });
</script>

Customization

You can customize the initial values by sending a message to the iframe:

// Get the iframe element
const iframe = document.getElementById('roi-simulator');

// Send configuration to the iframe
function configureSimulator() {
    iframe.contentWindow.postMessage({
        type: 'config',
        initialValues: {
            currentReviews: 50,
            monthlyCustomers: 100,
            customerValue: 75,
            monthlyVisitors: 2000
        }
    }, '*');
}

// Wait for iframe to load before sending configuration
iframe.addEventListener('load', configureSimulator);

Example

An example implementation is provided in embed-example.html. Open this file in a browser to see how the ROI simulator works when embedded in another page.

Technical Details

Changes Made for Iframe Compatibility

1. HTML Changes:

   • Added appropriate meta tags for security and iframe embedding
   • Added Content-Security-Policy headers
   • Added the iframe-content class to the body element
   • Added scripts for iframe resizing and communication

2. CSS Changes:

   • Scoped all styles to the .iframe-content class
   • Made the container responsive for iframe contexts
   • Added media queries for better responsiveness
   • Added specific iframe-related styles

3. JavaScript Changes:

   • Wrapped all code in an IIFE to avoid polluting the global namespace
   • Added iframe detection and communication functionality
   • Added height notification to the parent window
   • Added message handling for communication with the parent window

Communication Protocol

The iframe sends the following message types to the parent:

• resize: Contains the current height of the content
• simulationResults: Contains the results of the simulation

The parent can send the following message types to the iframe:

• config: Contains initial values for the simulator

Browser Compatibility

This implementation has been tested and works in:

• Chrome
• Firefox
• Safari
• Edge

Security Considerations

The Content Security Policy has been configured to allow:

• Inline scripts (required for functionality)
• Styles from Google Fonts
• Font files from Google Fonts
• Images from the same origin and data URLs

License

Copyright © 2025 Echo Reviews