Setting up the GitHub integration with your help center theme

<body>
<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>Guide Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Verified AI summary <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">Integrate your help center theme with GitHub to collaborate on theme development and manage it in one place. Prepare your theme in GitHub, ensuring it meets requirements like having a manifest file at the root. Set up the integration in Knowledge admin by importing the theme from GitHub. Manage updates in GitHub and publish them when ready.</p>
</div>
<div class="body">
<div class="p">
<div class="note fastpath">
<span class="fastpathtitle">Location: </span> Knowledge admin &gt; Customize design (<img class="image" id="topic_v4p_gyk_chb__image_nr5_nv4_s2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) &gt; Add theme &gt; Add from GitHub</div>
</div>
<p class="p">The GitHub integration enables you to develop and maintain a theme collaboratively in GitHub,
then preview or publish it in Knowledge admin. To set up the integration, make sure your theme
is stored in GitHub, then set up the integration in Knowledge admin.</p>
<div class="p">
<div class="note note">
<span class="notetitle">Note:</span> The GitHub integration with Help Center does not support GitHub Enterprise Server, but
it does support GitHub Enterprise Cloud. If you use GitHub Enterprise Server you can
alternatively use the <a class="xref" href="https://developer.zendesk.com/rest_api/docs/help_center/theming" target="_blank">Guide theming API</a>.</div>
</div>
<p class="p">You must be a Knowledge admin to set up the GitHub integration.</p>
<div class="p">This article covers the following topics:<ul class="ul" id="topic_v4p_gyk_chb__ul_ynj_1rj_2hb">
<li class="li"><a class="xref" href="#topic_i3v_kyk_chb">Preparing your theme in GitHub</a></li>
<li class="li"><a class="xref" href="#topic_vnf_lyk_chb">Setting up the integration</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_i3v_kyk_chb">
<h2 class="title topictitle2" id="ariaid-title2">Preparing your theme in GitHub</h2>
<div class="body">
<p class="p">You need to ensure that your theme is in GitHub before you set up the integration in
Knowledge admin. If you're new to Git and GitHub, check out <a class="xref" href="https://www.dataquest.io/blog/tutorial-introduction-learn-git-github" target="_blank">this tutorial</a>. If your theme is already in GitHub, and it meets
the following requirements, see <a class="xref" href="#topic_vnf_lyk_chb">Setting up the
integration</a>.</p>
<p class="p">The integration has the following requirements for your GitHub repo:</p>
<div class="p">
<ul class="ul">
<li class="li">
<strong class="ph b">The manifest file must be at the root of the GitHub repo</strong><p class="p">The file
manifest.json should be placed at the root of your GitHub repository to be able to add
your theme. You can still include extra files, such as tooling, which are ignored when
importing to Knowledge admin.</p>
</li>
<li class="li">
<strong class="ph b">The GitHub repo can have only one theme</strong><p class="p">You should only manage one theme in
each repository. You can use the branch option during theme import to try out
variations of your theme.</p>
</li>
</ul>
</div>
<p class="p"><strong class="ph b">To get your theme into a GitHub repo</strong></p>
<ul class="ul" id="topic_i3v_kyk_chb__ul_jkk_jfj_2hb">
<li class="li">
<strong class="ph b">If you do not currently have a theme</strong>, fork the <a class="xref" href="https://github.com/zendesk/copenhagen_theme" target="_blank">Copenhagen theme repo</a> and start building your theme. This enables you to easily
port improvements from the Copenhagen theme to your theme in the future.</li>
<li class="li">
<strong class="ph b">If your theme is in Knowledge admin</strong>, <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408828976538#topic_udw_zdc_hbb" target="_blank">download your theme</a>, then create a GitHub repo (if
you don't already have one), and push your theme to the GitHub repo.</li>
<li class="li">
<strong class="ph b">If your theme is not in Knowledge admin or GitHub</strong>, create a GitHub repo (if you
don't already have one), and push your theme to the GitHub repo.</li>
</ul>
<p class="p">After you've prepared your theme in GitHub, you are ready to <a class="xref" href="#topic_vnf_lyk_chb">set up the integration</a>.</p>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_vnf_lyk_chb">
<h2 class="title topictitle2" id="ariaid-title3">Setting up the integration</h2>
<div class="body">
<p class="p">To set up the GitHub integration you need to make sure your theme is stored in GitHub, then
fetch your theme from GitHub to Knowledge admin. This one-time fetch establishes the
connection between your theme and GitHub. </p>
<p class="p">After you set up the integration, you will work on the theme in GitHub, then update the
theme in Knowledge admin when you're ready. You can then preview or
publish the theme live in Knowledge admin.</p>
<p class="p"><strong class="ph b">To set up the GitHub integration with your help center theme</strong></p>
<div class="p">
<ol class="ol" id="topic_vnf_lyk_chb__ol_jm4_d2c_hbb">
<li class="li">In GitHub, ensure that you have <a class="xref" href="#topic_i3v_kyk_chb">prepared
your theme</a>.</li>
<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_vnf_lyk_chb__d7e59" 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">Add theme</strong> in the upper-right corner.</li>
<li class="li">Click <strong class="ph b">Add from GitHub</strong>.<p class="p"><img class="image img-screenshot" id="topic_vnf_lyk_chb__image_vlm_swj_2hb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theme_add_new.png" width="250"></p>
</li>
<li class="li">Enter the URL for the repo and, optionally, enter a branch name if you want to fetch
from a branch other than the default branch, then click <strong class="ph b">Import</strong>.</li>
<li class="li">Log in to GitHub if prompted, then click <strong class="ph b">Authorize Zendesk</strong>.</li>
</ol>
</div>
<p class="p">The theme thumbnail appears on the Themes page when the import is complete. If you have
problems, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408829072538" target="_blank">Troubleshooting the GitHub integration for help center
themes</a>.</p>
<p class="p">After you've established the connection, you will manage your theme in GitHub and <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408844123162" target="_blank">update the theme in Knowledge admin</a> as needed.</p>
</div>
</div>
<script id="fast-path-script">
//<![CDATA[
const fast_path_style = document.createElement('style');
fast_path_style.innerHTML = `#article-body .fastpath{font-size:.9em;background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 8px;margin-bottom:16px}#article-body .fastpath::before{content:none!important}`;
document.head.appendChild(fast_path_style);
//]]>
</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>