How to Setup an NPS Tool to Gain Insights with NPS

Net Promoter Score (NPS) tools are invaluable for understanding customer satisfaction and loyalty. Setting up an NPS tool might sound daunting, but with the right guide, it can be a seamless process. In this article, we’ll walk you through how to set up an NPS tool using NPS Hero.

Why use an NPS Tool?

An NPS tool helps businesses:

Measure Customer Satisfaction: By asking a simple question like “How likely are you to recommend us?”

Identify Promoters and Detractors: Gain insights into who loves your brand and who needs better engagement.

Improve Retention: Use feedback to address concerns and enhance customer experience.

NPS Hero simplifies this process with its easy integration options and actionable insights.

Set up your NPS survey today!

Get started with NPS-Hero’s free trial and create an NPS survey on your website. Discover how likely your customers are to recommend you, and take actionable steps to enhance their experience – and your business results.

Step-by-Step Guide to Setting Up an NPS Tool

1. JavaScript Integration

One of the simplest ways to integrate NPS Hero is through a script tag in your HTML file. Here’s how:

<!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>

This setup ensures the NPS widget is live on your webpage, ready to collect valuable customer feedback. Ensure that your data-* attributes are correctly populated with unique identifiers to capture accurate results.

Adding this snippet to your site will only take a few minutes, making it a quick and efficient way to start collecting feedback from your customers.

2. Triggering Emails via Webhooks

To send survey requests automatically by E-Mail you can use webhooks. Follow these steps:

API Endpoint:

https://www.nps-hero.com/api/v1/webhooks/{questionnaireId}/send-email/

Payload Example:

{
  "email": "customer@example.com",
  "reference": "unique-reference-id",
  "customIdentifier": "user-identifier",
  "questionnaireId": "yourQuestionnaireId"
}

And the corresponding cURL command:

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": "customer@example.com",
          "reference": "unique-reference-id",
          "customIdentifier": "user-identifier",
          "questionnaireId": "yourQuestionnaireId"
         }'

This method automates survey distribution, ensuring timely feedback collection. You can integrate these webhooks into various systems, such as Shopify or WooCommerce, for seamless operation.

3. Sharing Questionnaire Links

Instead of long setups you can also just share a link to a landing page with your customers to collect feedback:

Option 1: Anonymous Responses

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

This option is ideal if you’re looking to collect general feedback without identifying specific users.

Responses with Reference:

For detailed insights, include identifiers in the URL:

https://www.nps-hero.com/rating/{yourQuestionnaireId}/
?customIdentifier=user-id&reference=unique-id

Make sure to URL-encode parameters to avoid errors. This approach allows you to track feedback based on specific customer interactions, products, or services, providing more actionable insights.

4. API Integration

For advanced use cases, directly integrate with the NPS Hero API. This allows you to:

Fetch survey results programmatically

Customize the flow based on your application’s needs

Detailed documentation is available at Swagger/OpenAPI documentation for more details.

Integrating through APIs ensures scalability and offers flexibility for businesses with unique requirements.

5. Using the NPM Package

For developers using React, NPS Hero offers an npm package:

Installation:

npm install --save nps-hero

Example usage

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

const App = () => {
    return (
        <NPSInput
            customOrUserIdentifier="user-id"
            referenceId="product-id"
            npsHeroApiKey="api-key"
            npsHeroCustomerId="customer-id"
            npsHeroQuestionnaireId="questionnaire-id"
        />
    );
};

This React component simplifies the integration process, enabling developers to embed the NPS tool into their applications effortlessly.

Tips for Gaining Insights with NPS

Customize Questions: Tailor questions to your business goals to gather more relevant feedback.

Follow Up on Feedback: Address concerns raised by detractors promptly. Reach out to them via email or phone to understand their issues better.

Analyze Trends: Regularly review scores to track improvement over time. Look for patterns and identify areas for improvement.

Encourage Promoters: Engage with your promoters and ask them to leave reviews or testimonials, amplifying their positive feedback.

By acting on these tips, you can turn NPS data into meaningful actions that improve customer experience.