Customizing Your List of Categories in Help Center to Include Images
We've customized our Help Center pretty extensively, and one of the things we like the most is that we added icons to each of the categories. This allows our more visual users to see where they might want to go at a glance.
To do this, you'll first want to start adding the custom categories to the home page.
- Go to "Customize Design"
- Click on "Edit Theme"
- Edit "HTML: Home page" and add the customer elements here. I used the built-in CSS class "category-list" for styling.
- You'll want to get the URLs from the built-in categories and add them to the custom category listings you create.
Once all the custom categories have been added to the HTML code, you can remove the {{category_list}} component.
That should get you started! Let me know if you have any additional questions about this process. I'm attaching some images as well that may prove helpful to you.
-
Excellent info, thanks for sharing. This might be a n00b question, but how did you get the "Your Support Team" column to show up? Did you just write the code for that yourself, or is that a plug-and-play component in the editor?
-
@James
Not a n00b question at all. I did use custom code to get that in there. I put the category lists into a separate <div>, which I made smaller, then created a <div> that floats right, which is where I hard coded in the support team images and names.
Not too challenging, but does take a little work.
-
In case anyone is wondering how to figure out the HTML to put in: view source on your "home" page...look for the category list....and copy the <ul> with all the <li>s in it. Paste it into the HTML code editor in place of the {{category_list}} placeholder. Customize the pasted HTML with images, etc.
Save a copy of your code somewhere else....updating the Help Center seems to erase the changes you've made to the theme. (I've read there's a way to save your theme...but haven't found it yet....anyone know?)
-
Found it...it's a little scary! You have to switch themes.....and go all the way to "publish changes". Then you'll be presented with dialog saying "you are editing a custom theme that has not been saved...you're going to lose changes....want to save?" then you give it a name.
-
Hey Marci,
Nice to see you! Thanks for sharing. I'll ask Charles to add saving your theme to the HC docs if it's not already there somewhere.
Thanks again!
-
All of my images are in place, however the URLs are not clickable!
-
Hi Sam,
Thank you for publishing this article on how to customize the HelpCenter, I found it easy to implement and it looks great.
My question is aimed at Zendesk or anyone that has implemented a similar customization in the HelpCenter to present Categories as images in a multi-language setup.
We have noticed in HelpCenter each Category is defined by it's language, we can see this when you leave in the {{category_list}} component in the "HTML: Home page" code and then switch between languages the same Category box has a different URL, there is a language indicator in the URL after hc/, for example:-
English- https://{account-name}.zendesk.com/hc/en-gb/categories/200023222-bla-bla-bla
and
German - https://{account-name}.zendesk.com/hc/de/categories/200023222-bla-bla-bla
We have also read in the following article that each level of the Knowledge hierarchy; Category/Section/Article in HC are all now language specific. https://support.zendesk.com/entries/22645797-Localizing-the-Help-Center, previously in web portal we think Category was generic. Therefore this means we cannot use a hard coded URL in the "HTML: Home page" for the category.
My questions are: is there a generic URL that can be used for each Category that is the same for each language chosen?
if not, then
Is there a way in the to utilize Sam's approach of hard coding the URLs but be able to discover the language in the code and use the language value in a CASE or IF/THEN statement so the relevant set of language specific Category URLs can be presented.
thanks, Mark
-
Similar question to Mark's....when you use the {{category_list}} component the system also retains the intelligence to hide and display categories based on your category settings and level of access. Is there any way to encode the urls to use custom icons AND hide categories the way the {{category_list}} component does?
-
This is fine, but you can't use template components. As stated before, using {{category_list}} doesn't assign specific ID's for each category, so there's no way to style the individual links. Because of this, categories have to be manually added into the theme each time a new category is created. Any way around this without a JS hack??
-
@David - See if this script will help you.
-
sorry for reposting, meant to post here:
having issues implementing this:
$(document).ready(function() {
var $section = $('.section-list a').each(function(){
url = $(this).attr('href');
val = url.substring(url.lastIndexOf('/') + 1).toLowerCase().replace(/\d+/g, '').substring(1);
sectionImage = '<img src="//p3.zdassets.com/hc/theme_assets/XXXXXX/XXXXXX/'+ val +'.png">';
$(this).prepend(sectionImage);
});
});does not seem to work for our HC, am i doing something obviously wrong? I put the full url for the assets. I am trying to achieve pictures beside each section, and would like to do something similar for the categories as well. any help is much appreciated
Please sign in to leave a comment.
11 Comments