Forums/Documentation/Reporting and performance

Displaying satisfaction ratings totals and an overall score

Jake Holman
posted this on September 28, 2011 17:02

You can display satisfaction ratings in the Help Center or the Web portal. This lets you show quick statistics based on your last 100 satisfaction ratings. The following data is shown:
  • Number of positive ratings
  • Number of negative ratings
  • Overall score (percentage of good ratings)

The numbers are based on your last 100 ratings, so it's a sliding window that is recalculated every time you receive a rating. The appearance and wording is customizable.

Getting the code for the ratings box

You add the ratings box by pasting a code snippet into the HTML of a page or template. You must be an admin to get the code.

  1. Click the Admin icon () in the sidebar, then select Customers.
    Zendesk Classic: Select Settings > End-users.
  2. Click the Satisfaction tab.
  3. Make sure that Allow customers to rate tickets is selected and that you have at least 100 ratings.

    If you don't have at least 100 ratings, you'll see the following message. In that case you have to wait until you get more ratings to use the ratings box.

  4. Select Allow me to display public satisfaction statistics.
  5. Click Save Tab.

    The page updates with more information, including statistics based on your last 100 customer satisfaction ratings.

  6. Under How do I use it, copy all the HTML code in the box. You'll only see this HTML code if you if have 100 or more satisfaction ratings.

Adding the ratings box in the Help Center

Help Center managers can add the ratings box to articles or to the home page of the Help Center.

To add the ratings box to the home page of your Help Center

  1. In the Help Center, click Customize design in the tools panel.
  2. Click Edit Theme.
  3. Select the home page template from the HTML menu in the Theme editor.
  4. Paste the code for the ratings box in the template.
  5. Click Preview to preview the effect of your changes on the page.
  6. Click Save at the top of the sidebar.

To add the ratings box to an article in the Help Center

  1. Click General Settings in the Help Center tools panel and make sure the Display Unsafe Content setting is enabled. In this case, you want to allow unsafe content like script tags.
  2. Back in the Help Center, navigate to the page where you want the ratings box to appear.
  3. Open the page in the editor by clicking Edit this article in the tools panel.
  4. Switch to the HTML editor by clicking Show HTML on the editor's toolbar.
  5. Paste the code for the ratings box in the page and click Update.

The ratings box appears wherever you paste the code. If you want to customize the wording, the CSS, or place the box in a specific element on the page, see Customizing the ratings box below.

Adding the ratings box in the Web portal (Zendesk Classic)

Administrators can add the ratings box to articles in the Web portal.

Embedding the ratings box is similar to adding the Zendesk Feedback Tab to your Zendesk (see Setting up your Feedback Tab channel). The box is a piece of JavaScript and CSS that you place on a web page.

To add the ratings box in the Web portal
  1. In the Web portal, navigate to the page where you want the ratings box to appear.
  2. Open the page in the editor by clicking Edit in the upper-right side of the page.
  3. Switch to the HTML editor by clicking Edit HTML Source on the toolbar.
  4. Paste the code for the ratings box in the page and click Update.

    The ratings box appears wherever you paste the code. If you want to customize the wording, the CSS, or place the box in a specific element on the page, see the next section.

Customizing the ratings box

You can customize the satisfaction ratings box by changing the wording, changing the look, or setting where it appears on the page.

Customizing the wording

If you don't like the default wording that appears under the three numbers in the ratings box, you can change it. In the ratings box code, look for the following values:

Satisfaction.show({
    strings: {
      goodRatings:      "Said good",
      badRatings:       "Weren't so sure",
      score:            "Overall happiness",
      zendeskPlug:      "Powered by <a href=\"http://www.zendesk.com/\">Zendesk</a>"
    }
});

You can edit the values in quotes.

Customizing the look

