Although Zendesk provides helpful tools that make it easy to customize their new Help Center (formerly Web Portal) without any knowledge of programming languages, you may desire to create a unique appearance for your online help desk. While the previous article in this series, Seamless Service: Branding Your Zendesk Help Center, provided steps for basic branding such as adding a logo, setting colors and fonts, and choosing a preset layout, this article gets into how to make code-level adjustments within Zendesk.
Note: Zendesk’s Starter Plan does not allow customization. You can, however, make edits during the trial period, which is based on the Plus plan.
If you want to make changes to the home page, global header and footer, category and section landing pages, article pages, search results and error pages, or the document’s head tag, you will need to edit the HTML template that handles each of these.
Editing Help Center’s HTML
After logging in to Zendesk’s admin, click on the lifesaver icon on the bottom left. Help Center will pop up as a new tab or window.
Click “Customize Design” in the tools panel on the bottom right to switch to Preview mode. The sidebar appears on the left.
At the top of the sidebar, a panel for Theme shows the current preset or custom template in use.
Click “Edit Theme” at the panel’s bottom right, and you’ve got convenient access to the HTML.
Click “Select template” to choose from a list of available templates.
Although Zendesk automatically makes a copy of the template you are editing, and you can revert to the previous version at any time, as an extra precautionary step, you have the option of making a backup of the current template. Click the “Switch Theme” button. You will be prompted to save the current theme, and the saved version will appear at the bottom of the themes list.
The link “View available components” beneath the HTML editor makes it easy to add features like a breadcrumb trail, category list or tree, chat, or a link to creating support requests or dynamic content placeholders.
You can also reorder or remove components, embedded third-party widgets, etc.
You may wish to copy and paste the code into an HTML editing program for easy editing and as an active backup in case you lose connection with Zendesk.
Clicking Preview at the top of the Zendesk HTML editor will load your revised code in the main window.
When you are ready to save your code, click the “Save” button at the top of the sidebar. This will save the theme, but your changes won’t take effect until you apply the theme by selecting it from the list and click “Publish Changes” at the sidebar’s top.
Important note: You can only customize one theme. If you make changes to one theme, such as “Wiry Merchant”, and then customize “Noble Feast” instead, your changes to “Wiry Merchant” will be lost (another reason to save them outside of Zendesk in an HTML editing program).
Working with Unsafe HTML
As a safety precaution to prevent the introduction of malicious code, Zendesk automatically identifies and removes HTML tags and attributes that are considered unsafe. Because of this, your edits may not display as you intended once published and viewed in a browser.
strong, em, b, i, p, code, pre, tt, samp, kbd, var, sub, sup,
dfn, cite, big, small, address, hr, br, div, span,
h1, h2, h3, h4, h5, h6, ul, ol, li,
dl, dt, dd, abbr, acronym, a, img, blockquote, del, ins
href, src, width, height, alt, cite, datetime, title, class, name,
Although overriding this default may create a security risk for your site, you can allow all of your edits to be sent to browsers by clicking on “General Settings” in the Tools menu and selecting the option “Display Unsafe Content”. Click Update to save.
When you set variables for color and font in the Appearance panel (see Seamless Service: Branding Your Zendesk Help Center), those variables are saved for convenient use in the CSS. Assigning a variable to a CSS property works just like assigning a normal value, and makes applying consistent colors and fonts a snap.
Using Your Own Images and Other Assets
While editing your help desk’s code, you might wish to add images, PDFs, zipped files and other assets in ways the preset templates don’t provide. The Assets tab, to the right of JS at the top of the editor panel, allows you to upload these. You can modify and overwrite images provided in the preset templates, or use your own files. This tab is also a convenient way to see the name and path of existing assets.
Click the “Add File” link below the list of assets to select which file(s) you wish to upload (100 MB is the max file size).
Clicking on an asset’s name will display it in a separate browser tab. To delete an asset, hover over it with you mouse pointer and click the “X” that appears to the right of the path.
When you’re done working, click the “Save” button at the top of the sidebar.
Setting a Background Image
A great way to take advantage of these code editing tools, bring a unique appearance to your Help Center and enhance your brand, is to include a background image that appears behind your content in the main body area. To do this:
- Upload the image you want to use as a background
- Edit this code in the CSS:
background-position: bottom right;}
This process is simple and avoids struggles with overriding the CSS.
Need advanced coding to customize your Help Center? Myndbend specializes in all aspects of seamless branding. We are an official partner of Zendesk.
These articles have in-depth info and more examples of what you can do to customize your Help Center:
How have you used Zendesk's code editing options to customize your online help desk? 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.