Custom Events / Listeners

Listening to Whop Events

HandL fires custom events you can listen to:

// Listen for Whop initialization
document.body.addEventListener('UTMSimpleWhopInitCompleted', function(event) {
    console.log('Whop Pixel initialized');
});

// Listen for any Whop event completion
document.body.addEventListener('UTMSimpleWhopEventCompleted', function(event) {
    console.log('Whop event sent');
});

// Listen for specific event completion
document.body.addEventListener('UTMSimpleWhoppurchaseCompleted', function(event) {
    console.log('Purchase event sent to Whop');
});

Note: The event-specific listener name is UTMSimpleWhop + your event name + Completed, using the event name exactly as you passed it. Because Whop's standard events are lowercase, sendWhopEvent('purchase') fires UTMSimpleWhoppurchaseCompleted.

Example: Track Button Clicks

document.getElementById('book-call-button').addEventListener('click', function() {
    HandL.sendWhopEvent('schedule', {
        value: 50,
        currency: 'USD'
    });
});

Example: Track Form Submissions

<form id="contact-form" onsubmit="trackFormSubmission(event)">
    <!-- form fields -->
</form>

<script>
function trackFormSubmission(event) {
    // Form submission logic here

    HandL.sendWhopEvent('lead', {
        event_id: 'lead_' + Date.now()
    });
}
</script>