Follow

ID230 - Push NPS Scores to Site Overview & Sample

Post your NPS Score certified by CEO Juice on your website: 

Jump to: Overview | Sample | Alert Functionality | Variables | Best Practices & Tips |  Related Alerts

Click to Subscribe 

Overview

Overview

Our process ID125 will push your favorite comments to your website. This process is similar except it pushes your Net Promoter Score (NPS). NPS needs to be for a specific period so we currently are showing the calculated NPS score for the last completed 12 months (does not include current month). Let us know if you need more than that. We suggest you use language like below, perhaps with a link to our public scores at www.ceojuice.com/NPS

We also suggest you mention that NPS is a trademark of Satmatrix as we do on our NPS brochure ID470. 

Net Promoter Score (NPS) has become the world standard for measuring customer satisfaction levels. Rather than saying we have the "Best" service we use a 3rd party company to automate follow up messages to our customers including getting feedback and tracking NPS. CEO Juice is an independent A.I. company with an audited process where every step is controlled by them, the numbers cannot be changed even if we show our customer gave us a low score in error. NPS is a scale of -100 to +100 and is based on the single question "How likely are you to recommend us to a friend or colleague." Like revenue or profit, it needs to be for a period of time. The number below is the last complete 12 months.

Run Schedule: N/A - Automatic

Type of Output: Data Push

 

*  *  *

Sample

Sample

https://www.ceojuice.com/nps/ceojuice

NPSStream.PNG

 

*  *  *

Alert Functionality

Alert Functionality

Your website developer will need to set up for you, but first you will need to retrieve your CEO Juice Customer Number and API Code. Then you and your web developer can decide on data-only feed or use our widget

Both require two parameters:
1. Your CEO Juice Customer Number

2. Your CEO Juice API Code

Feel free to reach out to help@ceojuice.com for these or you can find on our website:  https://www.ceojuice.com/CustomerAdmin/AccountDetails (login permissions required)

Account_Details.png

See below Best Practices & Tips for further details for your website developer.

 

*  *  *

Variables

Variables

This alert has no variables

 

*  *  *

Best Practices & Tips (for your website developer)

Best Practices & Tips (for your website developer)

Below are guidelines for two set up options: Data Only Feed and Widget

Two options:

https://api.ceojuice.com/widgets/nps is the widget w/ a prebuilt UI

Data ONLY feed:

Data ONLY feed:
Our API has Swagger documentation at https://api.ceojuice.com

API1.png

Select 'Try it out':

API2.png

Enter your

(1) CEO Juice Customer and (2) Authorization Key and then Execute:

API3.png

Code examples:

These show how to get the data (not how to format/display it). Javascript (using JQuery, but other js libraries are very similar).  Both examples do the same thing, just demonstrating how to pass the parameters either on the query string or as header values:

(screenshots below show old URL-would be like: https://api.ceojuice.com/api/Processes/NPS?CustomerNumber=YourCustomerNumberHere&AuthKey=YourAuthKeyHere')

Code1.PNG

OR

Code2.PNG

C#: Windows Forms or ASP.NET

Code3.PNG

PHP:

<?php

$posts = file_get_contents('https://api.ceojuice.com/api/Processes/NPS?CustomerNumber=YourCustomerNumberHere&AuthKey=YourAuthKeyHere');

// do something w/ $posts here....

echo $posts;

?>

 

Widget:

Widget:

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

 

1. returns the “full page” widget

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

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 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 we started there. If there is another framework in common use on the sites you host for our clients, we 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.

mceclip0.png

 

2. returns only the ring widget.

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

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.

2.PNG

3. returns only the NPS Award image(s)

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

  • 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

3.PNG

 

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

4.PNG

 

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

 

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

 

 

Two options - iframe or javascript

1. iframe: just add an iframe tag and point its source at the widget URL

1.png
This is the easy option, but maybe a little harder to style and make it really blend onto your website well and will look like this:
**The white box in the middle is rendered by CEO Juice, but everything around it is from your website**
W5.PNG
OR
2. load the widget's html into another tag on your site:
This is more complicated, but has more styling options and ONLY works for clients using Bootstrap to style their site (it's the widest used framework, by far).
Expects a couple of other parameters:
frame=false (defaults to true). If you forget this param and do not place it in a frame, then our markup will include jquery and Bootstrap. If you already have either on your site, everything will break.
bsVersion=4 (options are 3 and 4, defaults to 4) should match the version of BootStrap you use on your site. 
You will also need to add a link to ApexCharts (unless already in use on your site) <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
If you do not use use Bootstrap or JQuery on your site, you still use this as long as you're willing to include those two plugins on this one page. You can add links just like the one for ApexCharts to include JQuery and Bootstrap.
In this example, we've just used javascript to retrieve the widget markup and plugged it into another tag - added a tag (div, in this case) with an ID of "juice",... tag type and ID are arbitrary.
The the jquery javascript code gets the html markup for the widget and sets the juice tag's content using that markup.
2.png
W4.PNG

 

 *  *  *

Related Alerts

Related Alerts

ID102 - Share company details for NPS Awards

ID125 - Push Favorite Survey Comments to your website

 

*  *  * 

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