Thursday, October 8, 2015

Offer something when user is moving out of your page

What most of the publishers are doing to convert their new visitors as returining visitors? They offer something when users visit the site.
Now, when do they offer discount or free stuff, it depends from business to business, either when user spends some time on a page or
user visiting couple of pages or when he/she is leaving the website.




The below example shows you how to detect (with jquery ) and show something when user is leaving your website.

Checkout some useful css3 generators

HTML of the simple popup block


<div class="container">
    <div class="popup-container hidden">
            <a class="popup-close" href="#"> Close</a>
        <div class="v-center">
            <div class="popup-offer">
               <div class="">
                <input type="text" class="input-subscribe"placeholder ="Email Address"/>
                </div>
                <button class="button-subscribe">SUBSCRIBE</button>
                <p class="text-center">Get updates straight to your inbox</p>
            </div>
        </div>
    </div>
</div>


CSS for the same simple popup block


.popup-close {
    position:absolute;
    top:0;
    right:0;
    padding:30px;
    color:#fff;
}
.button-close:hover {
    color:#fff;
}
.popup-container {
    position:fixed;
    height:100%;
    width:100%;
    background-color:#f16334;
    top:0;
    left:0;
    color:#fff;
    padding:15px;
}
.v-center {
    position:relative;
    top:50%;
    z-index:10;
    transform: translateY(-50%);
}
.popup-offer {
    width:100%;
    max-width:500px;
    padding:40px;
    background-color:#fff;
    border-radius:5px;
    margin-left:auto;
    margin-right:auto;
}
.popup-offer p {
    color:#666;
}
.input-subscribe {
    width:100%;
    border:2px solid #ddd;
    border-radius:3px;
    height:40px;
    margin:30px 0 20px 0 ;
    color:#666;
}
.button-subscribe {
    width:100%;
    border-radius:3px;
    border:none;
    background-color:green;
    height:40px;
    margin:5px 0 20px 0 ;
}


Checkout some javascript frameworks that might be useful.

Javascript to detect user action


$(function() {
 var popup = $('.popup-container');
     var closed = false;
 $(document).mouseout(function() {
     if(!closed) {
         popup.removeClass('hidden');
     }
 });
 var close = $('.popup-close');
        close.click(function() {
        popup.addClass('hidden');
        closed = true;
    });
})


No comments:

Post a Comment