Press "Enter" to skip to content

A Simple Review Gate Using jQuery Plugin

Review Gate is a lightweight review gateway made from a jam to capture user reviews that are not 5-star quality. It helps companies collect negative and positive comments to enhance the customer service experience better.

Checking is a gateway is designed to capture customer feedback to help build better products and enhance the customer service experience. The user allows you to evaluate your product or service using a 5-star rating system and ask them to leave reviews to collect negative and positive feedback.

review gating google policy, positive relevance examples, negative reviews, negative relevance definition, birdeye review gating, review gating app store, google review policy

How to make use of 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 primary script review-gate.jquery.js after loading the most recent jQuery library.

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

3. Initialize the assessment gate plugin and completed.

$('#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');
  },
});
PropertyType
stepClassNameString
navBarColorString
navBarClassNameString
navBarBackBtnClassNameString
enableNavBackBtnBoolean
emojiConfigObject
onUpdateFunction

Collect Negative And Positive Feedback With Review Gate Plugin, Review Gate Github, how to write a negative product review


See Demo And Download

Official Website(davidkim10): Click Here

This superior jQuery/javascript plugin is developed by davidkim10. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *