QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Exit-Intent using JavaScript

Exit-Intent using JavaScript

exit-intent-technology

Exit-Intent technology has been one of the most successful Internet marketing techniques. Websites use this technology to increase subscribers, sell products, social media followers etc. In this tutorial I will tell you what it is and how exactly it works. And also how to integrate this technology in your own website.

What is Exit-Intent Technology?

In nutshell Exit-Intent technology is displaying a modal before user leaves the site. This modal can be positioned anywhere and its purpose can be anything.

How does Exit-Intent finds if User is leaving the site?

Technically exit intent detects when mouse pointer moves out of browser viewport. As soon as the mouse pointer moves outside viewport a modal is displayed. This brings back user attention to the site. This is a very user friendly way of displaying a modal as the user was anyways leaving the site. It has been proved that this techniques brings back attention of 90% of your website users. And then you can ask the user to subscribe, follow you on social media or provide a coupon for your premium product.

How to detect when mouse pointer leaves viewport?

We can detect when mouse pointer leaves viewport by using JavaScript’s mouseleave event.

Here is example code on how to detect using mouseleave event

document.addEventListener("mouseleave", function(e){
    if( e.clientY < 0 )
    {
         alert("Hey don't leave. I have an free eBook for you");
    }
}, false);

Ouibounce JavaScript Library

Ouibounce is a JavaScript library which lets you detect when mouse pointer leaves the viewport and also its comes with inbuilt ready to use modals.

Other features provided by Ouibounce are:

  • Sometimes user’s while navigating the site move their mouse pointer outside viewport. Ouibounce is intelligent enough to detect this and prevent displaying modal./li>
  • Ouibounce fires only once for each visitor.
  • Its has an time limit before a modal is displayed. For example: A user will never leave a site before 2-5 seconds therefore it never displays a modal in this time gap.

Here is an example on how to use Ouibounce

View Demo

<!doctype html>
<html>
    <head>
        <title>Exit Intent</title>

        <!-- Load Ouibounce from CDN -->
        <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/carlsednaoui/ouibounce/master/test/ouibounce.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.11/ouibounce.min.js"></script>
    </head>
    <body>

        <!-- Ouibounce Modal -->
        <div id="ouibounce-modal">
          <div class="underlay"></div>
            <div class="modal">
                <div class="modal-title">
                    <h3>This is a Ouibounce modal</h3>
                </div>

                <div class="modal-body">
                    <p>Thanks for stoping by!</p>
                        <form>
                            <input type="text" placeholder="you@email.com">
                            <input type="submit" value="learn more &raquo;">
                            <p class="form-notice">*this is a fake form</p>
                        </form>
                </div>

                <div class="modal-footer">
                    <p onclick="document.getElementById('ouibounce-modal').style.display = 'none';">no thanks</p>
                </div>
            </div>
        </div>

        <script>
            var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'),{
                aggressive: true, //Making this true makes ouibounce not to obey "once per visitor" rule
            });
        </script>
    </body>
</html>

If you are planning to create your own modal then no need to embed the Ouibounce’s CSS file. Just create a hidden modal i.e., display property set to none. And then select it and pass the reference to ouibounce function. When user is about to leave the site ouibounce changes the display property.

Here is example code how to do this

<!doctype html>
<html>
    <head>
        <title>Exit Intent</title>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.11/ouibounce.min.js"></script>

        <style>
            #ouibounce-modal
            {
                display: none;
            }
        </style>
    </head>
    <body>
        <!-- Ouibounce Modal -->
        <div id="ouibounce-modal">
          <div class="underlay"></div>
            <div class="modal">
                <div class="modal-title">
                    <h3>This is a Ouibounce modal</h3>
                </div>

                <div class="modal-body">
                    <p>Thanks for stoping by!</p>
                        <form>
                            <input type="text" placeholder="you@email.com">
                            <input type="submit" value="learn more &raquo;">
                            <p class="form-notice">*this is a fake form</p>
                        </form>
                </div>

                <div class="modal-footer">
                    <p onclick="document.getElementById('ouibounce-modal').style.display = 'none';">no thanks</p>
                </div>
            </div>
        </div>

        <script>
            var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'),{
                aggressive: true, //Making this true makes ouibounce not to obey "once per visitor" rule
            });
        </script>
    </body>
</html>
Feb 27, 2015Narayan Prusty
Creating JavaScript ModulesRemove HTML Tags from String using PHP
Comments: 2
  1. Lakhan Dewangan
    2 years ago

    Thanks Narayan for the clear and easy explanation.

    ReplyCancel
  2. php programmer
    4 years ago

    Really great article, I have seen your Demos on QNimate Labs, Its great and useful source code, thank you Narayan.

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 2 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is Exit-Intent Technology?
  • How does Exit-Intent finds if User is leaving the site?
  • How to detect when mouse pointer leaves viewport?
  • Ouibounce JavaScript Library
  • This is a Ouibounce modal
  • This is a Ouibounce modal
Related Articles
  • Popup Best Time, Placement and Options
  • wikiHow Style Popup
  • URL Tracking Parameters and Its Negative Impact
  • Understanding Javascript Events In Depth
  • Push Technology In PHP
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license