Changing your help center design based on your end user language

<body>
<p id="docs-hc-snippet" style="display: none;">Let's say that your company targets the French and English speaking markets. You would therefore like to have a different footer on your help center to provide different contact information based on your customer's language. Or maybe, for a better customer experience, you'd like to display the French support number only to French speaking customers. In this article, you'll learn how to set this up.</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">Use dynamic content to change your help center design by end user language. You can show different HTML, such as a language-specific footer, contact details, support phone number, or logo, based on the language customers select. This helps you deliver a localized help center for multilingual support.</p>
</div>

<div class="body">

<div class="p">
<div class="div">
<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 use this feature.</div>
If you <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408827609882-Configuring-your-help-center-to-support-multiple-languages#topic_ys2_kxh_tz" target="_blank">support multiple languages</a>, you can
use <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408882999066" target="_blank">dynamic content</a> to create your own
translations and reference them in macros, triggers, and other automations using
a <em class="ph i">placeholder</em>. In addition, dynamic content supports HTML code. For
example, you can create a dynamic content item to dynamically change the design
of your help center based on the customer's language.</div>
<p class="p">Let's say that your company targets the French and English speaking markets. You
would therefore like to have a different footer on your help center to provide
different contact information based on your customer's language. Or maybe, for a
better customer experience, you'd like to display the French support number only
to French speaking customers. In this article, you'll learn how to set this
up.</p>
<p class="p">This article covers the following topics:</p>
<ul class="ul" id="zug_hc_changing_your_help_center_design_based_on_your_end_user_language__ul_mcr_4gc_l4b">
<li class="li"><a class="xref" href="#topic_atm_pgc_l4b">Creating a new dynamic content
item</a></li>
<li class="li"><a class="xref" href="#topic_ex1_qgc_l4b">Modifying your help center
theme</a></li>
</ul>
<div class="note">
<span class="notetitle">Note:</span> While HTML is supported in dynamic content in your help center, HTML is not
supported in dynamic content in macros, triggers, automations, agent signatures,
or ticket fields and forms. Dynamic content can only be used in help center
templates and will not render if used in Javascript.</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_atm_pgc_l4b">
<h2 class="title topictitle2" id="ariaid-title2">Creating a new dynamic content item</h2>
<div class="body">
<p class="p">You need to be a Zendesk Support administrator to create dynamic content. In this
example, you'll create a dynamic content item with a French variant and add the HTML
code of the footer you'd like to be displayed for French speaking customers. Dynamic
content allows you to choose a default language. A good best practice is to English
if your customer selects a language for which you don't have a footer
translation.</p>
<ol class="ol" id="topic_atm_pgc_l4b__ol_fvr_sgc_l4b">
<li class="li"><span class="ph" id="topic_atm_pgc_l4b__dynamic_content">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_atm_pgc_l4b__image_qny_s3c_ksb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/ac_workspaces_icon.png">
<strong class="ph b">Workspaces</strong> in the sidebar, then select <strong class="ph b">Agent tools &gt; Dynamic
Content</strong>.</span></li>
<li class="li">Click <strong class="ph b">Add Item </strong>.</li>
<li class="li">Choose a name, such as <strong class="ph b">footer </strong> or <strong class="ph b">HC_footer </strong> to more easily find
your help center related dynamic content later.</li>
<li class="li">Select a default language such as English.</li>
<li class="li">Paste the HTML code you want to display for English speaking customers in the
<strong class="ph b">content </strong> box.</li>
<li class="li">Click <strong class="ph b">Create</strong> to save your dynamic content item<strong class="ph b">. </strong>
</li>
<li class="li">Notice the item's name between curly brackets. You'll use that later on.</li>
<li class="li">Now add one or more other translations. To do so, click <strong class="ph b">Add Variant </strong> and
follow steps 3-6 again.</li>
</ol>
<p class="p">Your dynamic content ready. Now, you can add it to your help center.</p>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_ex1_qgc_l4b">
<h2 class="title topictitle2" id="ariaid-title3">Modifying your help center theme</h2>
<div class="body">
<ol class="ol" id="topic_ex1_qgc_l4b__ol_etk_wgc_l4b">
<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_ex1_qgc_l4b__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 the options menu, then select <strong class="ph b">Edit Code</strong>. <p class="p"><img class="image img-screenshot" id="topic_ex1_qgc_l4b__image_gtk_wgc_l4b" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theming_menu_option_edit_code.png" width="350"></p>
</li>
<li class="li">This example modifies the footer so open the <strong class="ph b"> Footer </strong> template.</li>
<li class="li">Use the following syntax to insert the dynamic content item we created above:
{{dc ' <em class="ph i"> item_name </em> '}}.</li>
<li class="li">Click <strong class="ph b"> Save </strong> and you'll be able to see the newly added footer.</li>
<li class="li">Click <strong class="ph b"> Publish changes. </strong>
</li>
</ol>
<p class="p">Now, your custom footer on your help center and the text will be displayed based in
the language your customers select on the homepage.</p>
<p class="p">This article covered only the footer but you can go further than that. You could have
a completely different look and feel based on your customer's language. Or maybe the
product you're selling has a different name in French than in English; in this case
you can use dynamic content to display a different logo based on the customer's
language.</p>
</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/4408894121754",
"url": "https://support.zendesk.com/hc/en-us/articles/4408894121754",
"headline": "Changing your help center design based on your end user language",
"description": "You add dynamic content to your help center theme so the design, such as a footer, changes based on the language your customers select.",
"articleSection": "Supporting multiple languages in help center",
"datePublished": "2021-10-16T17:45:19+00:00",
"dateModified": "2026-09-01T19:27:58.549241+00:00",
"inLanguage": "en",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408894121754"
},
"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>