Design and styling

Create a look-and-feel that perfectly matches your brand

Customizing your theme

  • Using Google fonts in your theme Promoted article

    The following steps allow you to take advantage of the large range of custom fonts offered by Google.

    Read more...

  • 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.

    Read more...

  • 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:

    Read more...

  • 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.

    Read more...

  • Using your own theme assets

    You can upload assets, such as images and files, to any of your Help Center themes.

    Read more...

Updating page templates

  • Rendering HTML using JavaScript Promoted article

    When Zendesk’s Curlybars templating language can’t generate the desired HTML, our JavaScript-based micro-templating system steps in.

    Read more...

  • 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.

    Read more...

  • 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.

    Read more...

  • 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.

    Read more...

  • 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.

    Read more...

  • 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.

    Read more...

Adding visually engaging elements to content

  • Increasing engagement with icons Promoted article

    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.

    Read more...

  • 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.

    Read more...

  • Getting technical with code blocks

    The <code> and <pre> elements are for displaying inline and multiline blocks of code.

    Read more...

  • 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.

    Read more...

  • Customizing list styles

    Use .list-unstyled to remove the default styling from <ol> and <ul> elements.

    Read more...

  • Emphasizing points with block and pull-quotes

    Blockquotes

    Read more...

Show all 8 articles

Enhancing content with interactive elements

  • Using tabs to organize content Promoted article

    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.

    Read more...

  • 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.

    Read more...

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:

    Read more...

  • Using CSAT

    Enabling customer satisfaction ratings

    Read more...

  • 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:

    Read more...

  • 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.

    Read more...

  • Working with satisfaction reasons

    Applying satisfaction reasons to ticket views

    Read more...

  • 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.

    Read more...

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.

    Read more...

  • 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.

    Read more...

  • Adding the Web Widget to a website

    The Web Widget can be added to any page of your website or to your Help Center.

    Read more...

  • 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.

    Read more...

  • 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.

    Read more...

  • Getting started

    Don't know where to start?

    Get familiar with our product's features in our documentation.

  • Getting started

    Can't find what you're after?

    Contact us and we'll get back to you as soon as we can.