nps-hero
v1.1.0
Published
NPS Hero provides quick and easy nps score collection - check our website www.nps-hero.com for more details
Downloads
704
Maintainers
d-automationReadme
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-heroDemo Implementations
Check one of our demo pages below:
plain Html example
reactJs
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 |