Recent searches
No recent searches
Fine Tuning: Help Center Customization
Posted Dec 02, 2015
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.
To find more Fine Tuning articles, see Fine tuning resources.
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.
To learn how to create and edit a Ticket Form check out Creating Ticket Forms to support multiple request types.
*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.
With the Web Widget, you can include:
- Help Center search for knowledge base articles
- Chat for live chat with an agent
- A contact form for filing a ticket in your Zendesk
You can combine one or more of the components, as follows:
- Contact form only
- Contact form and Chat
- Contact form and Help Center
- Contact form and Chat and Help Center
The Web Widget is available on both browser and on mobile. Only admins can add the Web Widget and you must have an open Zendesk instance. Some advanced customizations are possible using the API (see Making advanced customizations to your widget using the API ).
Want instructions on how to add the Widget to your website? Check out Using Web Widget to embed customer service into your website.
Responsive Help Center:
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.
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.
To use the mobile layout on devices:
PRO TIP: Draft Mode
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.
Learn how to Edit and Publish draft articles in the Contributor guide to Help Center Knowledge Base.
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.
- Change the width or height of the search field
- Change the background color of the search field
- Change the appearance of the search text
- Change the appearance of the results page heading
- Change the appearance of the Knowledge base and Community headings
- Change the spacing between the results
- Change the appearance of the result text
- Change the color of the result links
PRO TIP: Looking for more customization? Check out our CSS Cookbook.
Adding Autocomplete Using API:
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.
How can you add this feature?
JS Code:
$.get( "/api/v2/help_center/articles.json?per_page=100" ).done(function( data ) {
var myArray = [];
$.each(data.articles, function (i, object) {
var articleId = object.id;
var articleTitle = object.title;
myArray.push(articleTitle);
});
$( "#query" ).autocomplete({
source: myArray
});
});
Document Head:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
PRO TIP: Use Google Analytics
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.
Improving Your Content Architecture
In Part 3 we’ll discuss three Help Center home page tweaks that make it easier to display content and improve your knowledge base architecture.
Hide Submit a Request and Only Show to Paid Users:
Note: you’ll need to set up a closed Zendesk so users must sign in.
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.
Figure 1. Example Organization Configuration for a "paid" user:
Figure 2. Example Organization Configuration for an "unpaid" user:
Back to the Top:
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.
Here’s an example of how it looks:
It’s a quick add that can be configured in minutes. Learn how to Add arrow to scroll back to the top of the page by viewing this article.
Using Google Fonts or Custom Fonts:
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.
- First, go to Google Fonts and select your font or fonts.
- Get started! Google Font is going to give you a code to add into the “Document Head” in your Help Center.
Custom Fonts:
Love Google Fonts and interested in even more unique ways to display text? Check out Custom Fonts! Similar to Google Fonts, you’ll use CSS to allow customization to your font.
Worried you don’t have the resources? Here’s what you’ll need:
- A custom web font, with the following files
- webfont.ttf
- webfont.eot
- webfont.svg
- webfont.woff
- Custom theme in the Help Center
- Some CSS skills
Follow these steps to add a custom font family to your Help Center. Once you’ve finished adding code and customizing your CSS, your Help Center will appear with the updated fonts.
Easy tweaks, big benefits!
PRO TIP: Advanced Theming
Also, check out our theming templates that allow for a more flexible approach to customizing your Help Center.
0
14 comments
Official
Jeremiah Currier
@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.
Here's a video I recorded showing me previewing the Search input field before/after my suggestion.
Give it a try.
-Jeremiah
Application Engineer, Zendesk
0
Rim HAMDI
Was about to ask if the discussion would be saved in case I missed it. Found answer here :) https://support.zendesk.com/hc/en-us/community/posts/203459706-Fine-Tuning-series-discussions
0
Marybeth Sklar
Is the reading information and Q&A somewhere else?
0
Caitlin Wood
Hi Marybeth,
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.
Hope that helps!
0
Karen Biscopink
Hi Rim,
That's correct! The three parts of Lindsey's post and the discussion here in the comments section will remain online, so you'll be able to reference this at any point in the future.
Thanks for joining!
0
ihipsman
Hello-
On the web widget. Can it be modified to say help center and not just help
.
0
Lindsey Fischer
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.
0
ModeratorWes
Great post so far Lindsey. I'm following in case anyone has any questions on my responsive themes.
0
Lindsey Fischer
We just posted our 11am tips on Optimizing the Search experience. Join the discussion by posting in the comments section.
0
Alex Zlatkus
I seemed to add the code in order to change the Search text, what am I doing wrong (see attached code)
0
Jeremiah Currier
@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.
Here's a video I recorded showing me previewing the Search input field before/after my suggestion.
Give it a try.
Update | This article has been updated so copying the code directly from this article now will be copying straight quotes instead of smart quotes.
-Jeremiah
Application Engineer, Zendesk
0
ModeratorWes
@Jeremiah - Thanks for jumping in and resolving the issue.
0
Alex Zlatkus
Genius! Show how much I know about coding....thanks guys.
Alex
0
Rob Baker
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.
EX:
Object {name: "orgName", default: "domainName", tags: Array(0), isShared: false}
NOTE the absence of organization_fields .
0