Skip to main content

Article 2 min read

Zendesk customization - best practices for UX, part 3

Last updated September 21, 2021

Wow, this post brings back memories. The articles linked to in this post are no longer relevant (sad, we know)> For more up to date Help Center inspiration, visit our Pinterest page.

Visit this article about branding if you want more to learn more about giving your Help Center the look and feel of your brand.

Also, this article will show you how to customize your Help Center theme.

In Part 1 and Part 2 of this series, we discussed concept and design best practices for your Zendesk, including ways to encourage self-service through the placement of your search bar and organizing support content by popular and relevant topic categories.

In part 3, we’ll take an in-depth look at how certain Zendesk customization is actually done on the back end. That’s right, we’re getting into the nitty-gritty of HTML, CSS, and JavaScript! But fear not. For those of you wishing to customize your Zendesk beyond our out-of-the-box customization options, but want something less advanced than the steps offered below, please visit our support forums where you can find helpful documentation, including our CSS Cookbook.

For others, creating the seamless brand experience you want requires a substantial amount of advanced customization technique. Take a look at how these Zendesk customers—Wooga, Moonfruit, and Podio—designed their Zendesk.

Visit the Wooga support portal.

Visit the Moonfruit support portal.

Visit the Podio Help Centre portal.

Just like the branding customizations of our customers shown here, Zendesk rebranded its web portal to have the same look and feel as another page within If you’d like to learn more about what we did, read on!

To make our support web portal look like another page within, we skinned it with the design and navigation of To do this, we inserted new HTML and CSS code into our site using JavaScript.

Here are four customization techniques we apply:

1) We replace the header and footer with the header and footer from
2) We customize some of the text on the page, i.e. “How can we help?”
3) We add three big action buttons to direct users to specific categories within our forums
4) We create left sidebar navigation to replace the links from the top menu bar, i.e. “Submit a request.”

Here’s how to do it. First, you must create a Zendesk widget that references the JavaScript code that inserts these customizations into your web portal.

Custom skinning your web portal

After you’ve created the widget, the following articles describe the next steps in detail:

Inserting your own custom header and footer in your web portal
Replacing text elements in your web portal
Adding custom call-to-action buttons on your web portal home page
Adding your own custom sidebar navigation to your web portal

Whether it’s branding, features, or functionality, Zendesk is designed to help you provide the best customer service possible. Visit our forums to learn how to make your Zendesk perfect for you and your customers.

Related stories

17 min read

What is brand advocacy? (+ 8 strategies to boost referrals)

Turn the people who know your business best into brand advocates with head-turning reward programs and impressive customer service.

14 min read

Customer analytics 101: What it is and how it works for growth

Customer analytics helps businesses deeply understand their audience to make smarter business decisions and improve CX.

10 min read

15 customer service resume examples and writing tips for 2024

Land the job you’re looking for with a perfectly crafted customer service resume.

2 min read

ShareFile, Levitate co-founder Jesse Lipson: Trust yourself

From bootstrapping through acquisition, Lipson advises balancing conventional wisdom with entrepreneurial spirit.