The code you pasted into your HTML imports a CSS stylesheet:

 @import url(https://support.zendesk.com/stylesheets/public_satisfaction.css);
You have two options for customizing the look of the ratings box:
  • Add your own CSS to the page where you put the ratings box, overwriting the CSS styles defined in the Zendesk stylesheet.
  • Write your own CSS from scratch, host the file on a public web server, and import the stylesheet by modifying the URL in the import command in the pasted code.
In either case, you'll need to know what elements to target with your CSS. The pasted code renders the following markup:
<div class="zd_satisfaction">
    <div class="zd_satisfaction_good">
        <p class="zd_rating_number">number</p>
        <p class="zd_rating_string">Said good</p>
    </div>
    <div class="zd_satisfaction_bad">
        <p class="zd_rating_number">number</p>
        <p class="zd_rating_string">Weren't so sure</p>
    </div>
    <div class="zd_satisfaction_score">
        <p class="zd_rating_number">number%</p>
        <p class="zd_rating_string">Overall happiness</p>
    </div>
</div>
<div class="zd_plug">Powered by <a href="http://www.zendesk.com/">Zendesk</a></div>

This should help you target the right elements with your CSS.

Setting where the ratings box appears

By default, the ratings box appears on the page where you placed it in your HTML. However, you can specify the ID of an element on the page (a div tag for example) where you'd like the code to be inserted.

Specify the ID as a value of the element property in the pasted code (in bold below):

Satisfaction.show({
  strings: {
    goodRatings:      "Said good",
    badRatings:       "Weren't so sure",
    score:            "Overall happiness",
    zendeskPlug:      "Powered by <a href='http://www.zendesk.com/'>Zendesk</a>"
  },
  element: 'elementID'
});

The element must have an ID, not a class.

Don't forget to add the comma after the closing bracket of the strings property.

 

Comments

User photo
Adam
computeroverhauls

Is there a way to make the entire thing smaller? I'd like to add this on every webpage on my site in a very small area on the bottom corner; then if the user clicks on it have it display in full size on it's own page.

 

Thanks

October 05, 2011 07:39
User photo
Jake Holman
Product Manager

Hi Adam, you can do this pretty easily with CSS. We include a CSS file in the snippet we give you, but you can either exclude that or overwrite some of the rules. 

Take a look at the CSS included with the snippet and see what you'd like to change.

October 05, 2011 12:04
User photo
Digital Cheetah

Are the ratings per agent or global per company? -David

October 05, 2011 16:24
User photo
Jake Holman
Product Manager

It's per company. We may expand into per agent at some point, but this will likely be something used as in internal competition between agents. 

October 05, 2011 17:02
User photo
Carsten Falborg
IKEA

Hi Jake

Do you have a guide for putting this on the end-user frontpage on my zendesk? The guide you have made here doesnt seem to cover it...?

Br Carsten

October 12, 2011 04:51
User photo
Sam Finding

Hi Jake,

It's in beta so I've not logged this as a support issue but I was wondering why the embedded code was aligning the numbers to the left. See attached.

Probably CSS but wasn't sure. Any ideas?

Thanks,

Sam

October 28, 2011 04:08
User photo
Jake Holman
Product Manager

@Sam: Are you seeing this in your account, or on a website you embed it on to? If the latter, it's the CSS on your website conflicting.

October 28, 2011 09:52
User photo
James
firecore

I'd also like to see a tutorial for adding this to the homepage (like what is shown here: https://support.zendesk.com/home)

December 16, 2011 14:50
User photo
Evandro Ribeiro
zanthus

HI James.

 

Try using the code below.

 

<div id="score_here"></div>

<style type="text/css" media="screen, projection">
@import url(http://zanthus.zendesk.com/stylesheets/public_satisfaction.css);
</style><script type="text/javascript" src="http://zanthus.zendesk.com/satisfaction.js"></script><s... type="text/javascript">
if (typeof(Satisfaction) !== "undefined") {
Satisfaction.show({
strings: {
  goodRatings: "Satisfeitos",
  badRatings: "Insatisfeitos",
  score: "Grau de satisfação",
  zendeskPlug: "Powered by <a href=\"http://www.zendesk.com/\">Zendesk</a>"
},
element: 'score_here'
});
}
</script>

 

December 18, 2011 05:30
User photo
Neeraj Dev
cleantest

Hi Evandro, Is there a way I can add this code on the forum page. I can do this on home but not under forums tab.

December 31, 2011 01:34
User photo
Evandro Ribeiro
zanthus

Hi Neeraj.

I think that is not possible because not exist space to show it in forum page.

I've  tried  use the code em HTML Script and Java Script,  like a widget,  but wasn't possible too

 

 

January 06, 2012 05:27
User photo
Neeraj Dev
cleantest

Thanks for the response. Any idea on how we can implement page like https://support.zendesk.com/home

It seems like they have updated the forum page to include all the information. Can we do it using some widget or API?

 

 

January 06, 2012 07:02
User photo
Jay Fleming
adaco

Is there an easy way to scale the size that is displayed?

 

thanks,

Jay

January 06, 2012 08:07
User photo
Neeraj Dev
cleantest

Jay you should be able to do that using Css.

January 06, 2012 09:56
User photo
David Okner
Zendesk

Dear Jay,

You can go to Settings >> Extensions >> Add Widget >> Global CSS

Then add this CSS code:

div#default-dashboard span.dashboard-stats.small span.count, div#csr-dashboard span.dashboard-stats.small span.count, div#mini-dashboard span.dashboard-stats.small span.count { 
font-size: 72px; 
font-weight: bold; 
}

Just change the font size to meet your needs.

Then click on "Create Widget"

Hope this helps

Cheers

David

January 06, 2012 11:52
User photo
Carsten Falborg
IKEA

@David The CSS widget you have created here refers to the Dashboard and not the satisfaction ratings... Can you perhaps update the CSS for us?

BR Carsten

January 10, 2012 03:49
User photo
David Okner
Zendesk

Dear Carsten,

Sorry about that, the CSS code would be:

.zd_satisfaction, .zd_plug {
font-family: Arial,Helvetica,sans-serif;
font-size: 6px !important;
margin: 15px 0;
}

And then just change the font size to whatever you would like.

Cheers

David

January 11, 2012 11:41
User photo
Carsten Falborg
IKEA

Excellent - thx that did the trick...

January 11, 2012 11:47
User photo
Vincèn PUJOL
skivr

Hi,

I tried the code of Evandro but nothing appears on my front Zendesk, am I missing something ?

Thanks,

 

Vincèn

January 17, 2012 00:19
User photo
Tracey
aweber

I think that there may be an issue, or delay in counting the good responses, and their reflection in the widget. I have the widget embedded on an internal tool that is kept open all day. I also have an email notification sent anytime we receive a rating. When we get a bad one, I almost instantaneously see our overall % drop, but do not see the same when we receive a good response. For example, it's about 4:15pm my time right now. Our overall % is at 89, and has been since about 1:20pm this afternoon, when we received a bad review(i watched it drop from 90 to 89). But in the meantime, we have received 14 positive reviews, and none of them are reflected in the widget.

January 20, 2012 13:27
User photo
Evandro Ribeiro
zanthus

Hi Tracey.

Is not a delay, the problem is:

- There were 90 tickets with positive rate and 10 tickets with negative rate.

- You received a new negative rate,  the system use the last 100 tickets for calculate, so this negative ticket got out one positive rate among the last 100 tickets, and now you have 89 positives  and 11 negatives.

- When you received 14 new tickets positives the system  got out 14 positives tickets(remember,  the system use FIFO - First in  First Out  - to discard the tickets ) and your percent about all 100 last tickets continue the same.

When one of  the negatives tickets will be discard of the last 100 tickets your percent will be change.

 

I hope had help.

att

 

 

January 21, 2012 05:13
User photo
Ingmar Zahorsky
Zendesk

@Vincèn PUJOL  The way to get this to work is to activate the welcome screen under Settings > Channels > Web Portal > "Introductory text on portal home page". The next step would be to go to the home page to edit the welcome tab and adding the code Evandro provided above.

Also wherever it says the help desk name you would need to update the code with your help desk URL. Lastly you might want to change the placeholders for the text back to English if that's your language  e.g.  goodRatings: "Satisfeitos", - >goodRatings: "Said we're good",

January 22, 2012 17:23
User photo
Vincèn PUJOL
skivr

Thanks Ingmar, got it :) I thought code was to be added in a widget and not directly in code of home page ! Now it's working fine -> https://support.skivr.com/home

