was-it-helpful

Simple Javascript widget based on Vue.js 2.x to gather feedback on knowledge base, guide and similar pages.

Usage

Download dist/build.js file or use the CDN link and embed the script via script tag:

<script src="https://unpkg.com/was-it-helpful@latest/dist/build.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
  if (document.querySelector('#was-it-helpful')) {
    new WasItHelpful('#was-it-helpful', {onSubmit: function(data) {
      // Some code to submit the answer somewhere
      // the "data" parameter contains "helpful" boolean field and the "message" string field
    });
  }
});
</script>

<div id="was-it-helpful"></div>

Configuration

Here is the example of fully configured widget. The constructor accepts the wrapper element selector and the configuration object:

new WasItHelpful('#was-it-helpful', {
    labels: {
        "question_text": "Was this article helpful?",
        "answer_yes": "Yes",
        "answer_no": "No",
        "sorry_text": "Sorry about that! How can we improve it?",
        "submit_btn": "Send feedback",
        "thank_you": "Thanks!"
    },
    onSubmit: function (data) {
        $.post('https://webhook.example.com', {
            'subject': 'Page title',
            'url': 'http://page.url.com',
            'helpful': data.helpful ? '1' : '0',
            'message': data.message
        })
    }
});

The configuration object may contain these fields:

Field key	Field description
labels	labels field contains a key-value object of the labels used in the widget output. You can provide custom wordings or translations via this field (the presented example contains the default values)
onSubmit	onSubmit is the callback executed on the "Yes" click or "No" -> "Send feedback" form completion. The callback will be called with the object of the user answers: helpful field contains boolean Yes\No answer message contains optional feedback message

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.