Developer Documentation

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

You can integrate NPS Hero in multiple ways:

JavaScript integration
Using our npm package
Building your own tool and using the API directly
Use our Questionnaire Link/Landing Page
Send E-Mails by CSV-Contact-List
Trigger a new E-Mail by Webhook

Demo

Explore the live demo of NPS-Hero to see how you can easily collect Net Promoter Scores from your customers. The demo showcases the simple integration process and how the feedback system works in real-time.

Check out the demo pages here:

Demo with NPM Javascript Demo Interactive Guide

Step-by-Step Guides

For several Topics we have prepared step-by-step guides. Please feel free to suggest additional guides if needed.

English: Setup Stripe Integration German: Setup Stripe Integration Request a new guide

Stripe Integration

With NPS-Hero you can automatically send your customers, after a successful purchase, a NPS-Questionnaire. To do so you need to integrate Stripe. Below is an example:

English: Setup Stripe Integration German: Setup Stripe Integration

JavaScript Integration

You can integrate NPS Hero by adding a script tag directly into your HTML file. Below is an example:

<!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://www.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>

Webhook to trigger a new E-Mail

To send a new Request to your Customers, you can send them an E-Mail by the step below. You should be able to trigger webhooks from different systems such as Shopify, WooCommerce and many more. send a POST-Request to the following URL https://www.nps-hero.com/api/v1/webhooks/{questionnaireId}/send-email/ and the payload as follows.

{
     "email":            "input-the-email-address-of-the-customer",  
     "reference":        "your-referenceId",  
     "customIdentifier": "your-customOrUserIdentifier",  
     "questionnaireId":  "{yourQuestionnaireId}"  
}

Below you will find an example for a curl Request to test it.

curl -X POST https://www.nps-hero.com/api/v1/webhooks/{yourQuestionnaireId}/send-email  
                     -H 'Content-Type: application/json'  
                     -H 'Authorization: Bearer yourAPiKey'  
                     -d '{
                          "email":            "input-the-email-address-of-the-customer",  
                          "reference":        "your-referenceId",  
                          "customIdentifier": "your-customOrUserIdentifier",  
                          "questionnaireId":  "yourQuestionnaireId"  
                         }'

Questionnaire Link/Landing Page

Option 1: Anonymous Responses

Just share the link below - all responses will be made anonymously.

https://www.nps-hero.com/rating/{yourQuestionnaireId}/

Option 2: Responses with Customer or User Reference

If you like to share a link with a reference to a specific user or other reference you can simply set the customIdentifier or reference. Below you will find an example link. Please note the parameters should not contain anything else then [A-Z][a-z][0-9] or spaces.

💡

Please replace 'your-customOrUserIdentifier' and 'your-referenceId'. The combination needs to be unique across all submissions. The text should be URL-Encoded. To encode parameters for URLs you can use this site.

https://www.nps-hero.com/rating/{yourQuestionnaireId}/?customIdentifier=your-customOrUserIdentifier&reference=your-referenceId

API Integration

If you prefer building your own tool, you can use the NPS Hero API directly. Check out our Swagger/OpenAPI documentation for details on how to integrate NPS Hero via the API.

OpenAPI/Swagger

npm Package

Alternatively, you can install NPS Hero via npm to integrate it into your React applications:

visit nps-hero on npm

npm install --save nps-hero

Usage Example

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" 
    />
}

Parameters

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

Parameter	Description	Type	Required
customOrUserIdentifier	yourCustomOrUserIdentifier - e.g. the user id	string	xOr
referenceId	yourReferenceId - e.g. the customer id or product name	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

Examples & GitHub Repository

You can find the source code, examples for HTML, React and many more on our Github. Feel free to contribute to the project on GitHub.

https://github.com/dickdoof/nps-hero

License

On this page

→ Start here
→ Demo
→ Step-by-Step Guides
→ Stripe Integration
→ JavaScript Integration
→ Webhook to trigger E-Mail
→ Link/Landing Page
→ API Integration
→ npm Package
→ npm usage Example
→ Examples
→ GitHub Repository
→ License