Displaying satisfaction ratings and overall score in your help center

<body>
<p id="docs-hc-snippet" style="display: none;"></p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="suite_gpee">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_with_guide_all">
<table>
<tbody>
<tr>
<td>
<strong>Support with</strong>
</td>
<td>Knowledge Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Summary: <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">You can add a satisfaction ratings box to your help center to show the last 100 customer ratings, including positive and negative counts and an overall score. Admins can copy the code after enabling public satisfaction statistics, and Knowledge admins can place it on the home page or in articles. You can also customize the wording, styling, and placement of the ratings box.</p>
</div>

<div class="body">

<div class="p">
<div class="note">
<span class="notetitle">Note:</span> Customers who are not on a Suite plan must have Support Professional or
Enterprise with any Knowledge plan to display satisfaction ratings and overall score in your
help center.</div>
You can display satisfaction ratings in your help center. This lets you
show quick statistics based on your last 100 satisfaction ratings. The following data is
shown:<ul class="ul" id="topic-1__ul_kqv_qbl_1g">
<li class="li">Number of positive ratings</li>
<li class="li">Number of negative ratings </li>
<li class="li">Overall score (percentage of good ratings)</li>
</ul>
</div>
<p class="p"><img class="image img-screenshot" height="NaN" id="topic-1__image_mxq_byj_cg" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/satisfaction_ratingswidetbox.png" width="NaN"></p>
<p class="p">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. </p>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_u5v_njn_kl">
<h2 class="title topictitle2" id="ariaid-title2">Getting the code for the ratings box</h2>
<div class="body">
<p class="p">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.</p>
<ol class="ol" id="topic_u5v_njn_kl__ol_hyt_qjn_kl">
<li class="li"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4581766374554#topic_hfg_dyz_1hb" target="_blank">Admin Center</a>, click <img class="image" id="topic_u5v_njn_kl__image_rwc_sgc_ksb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/ac_people_icon.png">
<strong class="ph b">People</strong> in the sidebar, then select <strong class="ph b">Configuration &gt; End users</strong>.</span></li>
<li class="li">Click the <strong class="ph b">Satisfaction</strong> tab.</li>
<li class="li">Make sure that <strong class="ph b">Allow customers to rate tickets</strong> is selected and that you have at
least 100 ratings. <p class="p">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.</p>
<p class="p"><img class="image img-screenshot" height="NaN" id="topic_u5v_njn_kl__image_ch4_sjn_kl" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/sat_rating_lessthan100.png" width="NaN"></p>
</li>
<li class="li">Select <strong class="ph b">Allow me to display public satisfaction statistics</strong>.</li>
<li class="li">Click <strong class="ph b">Save Tab</strong>.<p class="p">The page updates with more information, including statistics
based on your last 100 customer satisfaction ratings. </p>
</li>
<li class="li">Under <strong class="ph b">How do I use it</strong>, copy all the HTML code in the box. You'll only see this
HTML code if you if have 100 or more satisfaction ratings. </li>
</ol>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_chp_5kn_kl">
<h2 class="title topictitle2" id="ariaid-title3">Adding the ratings box in the help center</h2>
<div class="body">
<p class="p">Knowledge admins can add the ratings box to articles or to the home page of the help center.</p>
<p class="p"><strong class="ph b">To add the ratings box to the home page of your help center</strong></p>
<ol class="ol" id="topic_chp_5kn_kl__ol_mk5_kmn_kl">
<li class="li"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, click <strong class="ph b">Customize design</strong>
(<img class="image" id="topic_chp_5kn_kl__image_hzf_jfx_s2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.</span></li>
<li class="li">Click the theme you want to edit to open it.</li>
<li class="li">Click <strong class="ph b">Edit Code</strong>.<p class="p"><img class="image img-screenshot" id="topic_chp_5kn_kl__image_jx1_wvb_xbb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theming_menu_option_edit_code.png" width="250"></p>
</li>
<li class="li">In the <strong class="ph b">Templates</strong> section, open the home page template.</li>
<li class="li">Paste the code for the ratings box in the template.</li>
<li class="li">Click <strong class="ph b">Save</strong>.</li>
<li class="li">Click <strong class="ph b">Preview</strong> to preview the effect of your changes on the page.</li>
</ol>
<p class="p"><strong class="ph b">To add the ratings box to an article in the help center</strong></p>
<ol class="ol" id="topic_chp_5kn_kl__ol_d2k_pmn_kl">
<li class="li">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, click the <strong class="ph b">Settings</strong> icon
(<img class="image" id="topic_chp_5kn_kl__image_vck_pjh_tz" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_settings.png">) in the sidebar.</li>
<li class="li">Ensure the <strong class="ph b">Display Unsafe Content</strong> setting is enabled. <p class="p">In this case, you want
to allow unsafe content like script tags.</p>
</li>
<li class="li">Back in the help center, navigate to the article where you want the ratings box to appear.</li>
<li class="li">Click <strong class="ph b">Edit article</strong>.</li>
<li class="li">Switch to the HTML editor by clicking <strong class="ph b">Source code</strong> button on the editor's toolbar.</li>
<li class="li">Paste the code for the ratings box in the page and click <strong class="ph b">Save</strong>.</li>
</ol>
<p class="p">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 <a class="xref" href="#topic_zbn_2r4_zf">Customizing the ratings box</a>.</p>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_zbn_2r4_zf">
<h2 class="title topictitle2" id="ariaid-title4">Customizing the ratings box</h2>
<div class="body">
<p class="p">You can customize the satisfaction ratings box by changing the wording, changing the look,
or setting where it appears on the page. </p>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested2" id="topic_mxp_gr4_zf">
<h3 class="title topictitle3" id="ariaid-title5">Customizing the wording</h3>
<div class="body">
<p class="p">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:</p>
<pre class="pre">Satisfaction.show({
strings: {
goodRatings: "Said good",
badRatings: "Weren't so sure",
score: "Overall happiness",
zendeskPlug: "Powered by &lt;a href=\"http://www.zendesk.com/\"&gt;Zendesk&lt;/a&gt;"
}
});</pre>
<p class="p">You can edit the values in quotes.</p>
</div>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested2" id="topic_v3s_xpp_zf">
<h3 class="title topictitle3" id="ariaid-title6">Customizing the look</h3>
<div class="body">
<p class="p">The code you pasted into your HTML imports a CSS stylesheet:</p>
<div class="p">
<pre class="pre codeblock"><code> @import url(https://support.zendesk.com/stylesheets/public_satisfaction.css);</code></pre>
</div>
<p class="p">If you want to customize the look of the ratings box, you an add your own CSS to the page where
you put the ratings box, overwriting the CSS defined in the Zendesk stylesheet.</p>
</div>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408832723866",
"url": "https://support.zendesk.com/hc/en-us/articles/4408832723866",
"headline": "Displaying satisfaction ratings and overall score in your help center",
"description": "You can add a satisfaction ratings box to your help center to show the last 100 ratings, overall score, and guidance for pasting and customizing the HTML code.",
"articleSection": "Using themes and customizing your help center",
"datePublished": "2021-10-16T03:47:27+00:00",
"dateModified": "2026-09-01T19:18:23.823873+00:00",
"inLanguage": "en",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408832723866"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Knowledge",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405298860954"
}
}
}</script><script id="ai-summary-script">
//<![CDATA[
const ai_summary_style = document.createElement('style');
ai_summary_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-ai-summary{background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 6px;margin-bottom:16px}#article-body #docs-ai-summary #docs-ai-summary-toggle{font-size:.9em;font-weight:700;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#article-body #docs-ai-summary #docs-ai-summary-toggle #up-triangle{margin-left:auto;padding-right:10px;display:none}#article-body #docs-ai-summary #docs-ai-summary-toggle #down-triangle{margin-left:auto;padding-right:10px}#article-body #docs-ai-summary #docs-ai-summary-content{font-size:.9em;padding-left:25px;padding-right:25px;margin-bottom:12px}`;
document.head.appendChild(ai_summary_style);

const toggleAISummary = () => {
const summary = document.getElementById("docs-ai-summary-content");
const upTriangle = document.getElementById("up-triangle");
const downTriangle = document.getElementById("down-triangle");
if (summary.style.display === "none") {
summary.style.display = "block";
upTriangle.style.display = "none";
downTriangle.style.display = "inline";
} else {
summary.style.display = "none";
upTriangle.style.display = "inline";
downTriangle.style.display = "none";
}
};

document.getElementById("docs-ai-summary-toggle").addEventListener("click", toggleAISummary);
//]]>
</script>
</body>