Advanced Gorgias Help Center Customization

Updated 1 month ago by Joris La Cancellera

Under the 'Customization' tab, you now have the possibility to customize your help center using HTML code. However, you may first want to check out this guide on how to set up some basic customization. 👍

You can follow this documentation to get started and see some common use cases.

We recommend that these steps should be performed by someone with a technical background.

How it works

It is possible to customize the header and/or the footer using your own HTML code by clicking the 'Use custom header/footer' toggle. By doing so, you are no longer using the existing header/footer standard features such as the navigations links and social network links features.

The customization settings are done per language. It is possible to use a custom HTML header for the primary language while keeping the default Gorgias header for the other languages.

It is also possible to add HTML code in the head section of all the pages. It is the appropriate place to extend the help center with scripts or CSS styles.

The Extra HTML feature is intented to receive head tags such as <script>, <style> and <meta>.
We strongly recommend putting body tags (<div>, <p>, <a>, etc...), if you have some, at the end of the Extra HTML content to make sure all head tags are well injected inside the head section of the HTML pages. The body tags will be injected at the beginning of the body section.
The Extra HTML feature requires HTML, the <script></script> tags are mandatory for JavaScript.

Setup Instructions

Here are some common Extra HTML customization examples.

Custom Font

You can assign any font as long as you provide the stylesheet link.

The example below help to overwrite the primary font family at your convenience:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Festive&display=swap" rel="stylesheet">
<style>
:root {
--ghc-primary-font-family: Festive, inter !important;
}
</style>

The following example will customize the font for specific HTML elements.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Festive&display=swap" rel="stylesheet">
<style>
h1, h2, h3, h4, h5, h6, a, button, input{
font-family: festive, inter !important;
}
</style>

You can use this code to hyperlink the logo in the Help Center which will take visitors to a new page/tab once they click on it:

<script type="text/javascript"> 
document.addEventListener("DOMContentLoaded", function (event) {
document
.querySelector("header > div > div > img")
.addEventListener("load", () => {
const logo = document.querySelector("header > div > div").innerHTML;
const newLogo = `<a href="https://yourwebsite.com"; target="_blank">${logo}</a>`;
document.querySelector("header > div > div").innerHTML = newLogo;
});
});
</script>

If you want the logo to open a new page, then the target="_blank" part above should remain, but if you want to open the link on the existing tab, you should remove target="_blank" from the script.

The code need to be added here: Go to SettingsHelp CenterSelect the helpcenter → Customization tab → Toggle ON the Extra HTML→ Paste the code there.

Tracking

For instructions on how to track your help center searches, please visit this guide here.

Custom header examples

Sidebar header example

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

.sidebar a {
display: block;
color: #161616;
padding: 16px;
font-size: 16px;
font-weight: 600;
font-family: Inter;
text-decoration: none;
}

.sidebar a.active {
background-color: #04AA6D;
color: white;
}

.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}

.sidebar img {
display: block;
}

.ghc-main-content-container {
margin-left: 200px;
padding: 1px 16px;
}

footer {
margin-left: 200px;
}

@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
<div class="sidebar">
<img src="https://imgur.com/euXO5sp.jpg">
<a href="https://www.gorgias.com/">🛒 Back to shop</a>
<a href="mailto:someone@yoursite.com">📭 Email Us</a>
</div>

Because of the GDPR, we'd like to help you to be as compliant as possible with the law. Here's how to install a cookie manager into your Help Center!

What kind of cookies does Gorgias use in the Help Center?

At the moment (as of March 15th, 2022), we are using one technical mandatory cookie in order to get your Help Center delivered as safely as possible:

  • __cf_bm: this cookie is pushed by one of our providers called Cloudflare and is used to protect your Help Center from “bad bots”. You can find more detail about it on Cloudflare. This cookie has a lifespan of 30 minutes.

Except this cookie, we are not using any other cookie in your Help Center by default.

If you add some custom code, including a tool or a script into your Help Center, it might have its own set of cookies. Please check with your tool or script provider before adding it.

Thanks to our customization features, it’s quite simple to add your own cookie manager to your Help Center:

  1. Go to Settings -> Help Center.
  2. Go to the 'Customization' tab.

  1. At the bottom of the page you’ll find a toggle switch called 'Add extra HTML'.

  1. You can now copy-paste the code from your favorite cookie manager in order to manage your cookies if needed. The code will be placed in the '<head>' section of your Help Center for all of the pages.

That’s it! You can now use your cookie manager as you want.

Hope this helps you master some code and turn your help center into a custom-built tool that will get your customer service to the next level! As always, our Support Team is here for you if you have any follow-up questions, so please feel free to reach out via our live chat or email at support@gorgias.com.


What do you think? Yay or Nay?