Displaying satisfaction ratings totals and an overall score (Professional and Enterprise) Follow

professional enterprise plans

You can display satisfaction ratings in the Help Center. 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.
  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.

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

  • 0
    Is it possible to display data beyond the 100 latest ratings? We traditionally rate around 95%+. Our sales team likes to cite these numbers and I was asked if it would be possible to display satisfaction numbers for all of 2015. Thanks!
  • 0
    Hi Phil! You won't be able to get this information through the native reporting in your Zendesk because that only goes back 90 days, so you'll need to pull the information out using our API. You can find some information on that there: https://developer.zendesk.com/rest_api/docs/core/satisfaction_ratings If you were to upgrade to the Professional or Enterprise plan you'd have access to Insights, which is our advanced reporting tool that would allow you to create reports with this information. The higher price point might not be feasible for you, though. Please let me know if you have any other questions!

Please sign in to leave a comment.

Powered by Zendesk