Follow

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.

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.

World_Class_Service_2.jpgTop_10_Service.jpgA_Perfect_Score_Service.jpg

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 detail below (This documentation is still a work in progress).

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

There are 3 different end points and they have slightly different params.

https://api.ceojuice.com/widgets/nps?customernumber=102 

returns the “full page” widget

it’s the same as what we display on our site at https://www.ceojuice.com/nps/clientawards/102, except without all of the “chrome” surrounding it on our site.

  • The only required param is CustomerNumber
  • There’s an option param (Boolean) 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’s, by far, the most widely used framework, so I started there. If there’s 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 param (Boolean, defaults to true, frame=false) that controls if 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 param, 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 param 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… 2 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 param and just add the Apex Charts js file. There is one more optional param 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.

Award_1.png

https://api.ceojuice.com/widgets/npsring?customernumber=102

returns only the ring widget

the only 2 params 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.

Award_2.png

https://api.ceojuice.com/widgets/npsawards?customernumber=102

returns only the NPS Award image(s)

  • params are CustomerNumber (required)
  • count (defaults to 1). If you specify more, it will include all Award images for that Client, up to the qty you specify or the total Awards they have been awarded.

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

Award_3.pngAward_4.png

    • No “frame” param 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.

A_Perfect_Score_Service.jpg

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

 

jQuery                  https://jquery.com/download/                 javascript only

Bootstrap            https://getbootstrap.com/docs/4.4/getting-started/download/                 javascript and CSS.           Either version 3.X or 4.X

Apex Charts        https://apexcharts.com/                              javascript only

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

0 Comments

Please sign in to leave a comment.
Powered by Zendesk