The task was to display a modal to a user when they go to close their browser in the desktop view. This is what we call an exit-intent strategy and it’s a best practice by industry standards because it allows the site visitor to explore content without being hit by an annoying prompt immediately upon landing on a website. It serves as a last call to action to increase brand engagement online. On mobile, the modal appears after a user reaches 75% of the page depth. This modal would contain an embedded signup form that would insert the user’s email address into a MailChimp subscriber list.
The first step for me was to figure out how to detect when a user was intending to exit the browser. I chose to bind jQuery’s .mouseenter() method to an invisible div I created at the very top of the page. The div, living out of the way from the rest of the page, is the last thing a user’s cursor will enter before leaving the page. The jQuery method is triggered when the user’s cursor enters the div causing the modal to pop-up.
To determine when a user has scrolled down 75% of the page in a mobile view, all I had to do was use a simple equation:
$scrollPercent = 100 * $window.scrollTop() / ($(document).height() – $window.height)
if ($scrollPercent > 75) {
$(‘#exitModal’).modal(‘show’);
}
It was time to add the MailChimp form now that the modal was activating when I wanted it to. MailChimp is organized by “Lists” which have dedicated forms. These lists can be grouped together into campaigns. By having a single list dedicated to the pop-up modal, users are able to use the metrics provided by MailChimp to help track the effectiveness of the modal.
MailChimp offers several options for generating signup forms, including an html snippet for an embedded form. Because of this, inserting a form into the modal was very easy.
Where I ran into some trouble was with the action of the form. By default, the embedded MailChimp form uses the HTTP POST method to send the data to the MailChimp server. As result of this, once a user submitted the form, they were redirected to a separate “Thank-You” page. MailChimp offers the flexibility of choosing which page to redirect to, which is normally great, but we wanted to go a step above that; We wanted the user to stay on the original page they landed on.
Thanks to a helpful forum post, I was able to accomplish this with little effort.
To prevent the form from redirecting the user, I modified the form action from
action=”//foo/subscribe/post?bar” to action=”//foo/subscribe/post-json?bar”
And then created a JavaScript submit handler to submit the form via AJAX.
After adding some conditionals and cookies to make sure the modal would only appear once per session or not appear again if the user subscribed, I was done!
Connect with us if you want to do something similar to grow your newsletter sign-ups on your website.
