Most of today’s online customers will only tolerate… and trust… user-friendly websites that are consistent in brand, appearance, and functionality.
As powerful as Zendesk’s Cloud-based help desk management software can be, if it appears and works like a separate site, it can be confusing and a turn off to your users. Red flags may go off as they wonder if they’re sharing their info with the company they expected, and they may opt to contact you via other more expensive and time-consuming methods -- or just go somewhere else.
Fortunately, Zendesk provides helpful ways to completely match your brand, inspiring customer confidence and loyalty. This series of articles will help you through the customization effort quickly, without deep knowledge of Zendesk or coding languages. Soon, your website and help desk will be seamlessly integrated -- representing your brand in a consistent, accessible way.
Customizing Zendesk’s Help Center
The newly revamped Help Center in Zendesk, now called Guide, provides powerful methods for customizing every aspect of your online help desk that customers, support staff, partners and vendors may encounter including logo, the appearance of text (font), color scheme, layout of content elements, navigation, email addresses and email appearance.
Zendesk’s previous version, the Web Portal, allowed some customization but required a knowledge of CSS, HTML and other techie know-how to really make the portal consistent with a website. The new Help Center provides easy tools for quick changes such as font choosers, color pickers, and a selection of preset themes for content layout.
Selecting a Theme
The first step in branding your help desk site is to choose how the header, footer and content will be laid out. Zendesk’s Help Center makes this easy by providing a list of preset themes to choose from. These are valuable shortcuts -- not only is the design work done for you, but you can be confident the themes meet standards in web design, speed and usability. For example, the “Cohenhagen” responsive theme works well on mobile and desktop with little customization required. If no theme really suits your purpose, you may have the option to chose the one closest to what you want and then customize its template (or hire a company like Myndbend to do it for you).
Note: Most service plans allow users to edit the HTML, CSS, Javascript and assets of all preset templates. (Those on the Essential plan are not able to customize, so you might want to discuss your options with Zendesk sales.)
To choose a theme:
- Log in to the Zendesk back end and click on the four-square icon next to your profile picture, in the top right corner of the screen.
- In the window that appears, click on “Guide”. A new tab or window will pop up displaying your Help Center.
- In your Help Center, click on “Guide admin” in upper right corner. This will take you to the Guide backend editor.
- In the navigation on the left side of the screen, click on “Customize” (eye icon).
- A new view will appear with options on the left side, and you Help Center on the right.
- Click the “Switch Theme” link which will open the gallery where you can browse and preview themes including those that are saved, customized versions.
- To edit a theme, click on the “Edit Theme” option that is right next to switch theme. Click on the CSS tab, and edit the style settings as you desire. To save your new settings, click the Publish Changes button at the very top of the sidebar.
Read Customizing Zendesk’s Help Center Theme
Setting Colors and Fonts
The Appearance panel allows you to choose colors for five different elements of your help desk site (background, foreground, text and link colors) and two types of fonts (text and title fonts) that will be displayed.
Basic Branding
To add your logo and company name to your Help Center:
- Use the “Change” link to upload a logo image. (To look right, the image will need to be either transparent or the same color as the header.) The image’s background size is 200 width x 50 height, and the image will be automatically resized to fit. If you have a tall logo, the image may be reduced to a very small size.
- With service plans that allow theme customization, you can change the logo dimensions. Click on the Customize (eye icon), and choose the Edit Theme link. Click on the CSS tab, and insert the following rule into the CSS template, changing the height setting to match your logo:
.logo img { vertical-align: middle; height: 80px; content:url("http://path_to_image/image.png"); }
Under the upload logo option, there is an option to upload favicon. This is a small image that uniquely identifies your help desk on a browser’s tab or to the immediate left of a URL in a browser’s address bar. Click change to upload your own favicon. Square images work best, and will be resized to fit properly.
Enabling the mobile site in Help Center
By default, the desktop website layout is used for mobile devices. However, you have two options for a mobile optimized help center site:
- Use a responsive theme like Zendesk’s default, “Copenhagen.” This is preferred as the customer experience will match regardless of their device of choice.
-
Use Zendesk’s mobile layout option (if you aren't using a responsive theme). This is especially useful if you have a complex help center design that has poor usability on a smaller screen. The Zendesk mobile layout is a standard look and feel for mobile with only limited logo and color options.
- In Guide, click the Settings (gear icon) in the sidebar.
- Under Integrations, select the Mobile Layout option.
- Click Update.
Backing Up Your Changes
If you customize your theme’s templates you will need a way to backup and save revisions of your work. You do not want to risk losing your work if another user accidentally overwrites your changes. It’s also useful to have a way to compare your current theme to older versions.
Currently, there is no easy way to download all of the files. Our recommendation is that you create a folder/directory on your own machine named “Zendesk_Theme_DATE_OF_MODIFIED,” and backup each file separately (copy the contents from the template page to a text editor). You can then save each file named by their respective template in the theme such as “footer.html”, “header.html”, etc. If you ever need to revert the changes in your theme, you can copy the code from the saved files and paste into the theme editor.
Tip: Upload your theme to a cloud file share site such as Dropbox or Google Drive for revision history. Developers may choose to use Github.com or Bitbucket for the powerful revision control and “diff” features.
What do you think of the new Zendesk Help Center options for customization? Leave a comment below...
Ellen Berry is Content Director for Myndbend. Her background is in website development, graphic design, career development, project management, entrepreneurship, technical writing, and journalism. She has worked for small start-ups, Fortune 500 companies and nonprofits, in fields including biomedical research and development, IT, finance, telecommunications, publishing and digital media. Her articles are frequently published on high profile websites such as USAToday, ScientificAmerican, TechRepublic and MonsterWorking.