NPS Hero provides quick and easy nps score collection - check our website www.nps-hero.com for more details
npm install --save nps-heroCheck one of our demo pages below:
get the npsHeroApiKey, npsHeroCustomerId and npsHeroQuestionnaireId from the nps-hero.com dashboard.
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"
/>
}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>💡 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 |