Design and styling
Create a look-and-feel that perfectly matches your brand
Customizing your theme
-
Using Google fonts in your theme
The following steps allow you to take advantage of the large range of custom fonts offered by Google.
-
Branding your Help Center
You can change the look-and-feel of the Help Center using theme setting controls including color pickers and font choosers. For example, you can change the logo, colors and fonts to bring your Help Center into line with your company’s branding guidelines.
-
Editing CSS and JavaScript
You can customize your Help Center’s stylesheet and add your own custom JavaScript code. For tips, tricks and other helpful resources, refer to the following articles:
-
Editing and compiling styles using Sass
When editing theme styles you can update the style.css file directly, either through Zendesk Guide or locally using your favourite code editor. Alternatively, you can work with the Sass source files directly, which requires that you re-compile the styles once you have made your changes.
-
Using your own theme assets
You can upload assets, such as images and files, to any of your Help Center themes.
Updating page templates
-
Rendering HTML using JavaScript
When Zendesk’s Curlybars templating language can’t generate the desired HTML, our JavaScript-based micro-templating system steps in.
-
Understanding Guide templating
Guide templating, also known as the Templating API, is responsible for rendering the Help Center theme packages. This contains the Curlybars templating language that is used in the template files, CSS and JS files, and the manifest file.
-
Customizing page templates with HTML and Curlybars
The HTML for the Help Center is contained in editable templates that define the layout of each page type, as well as the global header and footer. You can also use a full-featured templating language called Curlybars to access Help Center data and manipulate content in page templates.
-
Using variables in CSS and HTML
The properties you choose in the Settings panel or set in your manifest file for colors, fonts, and theme images are stored in variables. You can use these variables in the theme’s style.css file. You can also reference the variables using Curlybars expressions in HTML page templates.
-
Adding multiple templates to your theme
By default, there is one page template each for article, section, and category in a theme. You can create up to ten additional page templates each for articles, sections, and categories.
-
Changing page templates in Guide
In a Guide theme, there is one page template each for article, section, and category by default. On Guide Enterprise, Guide managers can create additional templates for article, sections, and categories. If your live theme has multiple templates for these template types, you can change the template for an article, section, or category at any time.
Adding visually engaging elements to content
-
Increasing engagement with icons
Instead of bloating our themes with extra font files containing icons that you may or may not use, we inline SVG icons which offer better page load performance and improved accessibility over font-based icon systems. Zendesk’s default Copenhagen theme recently made the same change with the release of the new theming API.
-
Drawing attention to information with call outs
A great way to highlight important aspects of your content is to use callouts. These are typically expressed as tips or notes, though the specific language used should be consistent with your company’s brand.
-
Getting technical with code blocks
The <code> and <pre> elements are for displaying inline and multiline blocks of code.
-
Adding figures and images to articles
Use the <figure> element to display self-contained content, like illustrations, images, photos or code. For image-specific styles, refer to the Images page.
-
Customizing list styles
Use .list-unstyled to remove the default styling from <ol> and <ul> elements.
-
Emphasizing points with block and pull-quotes
Blockquotes
Enhancing content with interactive elements
-
Using tabs to organize content
Tabs are a navigation element that allow users to easily access different parts of a page, or even other parts of the Help Center. They are commonly used on the Web and, as a result, intuitive.
-
Making content easy to find with toggles and accordions
Toggles and accordions are a common element in web design. They allow for progressive disclosure — the ability to highlight important sections of content and allow visitors to reveal additional details with a click.
Customizing CSAT
-
Understanding CSAT
Your customers can provide feedback about their support experience by rating their solved tickets. When you enable CSAT (customer satisfaction ratings), end-users receive an email 24 hours after the ticket has been set to solved that asks them to briefly evaluate their experience, as shown here:
-
Using CSAT
Enabling customer satisfaction ratings
-
Displaying satisfaction ratings in the Help Center
You can display satisfaction ratings in your Help Center. This lets you show quick statistics based on your last 100 satisfaction ratings. The following data is shown:
-
Customizing your customer satisfaction survey
One of Zendesk Support’s most popular features is the built-in customer satisfaction survey. Customer satisfaction allows you to track how well your agents and customer service organization as a whole are performing on a ticket by ticket basis.
-
Working with satisfaction reasons
Applying satisfaction reasons to ticket views
-
Enabling and customizing satisfaction reasons
Customer satisfaction rating surveys allow you to measure how happy your customers are with the services you provide. Inevitably, you’re going to receive a less-than-glowing response (rare as it may be). You can learn about the issues behind a bad satisfaction rating by asking any customer who gives a negative survey response to select a reason for their dissatisfaction.
Customizing the Web Widget
-
Using the Web Widget
With the Web Widget, you can add customer support features from Zendesk Guide, Support, Talk, and Chat to your website or Help Center, so that your customers can get immediate help from a single interface, in whatever form they like best.
-
Configuring Web Widget components
Before you add the Web Widget to your website or Help Center, you need to decide which components you want to include in the Web Widget and then turn them on. For some components, you might need to go a step further and configure additional settings. You must be an administrator to configure components in Web Widget.
-
Adding the Web Widget to a website
The Web Widget can be added to any page of your website or to your Help Center.
-
Customizing the appearance of the Web Widget
You can modify the appearance of some or all of the following widget elements to match the look and feel of your company’s website.
-
Removing the Web Widget from your website
You can remove individual instances of your widget by deleting the code from the web page or Help Center. You can turn off all instances of the widget by disabling it in Zendesk Support.
