Fine Tuning: Help Center Customization

Customers don’t just like self service, they go out of their way to self-serve. By enabling your Zendesk Help Center, you’ve already taken the first step to deliver a platform for your customers to capitalize on the self-service model. Customers are now able to search for information in your knowledge base. If they can’t find an answer, they can submit a request to an agent. You’ve simplified their customer service experience and given them access to their preferred channel.

So now what? Now it’s time to further enhance your Help Center. This Fine Tuning session will help you optimize your Zendesk with the goal of customizing its look and feel, and provide suggestions on which features to include to make the self-service experience seamless. We’ll show you how to take advantage of various features, including custom ticket forms, search, analytics, custom themes, and more.

Part 1: Utilizing Popular Help Center Features

Part 2: Optimizing The Search Experience

Part 3: Improving Your Content Architecture

Zendesk Customer Success Consultant Lindsey Fischer has been with Zendesk for two years and brings over five years of tech industry experience from various SaaS companies.

Part 1, 8 am PST: Utilizing Popular Features

In Part 1, we’ll start by highlighting some of the most popular features to make sure you are effectively utilizing native functionalities of Help Center.

Ticket Forms:

A great feature to utilize is Ticket Forms. Ticket Forms allow you to create multiple support request forms that show unique sets of custom ticket fields that are relevant to a given request type. For example, you may have a different ticket form for “general inquires” vs. “return inquiries” because you want to collect different information for each request. You can create different forms for each of these by adding, removing, or rearranging fields per form.

For general inquires, you could create a ticket form called “I Have a Quick Question.” In this case, capturing general information on the issue might be sufficient.

But, let’s say you were trying to capture specific information on returns. You could create a ticket form called “I Need to Return or Exchange an Item.” By adding additional fields, you can capture why the customer is returning the item and have them choose what their specific issue is from pre-populated dropdown fields.

In short:

Ticket Forms support multiple request forms that show a unique set of custom fields.

Admins can set up different ticket forms for each unique workflow.

They can be visible to end users and agents, or agents only.

Ticket Forms can also be used in business rules, including views, triggers, and automations.

*Note*: Ticket Forms are available as a Professional Add-on (as part of the Productivity Pack Add-on) and on Enterprise.

Customizing the Web Widget:

You’ve already selected your theme, added your FAQ articles, and activated the submit a request button. Now it’s time to enable a great channel to connect with your customers: the Web Widget. The Web Widget allows you to insert Zendesk support options into any page of your website. The benefit to using the Web Widget is giving customers the flexibility of getting help without having to navigate to the support site.

You can choose where you want the widget to appear. You can add the widget code to each web page where you want it to appear or to the Help Center header. For example, Zendesk uses the Web Widget “Help” button (located at bottom right of each Help Center page) as a way to contact support. When you click on the widget, it automatically opens a “how can we help you?” contact form.

If you’re like many of our customers, you provide self-service to your customers across several devices (ie: mobile, web, tablet, etc). Responsive Help Center is a way for you to provide an optimal viewing experience to your customers on all devices. This feature will keep the look and feel of your Help Center consistent and prevent visitors from scrolling and resizing.

Want some inspiration? These Responsive Themes examples can serve as a customization guide:

Zendesk's Help Center mobile layout was created with CSS and HTML coding. You can use CSS and HTML within your chosen Help Center theme template to make it responsive to mobile viewing and build custom stylings. Here’s some helpful documentation from the Zendesk team on working with CSS for your mobile Help Center view.

You know how to add articles, but did you know there is also the ability to create a draft and work on it until you are ready to publish on your Help Center? As you continue to add content to your Help Center, make sure to work on it in draft mode. Draft articles give you a way to monitor and edit all articles which are written by agents before they "go live” for end-users to view.

Part 2, 11 am PST: Optimizing Search

According to The Effortless Experience, “The best companies aggressively simplify their website and actively guide customers to the channels and content that best address the issues they have. When it comes to how information is presented on the web, simplicity matters a lot. Most customers who channel-switch do so because they become confused or lose confidence.”

We get asked a lot of questions about modifying the Search Box to make it simply for users to find content. Part 2 of this Fine Tuning focuses on Search, and how you can make it easier for your customers to find what they are looking for without getting frustrated.

Changing the Placeholder Title:

A great way to make search easier is the ability to change the text of the Help Center search box placeholder by using Javascript. For example, instead of simply saying “search” you can change the placeholder to “search our forums” (or whatever text makes the most sense to your business).

A great customer example would be Trulia. They moved their search bar to the middle of the page and made it clear you can search specifically for “Help and Support.”

