was-it-helpful
Simple Javascript widget based on Vue.js 2.x to gather feedback on knowledge base, guide and similar pages.
Last updated 5 months ago by drdaemos .
MIT · Repository · Bugs · Original npm · Tarball
$ cnpm install was-it-helpful 
SYNC missed versions from official npm registry.

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.

Maintainers (1)
Downloads
Today 0
This Week 0
This Month 7
Last Day 0
Last Week 0
Last Month 21
Dependencies (2)
Dev Dependencies (13)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |