Displaying satisfaction ratings totals and an overall score

Displaying satisfaction ratings totals and an overall score

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 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.

Have more questions? Submit a request

Comments

  • Avatar
    Adam

    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

  • Avatar
    Jake Holman

    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.

  • Avatar
    Digital Cheetah

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

  • Avatar
    Jake Holman

    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. 

  • Avatar
    Carsten Falborg

    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

  • Avatar
    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

  • Avatar
    Jake Holman

    @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.

  • Avatar
    James

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

  • Avatar
    Evandro Ribeiro

    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><script 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>

     

  • Avatar
    Neeraj Dev

    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.

  • Avatar
    Evandro Ribeiro

    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

     

     

  • Avatar
    Neeraj Dev

    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?

     

     

  • Avatar
    Jay Fleming

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

     

    thanks,

    Jay

  • Avatar
    Neeraj Dev

    Jay you should be able to do that using Css.

  • Avatar
    David Okner

    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

  • Avatar
    Carsten Falborg

    @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

  • Avatar
    David Okner

    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

  • Avatar
    Carsten Falborg

    Excellent - thx that did the trick...

  • Avatar
    Vincèn PUJOL

    Hi,

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

    Thanks,

     

    Vincèn

  • Avatar
    Tracey

    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.

  • Avatar
    Evandro Ribeiro

    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

     

     

  • Avatar
    Ingmar Zahorsky

    @ [Vincèn PUJOL](../users/60342168 "Click here to view this user's profile")  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",

  • Avatar
    Vincèn PUJOL

    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

  • Avatar
    Joe Pacilio

    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!

  • Avatar
    Jake Holman

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

  • Avatar
    Joe Pacilio

    @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!

  • Avatar
    Jay Fleming

    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.  

  • Avatar
    Michael Howell

    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 ;-) 

  • Avatar
    Miguel Zavala

    @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;

    }

     

     

  • Avatar
    Miguel Zavala

    @ David nevermind, I got it working...

     

    Thanks!!

Please sign in to leave a comment.