Search through more than a hundred articles on every aspect of User.com

Dawid Stojan
Written by Dawid Stojan

NPS survey pop-up guide

Get a sense of your customers' satisfaction level with a Net Prompter Score survey


1. Go to "Settings' -> "App settings" -> "User Data&Events" -> "Client attributes" and click "Create".

2. You need one custom attribute: NPS rating.

In this example, NPS rating will have the Value Type set as integer. (The form will have rating values of 0, 1, 2 ...10.)

3. You need a HTML list with all your ratings: similar to this:

<div class="rating">
  <ul class="rating-list">
    <li>
      <input type="radio" id="rating_0" name="nps_rating" value="0"/>
      <label for="rating_0">0</label>
    </li>
    <li>
      <input type="radio" id="rating_1" name="nps_rating" value="1"/>
      <label for="rating_1">1</label>
    </li>
    <li>
      <input type="radio" id="rating_2" name="nps_rating" value="2"/>
      <label for="rating_2">2</label>
    </li>
    <li>
      <input type="radio" id="rating_3" name="nps_rating" value="3"/>
      <label for="rating_3">3</label>
    </li>
    <li>
      <input type="radio" id="rating_4" name="nps_rating" value="4"/>
      <label for="rating_4">4</label>
    </li>
    <li>
      <input type="radio" id="rating_5" name="nps_rating" value="5"/>
      <label for="rating_5">5</label>
    </li>
    <li>
      <input type="radio" id="rating_6" name="nps_rating" value="6"/>
      <label for="rating_6">6</label>
    </li>
    <li>
      <input type="radio" id="rating_7" name="nps_rating" value="7"/>
      <label for="rating_7">7</label>
    </li>
    <li>
      <input type="radio" id="rating_8" name="nps_rating" value="8"/>
      <label for="rating_8">8</label>
    </li>
    <li>
      <input type="radio" id="rating_9" name="nps_rating" value="9"/>
      <label for="rating_9">9</label>
    </li>
    <li>
      <input type="radio" id="rating_10" name="nps_rating" value="10"/>
      <label for="rating_10">10</label>
    </li>
  </ul>
</div>

4. Now, go to "Form code editor": Tools > Pop-ups > Create new > Form code editor.

5. Paste the HTML list code into the editor. Before the final </div> closing, insert your custom NPS rating attribute. Add display: "none style" to it since it will only be holding your real value for this attribute, and we are using radio inputs shown above to get the rating.

...
    </li>
  </ul>
  

 <input type="hidden" name="REPLACE_WITH_YOUR_ATTRIBUTE_NAME">

</div>
...

6. Add script handling update of your hidden attribute.

<script>const ratingInputs = document.querySelectorAll('[name="nps_rating"]');
  for (var input of ratingInputs) {
    input.addEventListener('change', function (e) {
  ´╗┐document.querySelector('input[name="REPLACE_WITH_YOUR_ATTRIBUTE_NAME"]').value = e.target.value;
    });
  }
</script>

7. Bear in mind that you have to change the bold text according to the inserted attribute name. To do so, first insert a field by clicking on Insert button like this:

After this a field will be inserted, looking like this

It is very important to leave the field but to comment it out (using <!-- and --> tags) so it looks like this:

<!--
 [:attr_nps_rating_788 class="ue_input"] 
-->

Text after ":" and before "class" is your attribute name (in this case it's "attr_nps_rating_788"). Replace "REPLACE_WITH_YOUR_ATTRIBUTE_NAME" with it. The result should look like this:

8. Add some style, a submit button, a cancel button and a heading, and thats it!

<style>
  .form {
    max-width: 600px;
    margin: 30px;
    font-family: Arial, sans-serif;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 1rem;
  }

  .rating {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .rating h2 {
    margin-top: 0;
  }

  .rating ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
  }

  @media (max-width: 660px) {
    .rating ul {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .rating ul li label {
      margin: 0 10px 10px 0;
    }
  }

  .rating ul li {
    display: inline-flex;
  }

  .rating ul li input {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
    margin: 0;
  }

  .rating ul li label {
    height: 46px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #2db039;
    background-color: #ffffff;
    font-size: 18px;
    color: #414042;
    text-decoration: none;
    user-select: none;
  }

  .rating ul li input[type="radio"]:checked + label {
    background-color: #35d144;
    color: #ffffff;
  }

  .rating ul li label:hover {
    background-color: #2db039;
    color: #ffffff;
  }

  button {
    border: 0;
    padding: 0.7em 2em;
    font-size: 1rem;
    background-color: #8d8d8d;
    color: white;
    margin: 1rem 0 0;
  }

  button[type="submit"] {
    background-color: #1b5e20;
    color: white;
  }
</style>

9. Save!


Here's the result followed by the final code:

<div class="form"><div class="rating"><h2>NPS Rating</h2><ul class="rating-list"><li><input type="radio" id="rating_0" name="nps_rating" value="0"/><label for="rating_0">0</label></li><li><input type="radio" id="rating_1" name="nps_rating" value="1"/><label for="rating_1">1</label></li><li><input type="radio" id="rating_2" name="nps_rating" value="2"/><label for="rating_2">2</label></li><li><input type="radio" id="rating_3" name="nps_rating" value="3"/><label for="rating_3">3</label></li><li><input type="radio" id="rating_4" name="nps_rating" value="4"/><label for="rating_4">4</label></li><li><input type="radio" id="rating_5" name="nps_rating" value="5"/><label for="rating_5">5</label></li><li><input type="radio" id="rating_6" name="nps_rating" value="6"/><label for="rating_6">6</label></li><li><input type="radio" id="rating_7" name="nps_rating" value="7"/><label for="rating_7">7</label></li><li><input type="radio" id="rating_8" name="nps_rating" value="8"/><label for="rating_8">8</label></li><li><input type="radio" id="rating_9" name="nps_rating" value="9"/><label for="rating_9">9</label></li><li><input type="radio" id="rating_10" name="nps_rating" value="10"/><label for="rating_10">10</label></li></ul>
<!--
 [:nps_rating class="ue_input"] 
--><input type="hidden" name="nps_rating"></div>

  <button data-dismiss="true">Cancel</button><button type="submit">Submit</button>
</div>

<script>const ratingInputs = document.querySelectorAll('[name="nps_rating"]');
  for (var input of ratingInputs) {
    input.addEventListener('change', function (e) {
  ´╗┐document.querySelector('input[name="nps_rating"]').value = e.target.value;
    });
  }
</script>

<style>
  .form {
    max-width: 600px;
    margin: 30px;
    font-family: Arial, sans-serif;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 1rem;
  }

  .rating {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .rating h2 {
    margin-top: 0;
  }

  .rating ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
  }

  @media (max-width: 660px) {
    .rating ul {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .rating ul li label {
      margin: 0 10px 10px 0;
    }
  }

  .rating ul li {
    display: inline-flex;
  }

  .rating ul li input {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
    margin: 0;
  }

  .rating ul li label {
    height: 46px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #2db039;
    background-color: #ffffff;
    font-size: 18px;
    color: #414042;
    text-decoration: none;
    user-select: none;
  }

  .rating ul li input[type="radio"]:checked + label {
    background-color: #35d144;
    color: #ffffff;
  }

  .rating ul li label:hover {
    background-color: #2db039;
    color: #ffffff;
  }

  button {
    border: 0;
    padding: 0.7em 2em;
    font-size: 1rem;
    background-color: #8d8d8d;
    color: white;
    margin: 1rem 0 0;
  }

  button[type="submit"] {
    background-color: #1b5e20;
    color: white;
  }
</style>
Categories: