Was This Helpful?

was-this-helpful is a Stencil.js web component that gives you a simple "Was this helpful?" form. It also allows you send the data any where you want ✨.

See Demo

Features

• Easily ask a 👍 or 👎 question.
• Send the event data where ever you want. For example, you can send to your own endpoint, Heap.io, Google Analytics, etc.

Quickstart

<!-- Load the snippet. -->
<script src='<script type="module"src='https://unpkg.com/[email protected]/dist/was-this-helpful/was-this-helpful.esm.js'></script>'></script>

<!-- Place the component where you want it. -->
<was-this-helpful></was-this-helpful>

<script>
  const wasThisHelpful = document.querySelector('was-this-helpful');
  
  wasThisHelpful.addEventListener('everything', event => {
    
    console.log("An event was triggered:")
    console.log(JSON.stringify(event.detail, undefined, 2));
    console.log('Now, in JS, you can send the event where ever you want. 🤘')

  });
</script>

Events

The component fires the following events:

• response - when the user selects 👍 or 👎.
• feedback - when the user selects a feedback radio input.
• additional-feedback - when the users submits custom feedback text.
• everything- when any of the following events above are triggered.

Each event will be triggered separately. You can associate them with the session property.

Event Data

Here is the format of the event data:

{
  "time": 1624817229990,
  "session": "ae678693-fa67-473e-86d6-e7d62cca72b8",
  "event": "response",
  "data": "thumbs-up",
  "location": {
    "href": "http://localhost:3333/",
    "path": "/",
    "hostname": "localhost"
  }
}

Handling Events

<script>
  const wasThisHelpful = document.querySelector('was-this-helpful');
  wasThisHelpful.addEventListener('everything', event => {
    console.log("An event was triggered:")
    console.log(JSON.stringify(event.detail, undefined, 2));

    console.log('Now, in JS, you can send the event where ever you want. 🤘')
  });
</script>

Feedback Styles

The component can capture feedback in different ways. It can be controlled with an attribute called feedback-style.

• none (default) - This style is just the response. That's it.
• options (recommended) - After the user response, they will be presented radio options for additional input.
• form - After the user response, they will be presented with a text area for additional input.
• other - After the user response, they will be presented radio options for additional input with an additional option "Other". If the user selects other, they will be presented with a text area to provide more information.
• options is recommended because it's less work for the user and still provides you more "why" information. They can select response, and option, and that's it.

Installation

There are three strategies for using this components:

Script tag

Place the following script tag in the head of your index.html:

<script src='<script type="module"src='https://unpkg.com/[email protected]/dist/was-this-helpful/was-this-helpful.esm.js'></script>'></script>

Then you can use the element anywhere in your template, JSX, html etc

Node Modules

1. Run the following command using NPM or Yarn:

npm install was-this-helpful --save

2. Place a script tag in the head of your index.html

<script src='node_modules/was-this-helpful/dist/was-this-helpfu.esm.js'></script>

In a app, MDX, etc.

1. Run the following command using NPM or Yarn:

npm install was-this-helpful --save

2. Add an import:

import was-this-helpful;

After doing one of these, you can use the element anywhere in your template, JSX, html etc

API

The component exposes the following options:

• question - string - change the name of the main question.
• icon-style - string - change icon style. The icons are from Heroicons. Here are the options:
  • thumbs (default)
  • emoji
• feedback-style - string - update the Feedback Style. Here are the options:
  • none (default)
  • options
  • form
  • other
• feedback-question - string - change the name of the feedback question.
• done-text - update the text the user sees when done giving feedback.
• session - label the user's session.
• feedback-style - change how the component gets feedback.
• happy-feedback - if using options or other, you can provide a comma delineated list of options if the user submits positive feedback.
  ex. 'Easy to understand, Solved my problem'
• sad-feedback - if using options or other, you can provide a comma delineated list of options if the user submits negative feedback.
  ex. 'Hard to understand, Incorrect information or sample code, Missing the information/samples I need'

Example:

<was-this-helpful 
  question="Am I awesome?"
  icon-style="emoji"
  feedback-question="Do you have anything left to say?"
  done-text="Have a beautiful day!"
></was-this-helpful>

Styling

When styling the component, here are the following CSS Variables you can set:

• --was-this-helpful-main-color
• --was-this-helpful-font-family

Example with Dark Mode 🕶️:

<style>
  body {
    background-color: black;
  }

  was-this-helpful {
    --was-this-helpful-main-color: #D1D5DB;
    --was-this-helpful-font-family: 'Inter', sans-serif;
  }

  @media screen and (prefers-color-scheme: light) {
    body {
      background-color: white;
    }

    was-this-helpful {
      --was-this-helpful-main-color: #4338CA;
    }
  }

</style>

Future Things:

• [x] Thumbs and Emojis
• [x] Dark Mode
• [ ] Usage in React, Vue
• [ ] Build more Examples
  • [ ] Google Analytics
  • [ ] MixPanel
  • [ ] Meroxa
• [ ] Testing 🙃
• [ ] Browser Testing
• [ ] The user can customize icons
• [ ] Different Styles
  • [ ] In line: Was the helpful 👍 👎?