To add Javascript, go to your Help Center as an Admin, click "Customize Design" in the bottom right, and then click "Edit theme" on the left. Javascript should be one of the tabs listed there (JS). All you’ll need to do is copy and paste the code below:

From the “Tools Panel” select “Customize Design”

Select “Edit Theme”

Select “JS”

Find the following line: $(document).ready(function() {

Add the following code right below the line above

$('#query').attr('placeholder','Search our Forums');

DONE! Don’t forget to save and publish!

Changing Search Sizes and Colors Via CSS:

Changing the size and color of your Help Center search and make it easier for customers to find what they are looking for (not to mention it’s more aesthetically pleasing). Below are examples of how to make your search field and search results more visually appealing by using CSS to customize. All it takes is a bit of code.

The Help Center gives your customers the opportunity to self-serve and search inside the knowledge base content via the search bar. But, did you know that you can configure your search bar to auto-suggest articles using the Help Center API?

For example, searching the word “help” in the search bar would bring up articles with the word “help.” Essentially, the auto-complete API will auto suggest articles with the key word “help” as the customer is typing the question:

Utilizing this feature makes it easy for customers to find the information they are looking for by providing suggestions and creating a positive end user experience.

Now that you’ve customized your Search Box to make it easier for users to find content, measure the effectiveness of search by enabling Google Analytics. Google Analytics will provide additional insights on the effectiveness of search in your Help Center. By using Google Analytics you can see things like what people are searching or what page people give up and use search. In turn, you can identify if you need to re-arrange your content, add articles, change keywords, etc., resulting in a better customer experience.

A common use case our customers have is wanting to limit the content displayed on their Help Center to certain users i.e. paid vs unpaid users. For example, hiding the “Submit a Request” button so once a user is signed-in only those with a paid account are allowed to submit tickets. The unpaid users can only access your knowledgebase.

A combination of CSS & JavaScript can be added to your Help Center to hide the “Submit a Request” button, get information about the current user, check if they’re in an organization with the tag “paid”, and finally show the “Submit a Request” button.

High level configuration:

Add a tag such as “paid” at the organizational level and then associate the user to the organization (or apply a tag such as “free” to unpaid organizations/users). Do similar for other organizations i.e. ‘unpaid.’

[CSS] Hide the "submit a request" button.

[JavaScript] Get currently signed-in user information and, if they’re in the "paid" organization, display the "Submit a Request" button, or keep the button hidden.

A Little More Detail:

Apply tags to organization profiles (See more on Organization Tags) and add users to their respective organizations. Your paid users are in the organization with the “paid” tag, your unpaid users are in the organization with the “unpaid” tag, etc.

Have you ever been on a website, scrolling through endless pages and realize you just want to get back to the top? Many sites have a button at the bottom of the page which will take back to the top. This is an important feature, especially for a smaller screen (perhaps on a mobile device), where pages can become very long. With the “back to top” element, you can do exactly this on your Help Center.

Font selection is an important aesthetic aspect of any website. While the main body of text should always be something optimized for readability, titles and standout text can be your chance to add a unique visuals and spice up your font. With Google Fonts and Custom Fonts you can easily add specialized fonts to your Help Center using CSS.

Google Fonts has hundreds of fonts to choose from and you can add to your theme without uploading anything. You can have titles and standout text can be your space to add a distinct design and feel to your Help Center.

14 Comments

@Alex, looks like copying the code in your screenshot directly from this article might copy 'smart quotes' instead of 'straight quotes'. That's what it looks like in your screenshot and that's how it's working for me.

Try deleting each smart quote in what you've copied into the JS part of your Help Center code and that should do it.

Lindsey will be posting Part 1 at 8am PT, Part 2 at 11am PT, and Part 3 at 2pm PT. After each posting she'll be here watching the comments section and responding to questions. You're encouraged to join the conversation simply by leaving a comment, so Lindsey and other customers who are following the post can chime in.

Yes! It's on the settings page for web widget there are three options: Support, Contact Us or Feedback (located in the gear in the lower right of the agent/admin page). At the bottom it should have a drop down where you can change the text.

@Alex, looks like copying the code in your screenshot directly from this article might copy 'smart quotes' instead of 'straight quotes'. That's what it looks like in your screenshot and that's how it's working for me.

Try deleting each smart quote in what you've copied into the JS part of your Help Center code, replace those with straight quotes, and that should do it.

This was great @lindsay! I started with Part 3 after we suffered a bot attack that generated a bunch of unwanted tickets this week. It would be nice if the organization object exposed in Help Center included custom fields though. To get the trick to hide the submit request button to work, we wound up having to tag a ton of organizations.