How to create an exit pop-up on Convert with Ouibounce.js

🚀 IN THIS ARTICLE YOU WILL:

• Understand the available pop-up styles
• Implement an exit pop-up in Convert.com
• Use the provided code to set up your pop-up
• Configure goals and post-implementation steps
• Customize the pop-up style, timing, and colors
• Run a QA checklist to ensure functionality
• Follow best practices for performance optimization
• Troubleshoot common issues with pop-ups
• Monitor analytics and track conversions

Convert doesn't provide built-in widgets like exit pop-ups, but you can easily implement one using Ouibounce.js. This guide provides a complete solution with multiple popup styles.

🎨 Available Popup Styles

Standard Popup (500x400)

✅ Best for most use cases
✅ Balanced size for content and forms
✅ Perfect for newsletter signups
✅ Not too intrusive

Small Popup (400x300)

✅ Minimalist approach
✅ Quick messages or simple CTAs
✅ Less intrusive
✅ Higher conversion for simple offers

Large Popup (800x600)

✅ Two-column design with image
✅ Rich content presentation
✅ Multiple value propositions
✅ Great for detailed offers or product showcases

Mobile Optimized

✅ 90% width design
✅ Touch-friendly elements
✅ Responsive layout
✅ Optimized for small screens

Banner Style

✅ Full-width design
✅ 200px height
✅ Announcement-style layout
✅ Good for time-sensitive offers

⚙️ Implementation in Convert.com

1. Go to your Convert.com dashboard
2. Select your Project
3. Click on the Experience where you want to add the exit popup
4. Open the Visual Editor
5. Navigate to the page where you want the popup to appear
6. Right-click on the element after which you want the popup code
7. Select "Insert HTML" > "After Element"
8. Paste the complete code below
9. Click Save
10. Preview your changes to ensure the popup appears correctly

💻 Implementation Code

Ouibounce Modal

<!-- Ouibounce Modal -->
<div id="ouibounce-modal" class="modal">
    <!-- Standard Popup (500x400) -->
    <div class="modal-content standard">
        <h2>Before you leave...</h2>
        <p>Get 20% off your first purchase!</p>
        <form>
            <input type="email" placeholder="Enter your email">
            <button type="submit">Sign Up</button>
        </form>
        <div class="modal-footer">
            <p class="close">No thanks</p>
        </div>
    </div>
</div>

CSS Styling

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

/* Standard Popup (500x400) */
.modal-content.standard {
    width: 500px;
    height: 400px;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

JavaScript for Popup Activation

(function() {
    var script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.12/ouibounce.min.js';
    script.onload = initOuibounce;
    document.head.appendChild(script);
})();

function initOuibounce() {
    const modal = document.getElementById('ouibounce-modal');

    const instance = ouibounce(modal, {
        aggressive: true,
        sensitivity: 20,
        timer: 1000,
        delay: 0,
        cookieExpire: 7,
        callback: function() {
            modal.style.display = 'block';
        }
    });

    // Close handlers
    document.querySelectorAll('.close').forEach(closeBtn => {
        closeBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });
    });
}

Post-Implementation Steps

Convert.com Goal Setup

Create the following goals in Convert:

// Email Submission Goal
window._conv_q = window._conv_q || [];
_conv_q.push(["pushConversion", "EMAIL_SUBMISSION_GOAL_ID"]);

// Popup View Goal
window._conv_q = window._conv_q || [];
_conv_q.push(["pushConversion", "POPUP_VIEW_GOAL_ID"]);

// Popup Close Goal
window._conv_q = window._conv_q || [];
_conv_q.push(["pushConversion", "POPUP_CLOSE_GOAL_ID"]);

Customization Options

Change Popup Style

Modify this line in the initOuibounce function:

const styleToShow = 'standard'; // Options: 'standard', 'small', 'large', 'mobile', 'banner'

Modify Timing

const instance = ouibounce(modal, {
    timer: 5000, // Wait 5 seconds before enabling
    delay: 1000  // Wait 1 second before showing
});

Change Colors

Add this to the style section:

:root {
    --primary-color: #4CAF50;
    --hover-color: #45a049;
    --text-color: #333333;
    --background-color: #ffffff;
}

✅ QA Checklist

Basic Functionality

☐ Popup appears on exit intent
☐ All styles load correctly
☐ Forms submit properly
☐ Close buttons work
☐ Overlay clicks close modal

Mobile Testing

☐ Responsive design works
☐ Touch events function properly
☐ Forms are easy to complete
☐ No horizontal scrolling

Browser Testing

☐ Chrome
☐ Firefox
☐ Safari
☐ Edge
☐ Mobile browsers

Convert.com Specific

☐ Goals tracking properly
☐ No conflicts with other experiments
☐ Preview mode works
☐ Traffic allocation set correctly

⚡ Best Practices

Performance Optimization

// Add lazy loading for images
const img = modal.querySelector('img');
if(img) {
    img.loading = 'lazy';
}

Form Validation

forms.forEach(form => {
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const email = this.querySelector('input[type="email"]').value;

        // Basic email validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            alert('Please enter a valid email address');
            return;
        }

        console.log('Valid email submitted:', email);
        modal.style.display = 'none';
    });
});

Troubleshooting Common Issues

Popup Not Appearing

Enable debug mode:

const instance = ouibounce(modal, {
    debug: true  // Will fire immediately in development
});

Multiple Popups

Ensure only one instance runs:

if (window.ouibounceInstance) {
    window.ouibounceInstance.disable();
}
window.ouibounceInstance = instance;

Mobile Issues

Detect mobile devices:

const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
    const styleToShow = 'mobile';
}

Monitoring and Analytics

Add Google Analytics Events

function sendGAEvent(category, action, label) {
    if (typeof ga !== 'undefined') {
        ga('send', 'event', category, action, label);
    }
}

// Usage
sendGAEvent('Exit Popup', 'View', styleToShow);
sendGAEvent('Exit Popup', 'Submit', 'Email Form');

Final Steps:

✅ Test in Convert's preview mode
✅ Start with a small percentage of traffic
✅ Monitor bounce rates after implementation
✅ A/B test different popup styles

This completes the comprehensive guide for implementing exit popups using Ouibounce.js in Convert.com experiments. 🚀