In a post a while back, we explored one way in which modal windows can help to increase conversions by affirming the user’s decision to click on your CTA.
In addition to that tutorial, we also provided a tutorial illustrating how users can incorporate Exit Popups in their landing pages.
Combining Two Concepts
Since those posts, we began using modal windows in our affiliate campaigns in addition to our website for our tracking platform and figured we could share with our readers yet another useful strategy using modal windows.
We realized that while exit-pops had their utility and were somewhat effective, they are perceived by some to be annoying or obstructive.
Then we noticed something a while back that combined the design of a modal window with the effect of a popup without the abruptness.
Exit Modal Windows
What is an exit modal window? Well, it’s just like it sounds: a modal window that appears when the user attempts to exit your website.
Before we spend any more time explaining what an exit modal window is, you can check it out in action by clicking here.
Notice that if you move your cursor anywhere outside of the browser window, a window subtly appears to draw your attention back to the landing page and provides one last attempt to get you to convert.
What You’ll Need
For this to work properly, you need only 3 things:
- index.php file
- latest version of Twitter Bootstrap
- latest version of jQuery
Once you’ve linked all of these files to your index.php file, you’ll then want to paste the following code into your landing page:
| [frame] <script> $(document).ready(function(){ $("body").mouseleave(function(){ $(‘#exit_pop’).modal(‘show’); }); }); </script>[/frame] |
The above code essentially says that when the user moves their cursor outside of the landing page’s body, your modal window will “show”.
Next, you’ll have to paste in your modal window. Just make sure your modal window name matches up with your pasted pop-up script.
Final Touches
As you may have noticed in the example lander, the landing page provides one offer message while the modal window provides another. In addition to creating a fully-customized alert message (of sorts), you can also provide an alternative offer or even an offer wall to your users in a manner that’s less obtrusive than an exit pop or popunder.
This can open up a whole new world of strategies which will surely help you increase your conversions. So feel free to download this landing page and edit it to try out your own ideas.
This is a really nifty trick! I like it way better than having an exit pop. Only problem is that I haven’t installed something like this before and have a few questions before doing so.
So I switch my index from html to php …
than download Twitter Bootstrap and Jquery …and what do you mean by link this to my html file? How do I go about “linking” this to them? Do you mean to simply place them in the same folder as my index in my FTP?
Than the last step is to add the modal window … where do I get this modal window from?
Thanks in advance,
Ryan P.
Hi Ryan,
What I mean by “link” is to paste the directory of your jQuery and Bootstrap files into your index file, like so:
If you’re unfamiliar with that process, I would suggest that you check out http://www.w3schools.com/ to learn how to link outside files to your landing page.
As for the modal window, everything is included in the download. The code for the modal window itself is located at the bottom of the index.php file, just before the closing body tag.
If you have any other questions, let me know.
Thanks for sharing such information, I love the combining concept part.