January 23, 2012 01:11
User photo
Joe Pacilio
emergingsoft

Is there a way to not show all three boxes?  The third seems redundant and would be something we'd like to remove from our page

Thanks!

February 13, 2012 14:11
User photo
Jake Holman
Product Manager

@Joe each box has a unique ID - you should be able to simply hide this using CSS.

February 13, 2012 14:14
User photo
Joe Pacilio
emergingsoft

@Jake Thanks for the prompt response - I was able to hide the stats I didn't want by using inline CSS.  Thanks for your help!

February 14, 2012 07:49
User photo
Jay Fleming
adaco

Hi all,

Has anyone modified the Request customer satisfaction rating script. I am interested to see what others have changed it to. I am finding that customers rate us based on our answers not on the agents handling the ticket.  

February 22, 2012 10:54
User photo
Michael Howell
accolo

Hi Jake,

Any plans to allow us to filter by group on this Widget? That would help us differentiate between internal and external groups since our internal customers tend to be a little more grumpier ;-) 

March 19, 2012 16:24
User photo
Miguel Zavala
hayes

@David This code changed the size of the fonts on my end but the end users still see the large formatted text.

 

.zd_satisfaction, .zd_plug {

font-family: Arial,Helvetica,sans-serif;
font-size: 6px !important;
margin: 15px 0;
}

 

 

