Feedback Modal Plugin With jQuery And Bootstrap 4 - feedback_widget

The jQuery feedback widget plugin helps you create a side tab that toggles a Bootstrap 4 based feedback modal popup on click.

Great for easily creating a user-friendly feedback system on your website.

How to use it:

1. To use this plugin, you first need to load jQuery library and Bootstrap 4 framework in your html page.

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">
<!-- jQuery  -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<!-- Bootstrap JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
</script>

2. Load the jQuery feedback_widget plugin's files.

<link rel="stylesheet" href="css/feedback.css">
<script src="js/feedback.js"></script>

3. Initialize the feedback widget and specify the text displayed on the feedback tab.

$(document).ready(function () {
  feedback_options = {
    title: "Feedback"
  };

  feedback.init(feedback_options);
});

4. Add your own contact form to the feedback modal.

var model_html = '<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">';
    model_html += '<div class="modal-dialog modal-dialog-centered" role="document">';
    model_html += '<div class="modal-content">';
    model_html += '<div class="modal-header">';
    model_html += '<h5 class="modal-title" id="exampleModalLongTitle">' + feedback_options.title + '</h5>';
    model_html += '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
    model_html += '<span aria-hidden="true">&times;</span>';
    model_html += '</button>';
    model_html += '</div>';
    model_html += '<div class="modal-body">';
    model_html += 'Your Contact Form Here';
    model_html += '</div>';
    model_html += '<div class="modal-footer">';
    model_html += '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
    model_html += '<button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>';
    model_html += '</div>';
    model_html += '</div>';
    model_html += '</div>';
    model_html += '</div>';

    model_html += '<div class="center">';
    model_html += '<a href="#" data-toggle="modal" data-target="#exampleModalCenter">Feedback</a>';
    model_html += '</div>';

---

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