How to Create a Scroll Triggered Box in WordPress

Webmasters are always looking to improve their conversion and bounce rates. Earlier, I had written about how to create floating sidebars and widgets so that users could continue to interact with important site elements even after they’ve scrolled down. However, we can take this one step further and display action boxes when the user scrolls past a certain point. There are a number of actions that you might desire from a typical visitor – a “Like” on social media, a subscription for email updates, or a registration. By ensuring that you don’t bother the user until they have consumed your content, you can create a less distracting means to get them to do what you want.

But we need to take great care to ensure that it doesn’t end up annoying users. For example, we have to make sure that it doesn’t pop up multiple times for the same individual – or at least place a time limit before it can be shown again. We’d like to also control the pages on which it shows up as well as deciding whether or not we want to expose it on mobile devices. Taking all this into consideration, there’s a great WordPress plug-in that fulfills all these requirements.

The Dreamgrow Scroll Triggered Box

This add-on for WordPress allows you to create any number of highly customizable pop-ups, each of which can be configured differently to show up in different places. For a free plug-in, it’s pretty impressive to see what it can do with all of its features. After you download and install it, you can get started with your first scroll triggered box by selecting the “Add New Scrollbox” submenu item from the “Scrollboxes” section on the left-hand side of the WordPress administration dashboard.

We create the pop-up box like we do a regular page – by giving it a title and inserting content. In this case, the content area can hold any HTML that you would normally place on a page. In this test example, I’m going to create a pop-up box that displays the Facebook page “Like” interface.

For this to work, you need to first insert the code generated with the Facebook page plug-in API in the header or footer of your website. Once that’s done, you can place the actual Facebook page plug-in code into the pop-up area like this:

Scroll Box Options

The true power of the Dreamgrow plug-in shows itself when you scroll down and you get to choose in a nice graphical manner where the pop-up will show up and when.

As you can see above, you can set the scroll percent or time delay as well as choose on the grid the location where the box will come up. It also takes care of annoyances like multiple pop-ups for the same user. In the screenshot below, you can see that you have the option to restrict the time gap in which the same user won’t be exposed to it.

In this example I’ve chosen 24 hours, though you can set it for up to a year. In addition, you can also see that you have the option to disable the pop-up for mobile devices. This makes a lot of sense especially when small screen sizes make it inconvenient or difficult to accurately close stuff properly.

Design

Further down, you can choose from a variety of preconfigured themes. In this case since I’m interested in writing my own HTML from scratch, I simply select “I’m using my own theme” instead.

You can also select the size of the pop-up box, the color, the border etc. All in all, you can customize the scroll box to look exactly the way you want it to. Finally, there are a number of preconfigured options allowing you to place social media buttons in the pop-up box for major services.

This means you don’t have to mess around with creating code for each social network – a great benefit to keep things simple and clean. When I’m finally done with designing my pop-up box and have saved it, here’s what the final result looks like:

Neat and simple without any fuss. No matter what your popup needs are, The Dreamgrow Scroll Triggered Box plug-in will take care of it.