Embed Funnels into iFrame

This guide explains how to embed a web2wave quiz/paywall page as an iframe and receive all analytics events via postMessage.

Basic Setup

1. Embed the Page as an Iframe

Add the ?webview=1 parameter to the quiz/paywall URL:

<iframe 
    id="web2wave-iframe" 
    src="http://app.web2wave.com/?webview=1" 
    width="100%" 
    height="600"
    frameborder="0">
</iframe>

2. Listen for Events

Set up a message listener in your parent page to receive all events:

window.addEventListener('message', function(event) {
    // Verify origin for security (optional but recommended)
    // if (event.origin !== 'https://your-domain.com') return;
    
    if (event.data && event.data.message === 'event') {
        const eventName = event.data.event;
        const eventProperties = event.data.data;
        
        console.log('Event received:', eventName, eventProperties);
        
        // Handle specific events
        switch(eventName) {
            case 'PageView':
                console.log('Page viewed');
                break;
            case 'Quiz finished':
                console.log('Quiz completed');
                break;
            case 'Purchase':
                console.log('Purchase made:', eventProperties);
                break;
            // Add more event handlers as needed
        }
    }
});

Message Format

All events are sent with the following structure:

{
    message: "event",
    event: "EventName",           // Event name (e.g., "PageView", "Quiz finished")
    data: {                        // Event properties object
        value: 123,
        currency: "USD",
        // ... other properties
    }
}

Common Events

The following events are typically sent:

PageView - When a page is viewed
Answer [field_name] - When a user answers a question
Quiz finished - When the quiz is completed
Purchase - When a purchase is made
Subscribe - When a subscription is created
InitiateCheckout - When checkout is initiated
Paywall Prices visible - When paywall prices are shown
Paywall click price - When a price is clicked
All events: https://docs.web2wave.com/update/reference/events

Example: Complete Implementation

<!DOCTYPE html>
<html>
<head>
    <title>Embedded Quiz</title>
</head>
<body>
    <h1>My Embedded Quiz</h1>
    <iframe 
        id="web2wave-iframe" 
        src="http://app.web2wave.com/?webview=1" 
        width="100%" 
        height="600"
        frameborder="0">
    </iframe>

    <script>
        window.addEventListener('message', function(event) {
            // Security: verify origin
            // if (event.origin !== 'https://your-domain.com') return;
            
            if (event.data && event.data.message === 'event') {
                const { event: eventName, data: properties } = event.data;
                
                // Log all events
                console.log(`[Web2Wave Event] ${eventName}:`, properties);
                
                // Send to your analytics
                // yourAnalytics.track(eventName, properties);
            }
        });
    </script>
</body>
</html>

Live example

Notes

The ?webview=1 parameter must be included in the iframe URL
Events are sent to window.parent, so they will only work when embedded in an iframe
All events include the full event properties object with analytics data
The message listener should be set up before the iframe loads to capture all events