1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Capture visitors emails and sell them more stuff with this exit popup

Discussion in 'Making Money' started by uncutu, Oct 27, 2014.

  1. uncutu

    uncutu Power Member

    Joined:
    Aug 6, 2010
    Messages:
    510
    Likes Received:
    183
    Here's a free way to increase your landing page conversion rates and get more money from your existing traffic. It's with exit popups.
    I found a few exit popup scripts online, but they all wanted a monthly subscription, were limited trials, or were wordpress plugins.
    Here's the free solution that's great if you run an html site.

    What does an exit popup do?
    When a person tries to exit your site, they'll get a popup asking for their email in exchange for something of value.
    Here's a few ideas of something to offer them in exchange for their email:
    • Free ebook
    • Coupon codes
    • Exclusive access to a service
    • Valuable content

    Once they submit their email, they will be sent to any page you tell them to.
    You also get their email address sent to your inbox. From there, you can set up an auto responder to send them your offers.

    *The exit popup won't show on mobile browsers.
    Demo: http://jsbin.com/hiqohonica/1/
    Prerequisites: domain/host/email (gmail is fine).

    Append this code to the page you want the exit popup on.
    Code:
    <!--Put this line inside your head tag-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    
    <!--Put the rest of the code code before the end of body tag-->
     <script type="text/javascript">
    
    (function(root, factory) {
      if (typeof define === 'function' && define.amd) {
        define(factory);
      } else if (typeof exports === 'object') {
        module.exports = factory(require,exports,module);
      } else {
        root.ouibounce = factory();
      }
    }(this, function(require,exports,module) {
    
    return function ouibounce(el, config) {
      var config     = config || {},
        aggressive   = config.aggressive || false,
        sensitivity  = setDefault(config.sensitivity, 20),
        timer        = setDefault(config.timer, 1000),
        delay        = setDefault(config.delay, 0),
        callback     = config.callback || function() {},
        cookieExpire = setDefaultCookieExpire(config.cookieExpire) || '',
        cookieDomain = config.cookieDomain ? ';domain=' + config.cookieDomain : '',
        cookieName   = config.cookieName ? config.cookieName : 'viewedOuibounceModal',
        sitewide     = config.sitewide === true ? ';path=/' : '',
        _delayTimer  = null,
        _html        = document.documentElement;
    
      function setDefault(_property, _default) {
        return typeof _property === 'undefined' ? _default : _property;
      }
    
      function setDefaultCookieExpire(days) {
        // transform days to milliseconds
        var ms = days*24*60*60*1000;
    
        var date = new Date();
        date.setTime(date.getTime() + ms);
    
        return "; expires=" + date.toUTCString();
      }
    
      setTimeout(attachOuiBounce, timer);
      function attachOuiBounce() {
        _html.addEventListener('mouseleave', handleMouseleave);
        _html.addEventListener('mouseenter', handleMouseenter);
        _html.addEventListener('keydown', handleKeydown);
      }
    
      function handleMouseleave(e) {
        if (e.clientY > sensitivity || (checkCookieValue(cookieName, 'true') && !aggressive)) return;
    
        _delayTimer = setTimeout(_fireAndCallback, delay);
      }
    
      function handleMouseenter(e) {
        if (_delayTimer) {
          clearTimeout(_delayTimer);
          _delayTimer = null;
        }
      }
    
      var disableKeydown = false;
      function handleKeydown(e) {
        if (disableKeydown || checkCookieValue(cookieName, 'true') && !aggressive) return;
        else if(!e.metaKey || e.keyCode !== 76) return;
    
        disableKeydown = true;
        _delayTimer = setTimeout(_fireAndCallback, delay);
      }
    
      function checkCookieValue(cookieName, value) {
        return parseCookies()[cookieName] === value;
      }
    
      function parseCookies() {
        // cookies are separated by '; '
        var cookies = document.cookie.split('; ');
    
        var ret = {};
        for (var i = cookies.length - 1; i >= 0; i--) {
          var el = cookies[i].split('=');
          ret[el[0]] = el[1];
        }
        return ret;
      }
    
      function _fireAndCallback() {
        fire();
        callback();
      }
    
      function fire() {
        // You can use ouibounce without passing an element
        // https://github.com/carlsednaoui/ouibounce/issues/30
        if (el) el.style.display = 'block';
        disable();
      }
    
      function disable(options) {
        var options = options || {};
    
        // you can pass a specific cookie expiration when using the OuiBounce API
        // ex: _ouiBounce.disable({ cookieExpire: 5 });
        if (typeof options.cookieExpire !== 'undefined') {
          cookieExpire = setDefaultCookieExpire(options.cookieExpire);
        }
    
        // you can pass use sitewide cookies too
        // ex: _ouiBounce.disable({ cookieExpire: 5, sitewide: true });
        if (options.sitewide === true) {
          sitewide = ';path=/';
        }
    
        // you can pass a domain string when the cookie should be read subdomain-wise
        // ex: _ouiBounce.disable({ cookieDomain: '.example.com' });
        if (typeof options.cookieDomain !== 'undefined') {
          cookieDomain = ';domain=' + options.cookieDomain;
        }
    
        if (typeof options.cookieName !== 'undefined') {
          cookieName = options.cookieName;
        }
    
        document.cookie = cookieName + '=true' + cookieExpire + cookieDomain + sitewide;
    
        // remove listeners
        _html.removeEventListener('mouseleave', handleMouseleave);
        _html.removeEventListener('mouseenter', handleMouseenter);
        _html.removeEventListener('keydown', handleKeydown);
      }
    
      return {
        fire: fire,
        disable: disable
      };
    }
    ;
    
    }));
    
    </script>
    <!-- Exit Popup Style -->
    <style>
    #ouibounce-modal {
      font-family: 'Open Sans', sans-serif;
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #ouibounce-modal .underlay {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,0.5);
      cursor: pointer;
      -webkit-animation: fadein 0.5s;
      animation: fadein 0.5s;
    }
    #ouibounce-modal .modal {
      width: 600px;
      height: 350px;
      background-color: #f0f1f2;
      z-index: 1;
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 4px;
      -webkit-animation: popin 0.3s;
      animation: popin 0.3s;
    }
    #ouibounce-modal .modal-title {
      font-size: 18px;
      background-color: #252525;
      color: #fff;
      padding: 10px;
      margin: 0;
      border-radius: 4px 4px 0 0;
      text-align: center;
    }
    #ouibounce-modal h3 {
      color: #00000;
      font-size: 1em;
      margin: 0.2em;
      text-transform: uppercase;
      font-weight: 500;
    }
    #ouibounce-modal .modal-body {
      padding: 20px 35px;
      font-size: 0.9em;
      color: #000
    }
    #ouibounce-modal p {
      color: #344a5f;
    }
    #ouibounce-modal form {
      text-align: center;
      margin-top: 35px;
      color: #000
    }
    #ouibounce-modal form input[type=text] {
      padding: 12px;
      font-size: 1.2em;
      width: 300px;
      border-radius: 4px;
      border: 1px solid #ccc;
      -webkit-font-smoothing: antialiased;
    }
    #ouibounce-modal form input[type=submit] {
      text-transform: uppercase;
      font-weight: bold;
      padding: 10px;
      font-size: 2.0em;
      border-radius: 95px;
      color: #fff;
      background-color: #ff0000;
      border: none;
      cursor: pointer;
      -webkit-font-smoothing: antialiased;
    }
    #ouibounce-modal form p {
      text-align: left;
      margin-left: 35px;
      opacity: 0.8;
      margin-top: 1px;
      padding-top: 1px;
      font-size: 0.9em;
    }
    #ouibounce-modal .modal-footer {
      position: absolute;
      bottom: 20px;
      text-align: center;
      width: 100%;
    }
    #ouibounce-modal .modal-footer p {
      text-transform: capitalize;
      cursor: pointer;
      display: inline;
      border-bottom: 1px solid #344a5f;
    }
    @-webkit-keyframes fadein {
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }
    @-ms-keyframes fadein {
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }
    @keyframes fadein {
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }
    @-webkit-keyframes popin {
      0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
      }
    
      85% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        opacity: 1;
      }
    
      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }
    @-ms-keyframes popin {
      0% {
        -ms-transform: scale(0);
        transform: scale(0);
        opacity: 0;
      }
    
      85% {
        -ms-transform: scale(1.05);
        transform: scale(1.05);
        opacity: 1;
      }
    
      100% {
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }
    @keyframes popin {
      0% {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        opacity: 0;
      }
    
      85% {
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
        opacity: 1;
      }
    
      100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }
    </style>
     <!-- Exit Popup  Code -->
        <div id="ouibounce-modal">
          <div class="underlay"></div>
          <div class="modal">
            <div class="modal-title">
              <h3>Don't go just yet!</h3>
            </div>
    
            <div class="modal-body">
              <h2>Enter your email below to get your <B>free gift</b>.</h2>
    <form name="contactform" method="post" action="send_form_email.php">
     
    
      <input  type="text" name="email"  placeholder="Enter your email here" maxlength="80" size="30">
    
    	<td colspan="2" style="text-align:center">
    		<input type="submit" value="Submit"><a href="send_email_form.php"></a>
    </td>
                <p class="form-notice"><i>Your privacy is protected.</i></p>
              </form>
            </div>
    
            <div class="modal-footer">
              <p>no thanks</p>
            </div>
          </div>
        </div>
        <!-- Used to fire the modal -->
        <script>
    
          // if you want to use the 'fire' or 'disable' fn,
          // you need to save OuiBounce to an object
          var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
            aggressive: true,
            timer: 0,
            callback: function() { console.log('ouibounce fired!'); }
          });
    
          $('body').on('click', function() {
            $('#ouibounce-modal').hide();
          });
    
          $('#ouibounce-modal .modal-footer').on('click', function() {
            $('#ouibounce-modal').hide();
          });
    
          $('#ouibounce-modal .modal').on('click', function(e) {
            e.stopPropagation();
          });
        </script>
    
    Save this code as "send_form_email.php" in the same directory as the last file. Edit the lines appropriately
    Code:
    <?php
     
    if(isset($_POST['email'])) {
     
         
     
        // EDIT THE 2 LINES BELOW AS REQUIRED
     
        $email_to = "you@yourdomain.com";
     
        $email_subject = "Your Subject";
     
         
     
         
     
        function died($error) {
     
            // your error code can go here
     
            echo "We are very sorry, but there were error(s) found with the form you submitted. ";
     
            echo "These errors appear below.<br /><br />";
     
            echo $error."<br /><br />";
     
            echo "Please go back and fix these errors.<br /><br />";
     
            die();
     
        }
     
         
     
        // validation expected data exists
     
    if (!isset($_POST['email'])) {
     
            died('We are sorry, but there appears to be a problem with the form you submitted.');      
     
        }
     
        $email_from = $_POST['email']; // required
     
        $error_message = "";
     
        $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
     
      if(!preg_match($email_exp,$email_from)) {
     
        $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
     
      }
     
        $string_exp = "/^[A-Za-z .'-]+$/";
     
    
      if(strlen($error_message) > 0) {
     
        died($error_message);
     
      }
     
        $email_message = "Exit Popup Email Hit.\n\n";
     
         
     
        function clean_string($string) {
     
          $bad = array("content-type","bcc:","to:","cc:","href");
     
          return str_replace($bad,"",$string);
     
        }
       
        $email_message .= "Email: ".clean_string($email_from)."\n";
     
    // create email headers
     
    $headers = 'From: '.$email_from."\r\n".
     
    'Reply-To: '.$email_from."\r\n" .
     
    'X-Mailer: PHP/' . phpversion();
     
    @mail($email_to, $email_subject, $email_message, $headers); 
     
    ?>
    <!-- EDIT THE URL TO GO TO YOUR SUCCESS PAGE -->
    <meta http-equiv="refresh" content="0; url=http://google.com" />
    <?php
     
    }
     
    ?>
    
     
    Last edited: Oct 27, 2014
  2. cburton81

    cburton81 Elite Member

    Joined:
    Dec 2, 2010
    Messages:
    1,722
    Likes Received:
    712
    Occupation:
    Self Employed
    Location:
    NY United States
    Home Page:
    Nice share. Hopefully some people will verify its working for them.