Visualize Net Promoter Score (NPS) Results Using SurveyJS Dashboard

Net Promoter Score (NPS) is a popular metric used to assess and predict customer loyalty by asking respondents only one question: "On a scale from 0 to 10, how likely are you to recommend our product/service to a friend or colleague?". Respondents who score 9-10 (promoters) will most likely keep buying your product and bring new customers. Respondents scoring 7-8 (passives) are overall satisfied with your product but may switch to your competitors if they come across a more attractive offering. Respondents with a score of 0-6 (detractors) are unhappy with your product and may damage your brand through negative word-of-mouth. To calculate the NPS, subtract the percentage of detractors from that of promoters. This demo shows how to enable a special NPS visualizer in SurveyJS Dashboard.

In SurveyJS, you can use the Rating Scale question type to add an NPS question to your form. A Rating Scale question asks respondents to evaluate a particular characteristic of a product or service on a predefined scale. The scale can display a range of numbers, graphic symbols (stars or emojis), or descriptive terms that represent different degrees of agreement or satisfaction. For more information on how to create an NPS question using the Rating Scale question type, refer to the following demo:

NPS Survey Question

User responses to a Rating Scale question are visualized by a histogram or a gauge chart by default. If you are using the Rating Scale question to collect NPS responses, enable a special NPS visualizer. It displays the calculated NPS score and the number and percentage of promoters, passives, and detractors. Import NpsVisualizer from the "survey-analytics" module and register it as a visualizer for the "rating" question type:

import {
    VisualizationManager,
    NpsVisualizer
} from "survey-analytics";

VisualizationManager.registerVisualizer("rating", NpsVisualizer);

If you want to display only the NPS visualizer, unregister the histogram and gauge:

import {
    VisualizationManager,
    HistogramPlotly,
    GaugePlotly
} from "survey-analytics";

VisualizationManager.unregisterVisualizer("rating", HistogramPlotly);
VisualizationManager.unregisterVisualizer("rating", GaugePlotly);