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

IN THIS ARTICLE YOU WILL:

• Know why to use Convert's native Pop-up creator
• 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

Before Convert introduced a native Pop-up Creator, teams commonly relied on custom JavaScript integrations (for example, Ouibounce.js) to implement exit pop-ups inside Convert experiments. While this approach offers flexibility, it requires custom code, engineering support, and extra setup to make sure results are measured correctly.

Why use Convert’s native Pop-up Creator instead?

Convert’s Pop-up Creator is designed specifically for experimentation, not just deployment.

Key benefits

• Faster experimentation

  • Create pop-ups directly in Convert’s visual editor

  • No custom JavaScript required

  • No engineering dependency

• Proper testing rigor

  • Run true A/B tests on pop-ups

  • Use the same targeting rules as any other Convert experiment

  • Leverage Convert’s stats engine for decision-ready results

• More confidence in decisions

  • Validate offers and messages before rolling them out

  • Test interruption-based UX instead of shipping blindly

  • Make defensible decisions backed by data, not assumptions

Unlike custom JavaScript implementations, Convert’s Pop-up Creator ensures pop-ups are measured, analyzed, and evaluated with the same discipline as any other experiment.

Learn how to create and test pop-ups using Convert’s Pop-up Creator.

This approach lets you test interruption-based UX with speed, rigor, and confidence, without the complexity shown in the custom implementation below. If you still need a highly bespoke or legacy implementation, you can follow the Ouibounce.js example in the rest of this article.

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.