Customizing the appearance of your Help Center

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'll introduce you to how Kayako's Help Center customization works. We'll 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.  

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'll see a Customize button in the lower left. 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. For real though. 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's 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've had a glimpse of what's possible here, let's  take a look at how to start make changes.

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.

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

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 lower  left 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'll have direct access to the HTML files  that control how your content is displayed on the Help Center. As  you can imagine, there's a lot of potential 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/or 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. 

NOTE: To edit the Messenger and Google Analytics options  for your Kayako Help Center, you will need an administrator account with the 'Manage  channels' permission.

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 lower  left 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 from Google's  documentation should do the  trick.  
6. And that's it! 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.