Collect Negative And Positive Feedback With Review Gate Plugin

Review Gate is a jQuery plugin designed for capturing customer feedback to help build better products and enhance the customer service experience.

It allows the user to rate your product or service using a 5-star rating system and prompts them to leave reviews to collect both negative and positive feedback.

How It Works:

• User selects positive 5-star experience -> user is prompted to leave a review on a social review platform -> positive review complete.
• User didn't have a 5-star experience -> user is prompted to leave feedback through a web form -> feedback form sent to your internal team.

How to use it:

1. Create the HTML for the Review Gate.

<!-- Navbar -->
<nav class="review-gate-navbar" style="display: none">
  <button class="review-gate-navbar__btn">&#10094;</button>
  <div class="review-gate-navbar__logo-wrapper">
    <img
      class="review-gate-navbar__logo"
      src="./img/sample-logo.png"
      alt="logo"
    />
  </div>
</nav>

<!-- Review Gate -->
<div id="review-gate">
  <section class="review-step">
    <h2 class="review-title">Rate Your Recent Experience</h2>
  </section>
  <section class="review-step">
    <h2 class="review-title">Please Leave Us A Review!</h2>
    <p>
      We are very happy to hear you had a positive experience with [ex:
      "bluetech"]. Please take a second to leave us a review on [review
      platform]
    </p>
    <a class="btn leave-review-btn" href="#">Leave Review</a>
  </section>
  <section class="review-step">
    <h2 class="review-title">Please Leave Us Some Feedback</h2>
    <p>
      We are sorry to hear you did not have a 5-Star experience. Please
      take a moment to leave us feedback on how we can improve.
      <br />
      <br />
      [Insert Your Feedback Form Here]
    </p>
  </section>
</div>

2. Add the main script review-gate.jquery.js after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/review-gate.jquery.js"></script>

3. Initialize the review gate plugin and done.

$('#review-gate').reviewGate({
  onUpdate: function (count) {
    if (count >= 5) {
      // Do something on good review
      $('#review-gate').reviewGate('step', 2);
    } else {
      // Do something on bad review
      $('#review-gate').reviewGate('step', 3);
    }
  },
});

4. All default plugin configs.

$('#review-gate').reviewGate({
  stepClassName: 'review-step',
  navbarColor: '#fff',
  navBarClassName: 'review-gate-navbar',
  navBarBackBtnClassName: 'review-gate-navbar__btn',
  enableNavBackBtn: true,
  emojiConfig: {
    emoji: 'star',
    fontSize: 42,
    attributes: {
      id: 'emoji-ratings-wrapper',
    },
    css: {},
  },
  onUpdate: function () {
    alert('Add an onUpdate function');
  },
});

---

This awesome jQuery plugin is developed by davidkim10. For more Advanced Usages, please check the demo page or visit the official website.