April 24, 2012 11:29
User photo
Miguel Zavala
hayes

@ David nevermind, I got it working...

 

Thanks!!

April 24, 2012 11:31
User photo
TJ Baker
joomlashack

@Jay, that happens to us more often than not as well.  Customers don't like the answer they receive, even it's it 100% accurate and appropriate, and so they give the ticket a negative rating.

I've struggled with this for some time now, considering shutting off the ratings entirely, as what I am most interested in is whether our customers are getting the help they need in a timely manner, not whether or not they were in a bad mood on a particular day.

Would love to see some way of making this rating system a bit better in this regard ...although, I don't know the answer to that problem.

May 11, 2012 13:26
User photo
Pete Tomasik
marketinginnovators

Is there any way to pull and display ratings for only a certain group or organization?  Instead of an overall view of ratings for our entire helpdesk we were looking to see a breakdown of ratings for organizationX vs organizationY.  Thanks!!

May 15, 2012 08:02
User photo
Jake Holman
Product Manager

@Pete: you'll need to use our API to get that information: http://developer.zendesk.com/introduction.html

May 15, 2012 08:31
User photo
Michael Howell
accolo

@Sam Finding: I had the same issue when using the satisfaction ratings in conjunction with the CSS Widget. I corrected the issue by adding the following to the CSS Widget just before the CSS @David above referenced.

