ADDING CUSTOM LABELS TO THE NET PROMOTER SYSTEM QUESTION TYPE | Experience Community
Skip to main content
Solved

ADDING CUSTOM LABELS TO THE NET PROMOTER SYSTEM QUESTION TYPE

  • May 27, 2025
  • 4 replies
  • 89 views
A
Level 2 ●●
Forum|alt.badge.img+1

I want to add custom labels to the NPS question type. I want the scale 0-6 to carry the individual labels "NO", 7-8 the labels "Maybe" and 9-10 the labels "Yes"

 

Best answer by Tom_1842

The below is working okay for me:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

    var qContainer = this.getQuestionContainer();

    // Hide the existing ColumnLabels row
    var columnLabelsRow = qContainer.querySelector("tr .ColumnLabels");
    if (columnLabelsRow) {
        columnLabelsRow.parentElement.style.display = "none";
    }

    // Create a new row for the labels
    var labelRow = document.createElement("tr");
    labelRow.className = "nps-top-labels";

    // Define labels
    var labels = [
        "No", "No", "No", "No", "No", "No", "No", "Maybe", "Maybe", "Yes", "Yes"
    ];

    // Create and append <th> to the new row
    labels.forEach(function(labelText) {
        var th = document.createElement("th");
        th.style.textAlign = "center";
        th.style.width = "9.09%";
        th.innerText = labelText;
        labelRow.appendChild(th);
    });

    // Insert the new row before the buttons row
    var table = qContainer.querySelector("table tbody");
    if (table && table.children.length > 1) {
        table.insertBefore(labelRow, table.children[1]);
    }

});

However, it doesn't look the greatest on Mobile, and fitting 11 labels horizontally on a mobile screen might be tough. You could change the above code to only add the labels for screens above a certain width, or change the label values/font-size for screens below a certain width.

      4 replies

      O
      QPN Level 5 ●●●●●
      Forum|alt.badge.img+21
      • omkarkewat
      • QPN Level 5 ●●●●●
      • June 1, 2025

      Hey ​@Adedamola 

      Please try the below code in your NPS question javascript.

      Qualtrics.SurveyEngine.addOnReady(function() {
          // Change 'Not at all likely' to 'NO' in elements with class 'ColumnLabel First'
          var firstElements = document.querySelectorAll('.ColumnLabel.First');
          firstElements.forEach(function(el) {
              if(el.textContent.trim() === "Not at all likely") {
                  el.textContent = "NO";
              }
          });

          // Change 'Neutral' to 'Maybe' in elements with class 'ColumnLabel Center'
          var centerElements = document.querySelectorAll('.ColumnLabel.Center');
          centerElements.forEach(function(el) {
              if(el.textContent.trim() === "Neutral") {
                  el.textContent = "Maybe";
              }
          });

          // Change 'Extremely Likely' to 'Yes' in elements with class 'ColumnLabel Last'
          var lastElements = document.querySelectorAll('.ColumnLabel.Last');
          lastElements.forEach(function(el) {
              if(el.textContent.trim() === "Extremely Likely") {
                  el.textContent = "Yes";
              }
          });
      });

      END!

      A
      Level 2 ●●
      Forum|alt.badge.img+1
      • Adedamola
      • Author
      • Level 2 ●●
      • June 2, 2025

      Hello ​@omkarkewat 

       

      Thank you for the help. However, what I want to achieve can be seen in the image sample below. I want mine to look same way. 

      Please see the attached image

       

      Tom_1842
      Level 8 ●●●●●●●●
      Forum|alt.badge.img+28
      • Tom_1842
      • Level 8 ●●●●●●●●
      • Answer
      • June 2, 2025

      The below is working okay for me:

      Qualtrics.SurveyEngine.addOnReady(function()
      {
      	/*Place your JavaScript here to run when the page is fully displayed*/

          var qContainer = this.getQuestionContainer();

          // Hide the existing ColumnLabels row
          var columnLabelsRow = qContainer.querySelector("tr .ColumnLabels");
          if (columnLabelsRow) {
              columnLabelsRow.parentElement.style.display = "none";
          }

          // Create a new row for the labels
          var labelRow = document.createElement("tr");
          labelRow.className = "nps-top-labels";

          // Define labels
          var labels = [
              "No", "No", "No", "No", "No", "No", "No", "Maybe", "Maybe", "Yes", "Yes"
          ];

          // Create and append <th> to the new row
          labels.forEach(function(labelText) {
              var th = document.createElement("th");
              th.style.textAlign = "center";
              th.style.width = "9.09%";
              th.innerText = labelText;
              labelRow.appendChild(th);
          });

          // Insert the new row before the buttons row
          var table = qContainer.querySelector("table tbody");
          if (table && table.children.length > 1) {
              table.insertBefore(labelRow, table.children[1]);
          }

      });

      However, it doesn't look the greatest on Mobile, and fitting 11 labels horizontally on a mobile screen might be tough. You could change the above code to only add the labels for screens above a certain width, or change the label values/font-size for screens below a certain width.

      A
      Level 2 ●●
      Forum|alt.badge.img+1
      • Adedamola
      • Author
      • Level 2 ●●
      • June 2, 2025

      Thank you so much ​@Tom_1842  this works perfectly. I will adjust to fit all screen size as advised.

      Thank you so much

      Terms & ConditionsAccessibility statement