# was-it-helpful

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

Latest version **1.0.6** (published 2017-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install was-it-helpful
pnpm add was-it-helpful
yarn add was-it-helpful
bun add was-it-helpful
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2017-12-18 |
| First published | 2017-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Eugene Dementjev |
| Maintainers | drdaemos |

## Links

- npm: https://www.npmjs.com/package/was-it-helpful
- Repository: https://github.com/drdaemos/was-it-helpful-widget
- Homepage: https://github.com/drdaemos/was-it-helpful-widget#readme
- Issues: https://github.com/drdaemos/was-it-helpful-widget/issues
- npm.io page: https://npm.io/package/was-it-helpful

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.4.4
- [base64-image-loader](https://npm.io/package/base64-image-loader.md) ^1.2.1

## Recent versions

- 1.0.6 (latest) — 2017-12-18
- 1.0.5 — 2017-12-13
- 1.0.4 — 2017-12-13
- 1.0.3 — 2017-12-13
- 1.0.2 — 2017-12-13
- 1.0.1 — 2017-12-13
- 1.0.0 — 2017-12-13

## README

# was-it-helpful

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

<img width="770" alt="2017-12-18 11 34 33" src="https://user-images.githubusercontent.com/1313693/34094690-ad6a4a02-e3e7-11e7-809b-2cd7e32a7f66.png">

<img width="768" alt="2017-12-18 11 36 29" src="https://user-images.githubusercontent.com/1313693/34094703-c180985c-e3e7-11e7-8254-14e60cd1fa64.png">

## Usage

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

``` html
<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: <ul><li>`helpful` field contains boolean Yes\No answer</li><li>`message` contains optional feedback message</li> |

## Build Setup

``` bash
# 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](http://vuejs.github.io/vue-loader).

---
_Source: https://npm.io/package/was-it-helpful · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._