Perform Action After Visitor is Idle

  • follow us in feedly
Published April 18, 2013 by Brad Knutson
Detect Idle with jQuery

You’ve probably seen it before. You’re reading through a website, browsing through products, and all of a sudden you get a pop-up on your screen. Sometimes this pop-up is promoting a deal for the products you are viewing, sometimes it’s a window asking if you want to chat with a sales representative, sometimes it asks you to connect with the authors on social media.

At any rate, whether or not you think this method of advertisement is annoying, that’s irrelevant. The point is, lots of sites do it, and you might have a legitimate reason for wanting to do it also. How do you go about doing that?

Let’s first think about the problem. We want to fire an action based on a visitor going idle on our page. This call to action will ideally increase your conversion rate by regaining the attention of a potentially uninterested customer. We need to determine how long is long enough for a visitor to be idle, and what action we want to perform.

I’ve put together an example, in which I chose to display a pop-up modal window after 10 seconds asking the visitor to connect with me on social media.

View Demo

How did I accomplish this? A little bit of jQuery is all it takes. As I said above, I chose to set the idle time to 10 seconds and display a modal pop-up window.

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
idleTime = 0;
$(document).ready(function () {
	var idleInterval = setInterval(timerIncrement, 1000);
	$(this).mousemove(function (e) {
		idleTime = 0;
	});
	$(this).keypress(function (e) {
		idleTime = 0;
	});
});
function timerIncrement() {
	idleTime = idleTime + 1;
	if (idleTime > 9) {
		// perform your action here - for example - show a modal window, alert the user, reload the page, etc;
	idleTime = 0;
	}
}
</script>

In my example, I had a hidden div absolutely positioned in the middle of the page that was shown after 10 seconds. Some small additional jQuery was needed to re-hide the div when the user clicked the close button – but I don’t want to get into that here.

My point is that you could fire any action you would like. Rather than displaying a modal window, you could prompt the visitor to chat with a customer service representative to answer any questions they might have, you could run a script to process user data, and so much more. One of my personal favorites (in the category of annoying) would be to play the Jeopardy theme song to get your visitor moving along!

What would you use this for? Leave a comment below!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">