How to use Ouibounce in Rails 5

Ouibounce is a small library enabling you to display a modal before a user leaves your website. It detects the user exit intent. You can download the ouibounce static app to play with from my repo ouibounce static app.

alternate text

Step 1

Download the ouibounce.js and save it in vendor/assets/javascripts folder.

Step 2

In app/views/layouts/application.html.erb, add:

<%= javascript_include_tag 'ouibounce' %>   

The head section of the layout file will look like this:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
  <title>Tagging System</title>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag :modernizr %>
  <%= javascript_include_tag 'ouibounce' %> 
</head>

Step 3

Just before the body tag ends, add:

<!-- 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>
      <br>
      <p>You can style your Ouibounce modal however you see fit. You can also include big buttons, an email capture or just plain text. The sky's the limit!</p>
      <br>
      <p>Close this modal by clicking "No Thanks" below or clicking anywhere outside of the modal.</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>no thanks</p>
    </div>
  </div>
</div>

<!-- Example page JS        -->
<!-- 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>

to the layout file.

Step 4

In assets.rb add the ouibounce javascript file:

Rails.application.config.assets.precompile += %w( modernizr.js ouibounce.js )

Step 5

Create modal.scss in app/assets/stylesheets with the following css:

#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: 400px;
  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: #fff;
  font-size: 1em;
  margin: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
#ouibounce-modal .modal-body {
  padding: 20px 35px;
  font-size: 0.9em;
}
#ouibounce-modal p {
  color: #344a5f;
  line-height: 1.3em;
}
#ouibounce-modal form {
  text-align: center;
  margin-top: 35px;
}
#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: 12px;
  font-size: 1.1em;
  border-radius: 4px;
  color: #fff;
  background-color: #4ab471;
  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;
  }
}

You will now see the sample modal when you are about to close the tab.

Integrating Ouibounce with Twitter Bootstrap 3

You will run into problems using Ouibounce with Twitter Bootstrap 3 due to conflicts. The name modal is already taken by Bootstrap. You can refer this issue to download a sample code that shows how to make them play well with each other.

Summary

In this article, you learned how to hook up the ouibounce library with Rails 5 asset pipeline.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.