Creating custom pages in the help center

<body>
<p id="docs-hc-snippet" style="display: none;">You can create custom pages from scratch and then link to them from anywhere in your help center or from any other web page or application. For example, you can use custom pages to create special landing pages for your help center, or even create new pages to embed content from sources outside of Zendesk.</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_ee">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Enterprise or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_with_guide_e">
<table>
<tbody>
<tr>
<td>
<strong>Support with</strong>
</td>
<td>Knowledge 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">Custom pages let you create standalone help center pages with their own URLs for landing pages, embedded content, or other special content. You can build them in the theme editor or with code, design them with Curlybars, HTML, CSS, and JavaScript, and link to them from articles, templates, or other pages. Up to 100 custom pages are supported.</p>
</div>

<div class="body">

<div class="p">
<div class="note" id="zug_hc_custom_pages_create__note_r3s_h4k_btb">
<span class="notetitle">Note:</span> On Suite Growth and Professional or Support with Knowledge
Professional, you have an option to add custom pages, but you won't be able to use
them. This behavior is designed so that you can still purchase and install themes
that include custom pages from the <a class="xref" href="https://www.zendesk.com/marketplace" target="_blank">Marketplace</a>.</div>
Custom pages are unique
pages you can create and add to a help center theme. Custom pages don't appear in a
section or a topic. Rather, they have their own URLs that you can use to direct users to
the pages. You can assign each page a specific URL at the time of development. </div>
<p class="p">You can create custom pages from scratch and then link to them from anywhere in your help
center or from any other web page or application. For example, you can use custom pages
to create special landing pages for your help center, or even create new pages to embed
content from sources outside of Zendesk.</p>
<p class="p">This article covers the following topics:</p>
<ul class="ul" id="zug_hc_custom_pages_create__ul_nm2_vvg_mrb">
<li class="li"><a class="xref" href="#topic_gfb_wbr_lrb">Creating custom pages</a></li>
<li class="li"><a class="xref" href="#topic_jrt_wbr_lrb">Designing custom pages</a></li>
<li class="li"><a class="xref" href="#topic_t1t_xbr_lrb">Linking to custom pages</a></li>
</ul>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_gfb_wbr_lrb">
<h2 class="title topictitle2" id="ariaid-title2">Creating custom pages</h2>
<div class="body">
<p class="p">You can create custom pages in one of two ways. You can either create and customize a
page using the Zendesk templating language and HTML markup within the theming editor, or you
can create and develop the page outside of Zendesk and then import it as part of a
theme into the help center. </p>
<p class="p">You can create up to 100 custom pages.</p>
<p class="p"><strong class="ph b">To create custom pages using the theme editor</strong></p>
<ol class="ol" id="topic_gfb_wbr_lrb__ol_tmy_1wg_mrb">
<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_gfb_wbr_lrb__image_hzf_jfx_s2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.</span><p class="p">The Themes page opens.</p>
</li>
<li class="li">Click <strong class="ph b">Customize</strong> on the theme that you want to edit.</li>
<li class="li">Click <strong class="ph b">Edit code</strong>.<p class="p"><img class="image img-screenshot" id="topic_gfb_wbr_lrb__image_vkj_4cg_4rb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/guide_themes_edit_code_btn.png" width="600"></p>
</li>
<li class="li">Click <strong class="ph b">Add new</strong>, then select <strong class="ph b">Custom page</strong>.<p class="p"><img class="image img-screenshot" id="topic_gfb_wbr_lrb__image_ons_1lh_mrb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/custom_pages_add_new.png" width="250"></p>
</li>
<li class="li">For <strong class="ph b">Page name</strong>, enter a filename for your page. <p class="p">The name becomes part
of the page URL.</p>
</li>
<li class="li">Click <strong class="ph b">Copy</strong> next to the URL field to save the URL to your
clipboard.<p class="p">You’ll need it to add the link to other pages.</p>
<p class="p"><img class="image img-screenshot" id="topic_gfb_wbr_lrb__image_gmx_2lh_mrb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/custom_pages_url.png" width="400"></p>
</li>
<li class="li">Click <strong class="ph b">Add custom page</strong>. <p class="p">The custom page appears without content and is
listed under the custom_pages section in the sidebar. </p>
<p class="p"><img class="image img-screenshot" id="topic_gfb_wbr_lrb__image_a5c_jlh_mrb" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/custom_pages_files.png" width="600"></p>
<p class="p">To design the page, see <a class="xref" href="#topic_jrt_wbr_lrb">Designing custom
pages</a>.</p>
</li>
</ol>
<p class="p"><strong class="ph b">To create custom pages using code</strong></p>
<p class="p" dir="ltr">As a developer, you can build themes offline and upload them as a ZIP file
or use a GitHub repository. To create custom pages using code, create the page as a
.hbs file in the following directory: templates/custom_pages. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408838187802" target="_blank">Working on a theme locally</a>.</p>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_jrt_wbr_lrb">
<h2 class="title topictitle2" id="ariaid-title3">Designing custom pages</h2>
<div class="body">
<p class="p" dir="ltr">When you create a custom page, the page is blank. To design a custom page,
you can use the Zendesk templating language, also known as Curlybars, as well as
HTML, CSS, and JavaScript. </p>
<p class="p" dir="ltr">For more information, see the following templating language references:</p>
<ul class="ul" id="topic_jrt_wbr_lrb__ul_cy1_q1h_mrb">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832681626" target="_blank">Help center templating cookbook</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408842914714" target="_blank">Help center CSS cookbook</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836487450-Help-center-JavaScript-cookbook" target="_blank">Help center JavaScript cookbook</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824571674-Using-the-help-center-templating-language" target="_blank">Using the help center templating
language</a></li>
<li class="li"><a class="xref" href="https://developer.zendesk.com/api-reference/help_center/help-center-templates/introduction/" target="_blank">Developer templating API documentation -
Introduction</a></li>
<li class="li"><a class="xref" href="https://developer.zendesk.com/api-reference/help_center/help-center-templates/helpers/" target="_blank">Developer templating API documentation -
Helpers</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_t1t_xbr_lrb">
<h2 class="title topictitle2" id="ariaid-title4">Linking to custom pages</h2>
<div class="body">
<p class="p" dir="ltr">Your content hierarchy is composed of a number of different pages such as
sections and topics that make up your help center. Custom pages exist outside of
this hierarchy and are not visible to users until they click a direct link to
them.</p>
<p class="p" dir="ltr">For example, if you create an “About Us” custom page, you can add a link to
that page from any help center template, article, or even home page. Users visiting
those pages can click the About Us link to view the custom page. If users don’t have
access to a link that points to the page, they can still search for it.</p>
<p class="p" dir="ltr">The URL of a custom page follows this pattern:
"https://{domain_name}/hc[/{locale}]/p/{page_name}". The locale is optional and the
page name does not include an .hbs or .html file extension. You can get the
page_name from the list of pages in the theme editor. See Creating custom pages.</p>
<p class="p">For example, if your domain name is mondocam.zendesk.com and the page name in the
theme is about_us.hbs, the URL will be
https://mondocam.zendesk.com/hc/p/about_us.</p>
<p class="p" dir="ltr">If you want to insert a link to the custom page in another page or template
in the same help center, you can use a relative link such as &lt;a
href="/hc/p/about_us"&gt;About Us&lt;/a&gt;.</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/4409012911770",
"url": "https://support.zendesk.com/hc/en-us/articles/4409012911770",
"headline": "Creating custom pages in the help center",
"description": "You can create, design, and link custom help center pages with their own URLs by using the theme editor or code and then adding direct links to them.",
"articleSection": "Using themes and customizing your help center",
"datePublished": "2021-10-18T21:41:13+00:00",
"dateModified": "2026-09-01T19:22:01.135459+00:00",
"inLanguage": "en",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4409012911770"
},
"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>