NPS Widgets

With our new Net Promoter Score awards, we give clients the option to:

1) have their name show on our list of awards if they qualified. To qualify you need a Net Promoter Score of at least 70 for the full year and you need at least 60 responses for that year. Use ID102 to share your name on this list. We do not share actual scores. And,

2) If you want to share your actual score and the details, use ID230. This will allow you to have one of the widgets below on your site and/or in a signature block.


If you want the numbers to show as "certified" on your site then you need to use our widget which allows you to display the data on your site but not change it. You can also link to the same data on our site. Clicking the links above show the example on our site for the only customer to get the Perfect Score award for 2019.

You also have the option to show just the logo above on a page on your site and have that link to another page with the full details. Again, a widget is needed to be certified.

 Technical details are below (this documentation is still a work in progress).

Start be asking us for your customer number or see it in the "About" section of our site. This is a three-digit number that is the last three digits in the URL below.

There are three different end points and they have slightly different parameters. 

returns the “full page” widget

It’s the same as what we display on our site at, except without all of the “chrome” surrounding it on our site.

  • The only required parameter is CustomerNumber
  • There’s an optional parameter (true/false) ShowAwards (defaults to true) that can be used to remove the awards images and leave only the ring widget and text.
  • This fragment (it’s not a full HTML page) uses Bootstrap for layout and styling. It is, by far, the most widely used framework, so I started there. If there is another framework in common use on the sites you host for our clients, I can build out a version for that too. There’s an optional parameter (Boolean, defaults to true, frame=false) that controls whether the needed external references are included in the HTML fragment. Bootstrap CSS and JS and the JS for the ring widget. If you turn off the frame parameter, you’ll need to include Bootstrap and Apex Charts (external references  for both are at the bottom of the email). To be clear, the frame parameter doesn’t cause the API to return an iframe, it just controls whether we apply the external references (you’re either placing it inside an iframe, or our external references will not collide with yours; two instances of jquery will be a problem) or, if frame=false, we do not include the external references and you can add them to the page (if not already there)
  • If your site already has Bootstrap (pretty common), then you can turn off the frame parameter and just add the Apex Charts JS file. There is one more optional parameter to control which version of Bootstrap it’s targeting. Not used at all if frame = true, but if you have your own Bootstrap references, you can use bsversion=4 (4 or 3 are the only acceptable values) so that the proper classes will get applied.


returns only the ring widget.

The only two parameters are

  • CustomerNumber (required)
  • and frame (same as above).

This one gets no styling at all, so you’ll need to constrain its size with whatever tag you place it inside of. There is a hard-limit on how small this can get before Apex Charts will just not render it.


returns only the NPS Award image(s)

  • parameters are CustomerNumber (required)
  • count (defaults to 1). If you specify more, it will include all award images for that client, up to the quantity you specify or the total awards they have received.

Awards get ranked first by year (most recent first) and then by level… Perfect Score => Top 10 => World Class Service

  • ContainerClass: optional, a CSS class to be applied to the div tag that wraps each image. This is a CSS class that you define in your site’s stylesheet, but will be added to the image’s container div


    • No “frame” parameter here, it’s just images so no need for Bootstrap or any other libraries.

    No styling here either, so constrain size with the tag you place it inside or with CSS on the class that you pass in.


External libraries that you must include on a page if not using the frame=true parameter:


jQuery                         javascript only

Bootstrap                   javascript and CSS.           Either version 3.X or 4.X

Apex Charts                              javascript only

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk