was-it-helpful

1.0.6 • Public • Published

was-it-helpful

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

2017-12-18 11 34 33

2017-12-18 11 36 29

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.

Readme

Keywords

none

Package Sidebar

Install

npm i was-it-helpful

Weekly Downloads

124

Version

1.0.6

License

MIT

Last publish

Collaborators

  • drdaemos