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