User feedback

By Ken Hawkins

interactive buttons feedback Requires EBI Visual Framework 1.2.0

Log user feedback directly to Google Analytics.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<aside class="callout columns medium-10 medium-push-1" id="user-feedback">
  <div class="question">
    <h3 class="float-left padding-right-large">Was this helpful?</h3>
    <a href="#" class="button">
      No
    </a>
    <a href="#" class="button">
      Yes <span class="icon icon-functional" data-icon="k"></span>
    </a>
  </div>
  <div class="response hidden">
    <h3>Thank you!</h3>
    <p>We've captured your feedback, it will be useful to us.</p>
  </div>

</aside>



JS
setTimeout(function() {
  jQuery("body.google-analytics-loaded #user-feedback").on('mousedown', 'a', function(e) {
    analyticsTrackInteraction(e.target,'User feedback');

    $(this).closest(".question").addClass("hidden");
    $(this).closest("#user-feedback").find('.response').removeClass("hidden");

    e.preventDefault();
  });
}, 900); // wait a moment for GA to load