Simple NPS

The simplest Net Promoter Score (NPS).
Built with Svelte. Compiles to a single JavaScript file. Data is sent to your own Google Analytics account.

📦 Single Script Deployment

A single JS file with 0 additional dependencies

⚡ Lightweight

Minimal footprint, fast loading

🌐 Internationalization

Configurable text in multiple languages

📊 Google Analytics

Results are sent directly to your Google Analytics

🎨 Customizable Theme

Colors, styling, and branding options

📱 Responsive Design

Works on desktop and mobile

Try Demo/playground

Quick Start

1. set the config

<script>
  window.simpleNpsConfig = { gaId : "G-123123123" };
</script>

2. add the script

<script src="https://cdn.jsdelivr.net/npm/simple-nps@0.0.5/dist/simple-nps.js"></script>

Customization

Configure text, colors, and behavior through the global config object.

<script>
  window.simpleNpsConfig = {
    storageKey: 'nps_survey_completed',
    i18n: {
      en: {
        intro: "How likely are you to recommend us?",
        notLikely: "Not likely",
        extremelyLikely: "Extremely likely",
        submitBtn: "Submit",

        thankYou: "Thank you for your feedback!",

        followUp: "Could you tell us why?",
        followUpPlaceholder: "Your feedback helps us improve...",
        followUpSubmit: "Submit feedback",
        followUpSkip: "Skip",

        close: "Close"
      }
    },
    language: 'en',
    theme: {
      primaryColor: '#007bff',
      backgroundColor: '#ffffff',
      textColor: '#333333',
      borderRadius: '8px'
    },
    showFollowUp: false,
    delay: 1000,
    thankYouDuration: 1500
  };
</script>

Add an optional custom entry point.

<div id="simple-nps"></div>

Data Collection

Data is sent to your Google Analytics account using the gtag event tracking. Events include:

  • nps_score: When user submits rating (0-10)
  • nps_feedback: When user submits follow-up text, includes the NPS rating
  • nps_dismissed: When user closes the form without submitting feedback

Scores are automatically categorized:

  • Detractors: 0-6 (Red)
  • Passives: 7-8 (Yellow/Orange)
  • Promoters: 9-10 (Green)

You can view the collected data in your Google Analytics dashboard under the "Events" section.