Collect Negative And Positive Feedback With Review Gate Plugin
File Size: | 55.1 KB |
---|---|
Views Total: | 1679 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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">❮</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.