How can I link my Help Center to my website?

Disclaimer: The solution below is an example of one way you might update the code on your website, which Zendesk does not support or guarantee. Please post any issues you have in the comments section or try searching for a solution online. 

Question

How can I link my Help Center to my website? I want to redirect my customers to my Help Center (e.g. mysubdomain.zendesk.com/hc/en-us) when they click on the "Contact/Support" button on my website.

Answer

You can link your Help Center to your website by making changes to the website's code and brand your current Help Center theme for a seamless experience. This can be done by:

1. Customizing your Help Center

If you are looking to style your Help Center to match your company's branding guidelines, you can start with customizing your theme by adding a logo, a home banner, and change the theme's colors. For more advanced customizations, you can access the Theming Center and edit the Help Center's HTML, CSS, and Javascript templates. Refer to these articles for more information:

• Branding your Help Center
• Customizing your Help Center theme

2. Host Mapping (optional)

The next step is to customize your Help Center’s domain to look like your own domain URL. By default, the address of your Help Center contains your Zendesk subdomain, such as "mycompany" in mycompany.zendesk.com. However, you can map a subdomain of your own domain (such as support.mycompany.com) to your default Zendesk address, so customers will not see your Zendesk subdomain. This is called "host mapping", for more information on this see Changing the address of your Help Center subdomain (host mapping).

3. Linking your website to your Help Center

The final step is to link to your Help Center on your website. If you don't feel comfortable working with HTML, we would suggest reaching out to an experienced Web Designer to assist you with this task. Generally, your website may have a "Contact/Support" button located in the navigation bar, which you can link to your Help Center. An example of what this looks like can be found below: 

A navigation bar is basically a list of links, so these HTML elements are normally used <ul> and <li>. The HTML <a> element (anchor element) creates a hyperlink to other web pages, files, locations within the same page, or any other URL.

Here is an example of the HTML code which is usually located in the header:

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#about">About</a></li></ul>
</ul>

To setup a redirect, you will want to replace the part <a href="#support"> with <a href="https://mysubdomain.zendesk.com/hc/en-us">. 

The example below shows how this would look within the code block, using a host-mapped domain. 

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="https://support.games.com/hc/en-us">Support</a></li>
<li><a href="#about">About</a></li></ul>
</ul>

If the "Contact/Support" button is not present, you can add one quickly into your navigation bar following the steps above.