Increase Conversions with a Slide Down Optin

Thesis Feature Box

No matter what your reason for blogging and running a website, chances are that you want to increase the newsletter conversions for your website. We looked at Pippity, a premium pop-up plugin for WordPress, but it didn’t quite give us the functionality we wanted on Blogging.com.

For Blogging.com, we wanted an opt-in that would slide all of the content down instead of displaying over the content. For that, we rolled our own custom solution.

The Code

Let’s get down to business with the code. As usual, we rolled our custom solution for Thesis. I will explain how to customize this for Non-Thesis WordPress theme later in the post.

Thesis Solution

For Thesis users, we start out by adding code to the feature box. The first thing you need to do for Thesis is to activate your feature box (this option is in your Thesis Design Options) – We used sitewide and full-width above content and sidebars for Blogging.com.

Next, navigate to your custom_functions.php file and enter the PHP code below. This code will display our feature box code anywhere that is not the home page.

function myFeatureBox () { 
	if (!is_page("home") ){ ?>
		<div class="format_text">
				<p>Your unique message would go in here</p>
		</div>
		<div id="hideOpt">x - No, I don't want to subscribe to your blog.</div>
<?php }
}

add_action('thesis_hook_feature_box' , 'myFeatureBox');

Now that we’ve got some code showing in our feature box, we’re going to use a bit of CSS and jQuery to make our feature box actually slide. Let’s start with jQuery. Go ahead and create a custom.js file in your custom folder. Also, you need to be sure to embed this new custom.js in your website. You can do this by going to your Thesis Design Options and add this line of code within embedded scripts.

<script src="/wp-content/themes/thesis_184/custom/custom.js"></script>

Now, if you just want a feature box that will slide down every time someone visits a page of your website, we can do that with just a few lines of code. That code is below:

jQuery(document).ready(function($) {
     $("#feature_box").delay(2000).slideDown("slow");
});

This piece of code will slowly slide down your feature box after delaying for 2,000 milliseconds. But, let’s be real. If someone visits your website, and they never have the option to get rid of that slide down optin… They may try to nuke your website. So, let’s give your visitors an option to hide that slide down! :)

To do this, we’re going to use a jQuery cookie plugin, and we’re going to have an area where visitors can click and choose to hide our slide down optin. We will then test whether there is a cookie before we slide down the optin.

*Note: If you use this code below, do not use the jQuery snippet above.

/*!
 * jQuery Cookie Plugin
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2011, Klaus Hartl
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/GPL-2.0
 */
(function($) {
    $.cookie = function(key, value, options) {

        // key and at least value given, set cookie...
        if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
            options = $.extend({}, options);

            if (value === null || value === undefined) {
                options.expires = -1;
            }

            if (typeof options.expires === 'number') {
                var days = options.expires, t = options.expires = new Date();
                t.setDate(t.getDate() + days);
            }

            value = String(value);

            return (document.cookie = [
                encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                options.path    ? '; path=' + options.path : '',
                options.domain  ? '; domain=' + options.domain : '',
                options.secure  ? '; secure' : ''
            ].join(''));
        }

        // key and possibly options given, get cookie...
        options = value || {};
        var decode = options.raw ? function(s) { return s; } : decodeURIComponent;

        var pairs = document.cookie.split('; ');
        for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
            if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
        }
        return null;
    };
})(jQuery);

jQuery(document).ready(function($) {
     if( $.cookie('first') == null ) { 
          $("#feature_box").delay(2000).slideDown("slow");
     }
     $('#hideOpt').click(function(){
          $.cookie( 'first', '1',  { expires: 7, path: '/' } );
          $("#feature_box").slideUp("slow");
     });
});

Using this code above, we will give the visitor an option to hide our slide down optin. Whenever they click our div, #hideOpt, we will drop a cookie called first, with a value of 1, and set the expires date to a week away. Don’t worry about the value you assign the cookie. When we test for the cookie, we are testing to see if there is any cookie at all.

You can modify this code to your liking. You can change the expires date from a week to a year by typing in 365 instead of 7. You can change the name of the cookie. You can even change how long to delay before sliding down the optin.

That should do for the functional parts of your slide down optin. But, you will most likely be using some css to style your feature box. I will give you just a little bit that we use on Blogging.com.

#feature_box{
	position: relative;
	display: none;
	border-top: 2px solid #E0E0E0;
	border-bottom: 2px solid #e0e0e0;
}
#hideOpt{
	position: absolute;
	bottom: 10px;
	right: 20px;
	color: #999999;
	cursor: pointer;
}

This is some of the code we use on Blogging.com to style our feature box. I’d like to point out a few lines of code. On Blogging.com we wanted #hideOpt at the bottom right of #feature_box. To do this we changed the feature box’s positioning to relative and the hideOpt’s positioning to absolute. This allows us to position #hideOpt within #feature_box. The other line of CSS i’d like to point out is we are using a pointer cursor on #hideOpt. This gives our visitors a visual cue when they hover over the div.

You will most likely want to add your own CSS to get your feature box to your liking, but this will get you rolling.

Blogging.com Feature Box Screenshot

 General WordPress Solution

If you are not running Thesis, then the code to use a slide down optin will be slightly different for you. To begin with, enter the PHP code below in your theme where needed.

if (!is_page("home") ){ ?>
	<div id="feature_box">
		<p>Your unique message would go in here</p>
	</div>
	<div id="hideOpt">x - No, I don't want to make money from my blog</div>
<?php }

Depending on your theme, you may not need to test for the home page as we do above. You can use the same jQuery that we used above. But, you will need to make the script call in your theme’s footer. Use the code below in footer.php.

<script src="/wp-content/themes/thesis_184/custom/custom.js"></script>

As far as CSS goes, I would add the CSS above to the bottom of your theme’s CSS file. As above, you will most likely want add some CSS to style the form to your liking.

In Closing

There is a lot of code above, and this is a fairly involved tutorial. If you have any questions about the code, feel free to leave them in the comments below.

Eric Binnion is a computer science student at Midwestern State University. When Eric is not online, he is usually volunteering in his community or enjoying time with his family. You can find Eric on Twitter.

Written by Eric Binnion

Eric Binnion is a computer science student at Midwestern State University. When Eric is not online, he is usually volunteering in his community or enjoying time with his family. You can find Eric on Twitter.

«
»

Comments are closed.