Customizing the Appearance of Your Help Center

Overview

To make outstanding self-service easier to deliver to your customers, Kayako comes equipped with a powerful Help Center customization tool. From adding logos and color schemes to directly editing the HTML templates and CSS styles, you can use the customization tool to control every aspect of how your Help Center looks and feels.

In this article, we will introduce you to how Kayako's Help Center customization works. We will walk you through the customization panel, talk about how to make basic changes, and point you toward some in-depth resources, to help you tackle your first template editing project.

 

Diagnosis

Understanding How the Customization Panel Works

Customizing your Help Center in Kayako starts simple. Whenever you're logged in and looking at a Help Center page, you will see a Customize button in the upper-right. Clicking it will open up the customization panel.

 

There are four sections of the customization panel:

• Branding: Edit the title of your support center, as well as uploading your own logo and favicon images.
• Look and feel: Select an accent color and font to use throughout the Help Center.
• Customize templates: Wield ultimate power over your Help Center's appearance.  From here, you have access to the HTML templates that are used to display every corner of your support site. Pick a template, make your changes, add custom CSS styles, and do it all without fear of irrevocably borking anything. There is a Revert to default button close at hand if things start to go sideways. Learn more in our user guide article about modifying your Kayako templates.
• Settings: Toggle whether Messenger is enabled on your Help Center, or add in a Google Analytics code to help keep track of how your visitors are using your site.

Now that you have had a glimpse of what is possible here, let us take a look at how to start making changes.

 

Prerequisite

• To customize the appearance of your Kayako Help Center, you will need an administrator account with the Manage channels permission.

 

Solution

Making Basic Appearance Changes

The first two sections of the customization pane let you drop in your own logo images and play around with the font and accent color.

To change your Help Center's basic appearance:

1. Sign in to Kayako and go to the Help Center.
2. Click the Customize button in the upper-right corner.
3. On the 'Customize' pane, click the Branding heading.
4. In the Help Center title field, add a page title.
5. Click the Logo field, and select an image to use as your logo.
6. Repeat the same process for the Favicon field, selecting a small square image to display on the browser tab.
7. Next, click the Look and feel heading.
8. From the Primary color field, pick or type in the code for an accent color.
9. Select your preferred typeface from the Font dropdown.
10. Click the Save button at the top of the pane, to see your changes appear on the Help Center.

 

Editing Your Help Center Templates Directly

From the Customize Templates section of the customization pane, you will have direct access to the HTML files that control how your content is displayed on the Help Center. As you can imagine, there is a lot of potentials here for delivering a  carefully tailored customer experience.

To get started with some heavier customization tasks, check out our user guide article on editing your Help Center templates.

 

Enabling Messenger and Google Analytics on Your Help  Center

The last section of the customization pane will let you toggle  Kayako Messenger on or off, as well as giving you a place to plug in a Google Analytics code.

To modify the Messenger and Google Analytics settings for your Help Center:

1. Sign in to Kayako and go to the Help Center.
2. Click the Customize button in the upper-right corner.
3. On the Customize pane, click the Settings heading.
4. To toggle Kayako Messenger on or off, click the 'Show messenger' toggle.
5. To enable Google Analytics for your Help Center, get a  tracking code from your Google Analytics account, and paste it into the Google Analytics text box.
   NOTE: If you need help finding your Google Analytics tracking code, this article Set up the Analytics tag from Google's documentation should do the trick.  
6. The changes you make in this section are saved automatically, so you can just hit Close to back out of the customization pane and back to your Help Center.

 

Confirmation

Once you're done making the changes and saved your settings, you will see your changes appear on the Help Center such as your new logo, favicon, color scheme, etc.