Nps-hero NPM | npm.io

nps-hero

NPS Hero provides quick and easy nps score collection - check our website www.nps-hero.com for more details

Install

npm install --save nps-hero

Demo Implementations

Demo Page

Check one of our demo pages below:

plain Html example

Working PlainHtml
Code PlainHtml

reactJs

React Code Example

Usage

get the npsHeroApiKey, npsHeroCustomerId and npsHeroQuestionnaireId from the nps-hero.com dashboard.

ReactJs

import React from 'react'

import NPSInput from 'nps-hero';
import "nps-hero/dist/styles.css";

const App = () => {

    return <NPSInput
                     customOrUserIdentifier={"yourCustomOrUserIdentifier - e.g. the user id"}
                     referenceId="yourReferenceId - e.g. the customer id or productname"
                     npsHeroApiKey="npsHeroApiKey"
                     npsHeroCustomerId="npsHeroCustomerId"
                     npsHeroQuestionnaireId="npsheroQuestionnaireId" 
    />
}

Plain Html

if you prefer using plain html, you can include the script tag in the head of your html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Page with NPS</title>

  <script src="https://nps-hero.com/js/nps-widget.js"
          data-nps-hero-customer-id="npsHeroCustomerId"
          data-questionnaire-id="npsheroQuestionnaireId"
          data-reference-id="your-referenceId"
          data-customer-or-user-identifier="your-customOrUserIdentifier"
          data-nps-hero-api-key="npsHeroApiKey"
          async></script>
</head>
<body>
<h1>Example of NPS-Hero</h1>
<p>Included by javaScript Tag in the Head</p>
</body>
</html>

Parameter

💡 Important: you either need to set the 'customOrUserIdentifier' or the 'referenceId' parameter, you can also use both. At least one is required.

Here is the parameter list:

Parameter	Description	Type	Required
customOrUserIdentifier	yourCustomOrUserIdentifier - e.g. the user id	string	xOr
referenceId	yourReferenceId - e.g. the customer id or productname	string	xOr
npsHeroApiKey	npsHeroApiKey	string	true
npsHeroCustomerId	npsHeroCustomerId	string	true
npsHeroQuestionnaireId	yourQuestionnaireId	string	true
loadDataDynamically	if true the texts, etc will be loaded dynamically, otherwise define with the param*-Fields	boolean	false
paramMessage	the message to be displayed	string	false
paramSuccessMessage	the success message to be displayed after the rating has been given if the rating is above the threshold	string	false
paramPlaceHolderText	the placeholder text for the input field, shown if the rating is below the threshold	string	false
parmFeedbackHeader	the header text for the feedback section, shown if the rating is below the threshold	string	false
paramScoreThresholdForFeedback	the threshold for the feedback section to be shown, default is 7	number	false