Learn to Create an Exit Offer with Colorbox to Improve Conversions

As you travel from website to website you have undoubtedly encountered an exit offer. You know, that point when you are ready to exit the web page and bam! a pop-up mysteriously appears displaying the offer of the day, a discount, or an offer to sign up for their newsletter. As website owners, we are all guilty of this or should be. And as web developers and designers, we are drawn into all of marketing’s clever ideas to improve website conversions.

With an average conversion rate for website traffic hovering around 2.5%, there is plenty of room to improve on converting traffic, no matter what your website traffic. Exit offers allow website owners and online marketers to present an offer, message, or call-to-action to visitors ready to leave and keep them on your website. You can setup campaigns that present discounts to shoppers on your website or provide valuable information such as white papers in exchange for an email.
 

Create Value for Your Exit Offer to Work

For the Exit Offer to work and convert existing traffic the offer must provide value. Your offer copy should present the web visitor with an immediate benefit for offering up their email or making a purchase. The visitor must feel there is value for them to perform your desired action, a conversion. The exit offer follows a simple rule if you provide value for your web traffic, you will in return receive the same value back such as a sale or email address for your email list.
 

Offer an Exit Offer with Colorbox

There are plenty of solution providers offering website owners the ability to integrate exit offers capabilities to their website using their service. That is great for website owners looking for a quick solution, lack a development team or don’t have the time to roll up their sleeves and produce a solution.

For those adventurous types, I have put together a quick how-to add an Exit Offer using Colorbox and jQuery.

What is Colorbox? Colorbox is a lightweight customizable lightbox plugin for jQuery developed by Jack Moore.

First download Colorbox than upload jquery.colorbox.js and colorbox.css to your active theme directory.

Now let’s develop the shortcode for calling your Exit Offer. First off, let’s enqueue the Colorbox files to your functions.php file.

function my_enqueue_script() {
    wp_register_script( 'eliio-colorbox', get_template_directory_uri() . '/js/jquery.colorbox.js', array('jquery') );
    wp_enqueue_script('eliio-colorbox');

    wp_register_style( 'style-colorbox', get_template_directory_uri() . '/css/colorbox.css', array() );
    wp_enqueue_style('style-colorbox');
}

add_action('wp_enqueue_scripts', 'my_enqueue_script');

Once you have the Colorbox scripts added we can develop the shortcode function. In your functions.php file add the following:

function my_colorbox_exit_offer($atts){
extract(shortcode_atts( array('offer' => ''), $atts));

}

//Register Shortcode
function register_my_shortcode(){
add_shortcode ('exit-offer','my_colorbox_exit_offer');
}

add_action('init','register_my_shortcode');

Add the following to your themes main Javascript file:

jQuery(document).ready(function() {
jQuery(".inline").colorbox({inline:true, width:"50%"});

setTimeout('document.getElementsByClassName("inline")[0].click();', 10000);

})

The function displays an exit offer after your website visitor has been on the page with the exit offer shortcode for 10 seconds. You can change setTimeout to a time that fits your requirements. The function is using the Colorbox Inline Content option and can be changed to fit your needs.

Below is a sample shortcode that produces the Exit Offer on the selected page. The shortcode accepts HTML using single quotes.