.zd_satisfaction p {
font-size: 1em;
margin-top: 0;
padding: 2px 0 1px;
text-align: center;

August 30, 2012 14:17
User photo
Jarren Oliphint
Rackspace

I am having an issue with this widget.  My current ratings on our main page is showing 81% and is actively being updated. The widget though is stuck at 85% and wont seem to update. Any thoughts?

January 31, 2013 11:22
User photo
Justin Seymour
Zendesk

Hey Jarren: 

Are you still having trouble with that satisfaction widget? I saw your ticket about satisfaction issues that was closed a while back. Let me know! 

February 10, 2013 05:10
User photo
John Berlet
evolvondemand

Hey - we have embedded the satisfaction.js in our support portal home page as follows:
<script type="text/javascript" src="https://<ourdomain>.zendesk.com/satisfaction.js"></script><script type="text/javascript">

 

and are now getting the following error on page load:

"NetworkError: 403 Forbidden - https://<ourdomain>.zendesk.com/satisfaction.js"

Any ideas what would be causing this?

John
March 08, 2013 09:02
User photo
Brandon K.
Zendesk

@John: Do you think you could let me know the full url that you are using? If you are trying to call support.zendesk.com/satisfaction.js you will receive a 403 error by design, but this is just to prevent unauthorized access to our internal Zendesk account.

March 13, 2013 16:44
User photo
John Berlet
evolvondemand

Brandon,

         Thanks for the follow-up I just tried loading the satisfaction.js again and instead of a 403 message, now my browser page is blank. The full URL is https://evolvondemand.zendesk.com/satisfaction.js.

John

March 13, 2013 17:22
User photo
Brandon K.
Zendesk

Hey John,

I took a look at your account and it looks like you need to enable public satisfaction surveys before this will work. You can get there by going to Settings > End-users > Satisfaction, it should be the second option on the page.

I'll follow up and see if we can get the blank page changed into an error message so people know they need to do something in the future. Thanks for reporting this!

March 14, 2013 16:48
User photo
Joe Goehring
directworks

I want to display only two of the three boxes (excluding percent satisfaction). To do so, I've downloaded the JS file, removed the box, and hosted it elsewhere. Unfortunately, I'm no longer able to post real-time stats. Is there any way around this?

June 19, 2013 09:11
User photo
Jake Holman
Product Manager

@Joe: You could use CSS to hide the box; customizing our JS isn't recommended and we won't be able to support any issues that arise.

Each box has its own container, which has its own class name. You can use that to do a display: none;

June 19, 2013 09:19
User photo
Joe Goehring
directworks

This worked perfectly. Clearly I'm not a coder.

 

June 19, 2013 09:59
User photo
Fernando Duarte
zuora

How can I display this in the new Help Center?

August 27, 2013 16:53
User photo
Jennifer Rowe
Zendesk

Hey Fernando, not sure, but Charles is going to take a look and update this article for HC. Stay tuned! 

August 30, 2013 11:23
User photo
Vincèn PUJOL
skivr

Would be great to be able to add this in HC :)

September 01, 2013 00:52
User photo
Charles Nadeau
Zendesk

@Fernando @Vincèn: I updated the article to cover the Help Center.

September 06, 2013 15:02
User photo
Vincèn PUJOL
skivr

Thanks Charles for update :) I have only one issue: text displayed under numbers is always in french ! How to get it dynamically in language selected on HC portal ? now that it supports multi-language correctly.

September 07, 2013 06:40
User photo
Vincèn PUJOL
skivr

Is it normal that satisfaction rating displayed in my new HC is different of one displayed on my "old" Zendesk portal ? or does it update in HC only if I put HC in live mode ?

September 16, 2013 09:25
User photo
Laura D.
Zendesk

Hi Vincèn, 

I see you have a ticket going with us about the satisfaction rating issue. I'm not sure about your second question as I don't have a test account with enough ratings and a Help Center to test with. I'll add your second question to your ticket - someone should be in touch soon!

September 16, 2013 10:42
User photo
Vincèn PUJOL
skivr

Thanks Laura but ticket already opened was about how to add it in new hc ;) 

September 16, 2013 12:33
User photo
Laura D.
Zendesk

Of course! I figured they were close enough that the same person might be able to help, if we need to can always split that question into another ticket :)

September 16, 2013 15:30
User photo
Ryan
heroku

Any reason I would be getting a 403 when trying to POST to /tickets/{ticket_id}/satisfaction_rating.json? I get responses back from the two GET requests mentioned in the docs around this feature, but that one POST requests bottoms out every time.

September 19, 2013 20:47
User photo
Laura D.
Zendesk

Hi Ryan, 

At the moment Satisfaction is turned off for your account, I'm pretty sure that's what the issue - there's nothing to POST to for new/open/pending/solved tickets. GET is working because your tickets that have ratings still have that data. Let me know if it's still not working once you have satisfaction back on. 

September 20, 2013 09:27
User photo
Ryan
heroku

Laura: True, and I should have clarified. Either way, thanks for the fast response. I'm doing this in our sandbox. Are you able to look that up as well?

September 20, 2013 12:05
User photo
Laura D.
Zendesk

Hi Ryan, 

I'm going to create a ticket for you because satisfaction is definitely on and I'm not sure why causing the error. I'll ask for more details in the ticket too. 

September 20, 2013 15:28
User photo
Ryan
heroku

Thanks, Laura. I hope they get a chance to response soon.

September 23, 2013 08:24