Overview

In our article on customizing your Help Center appearance, we introduce the basics of making changes to Kayako's look and feel. Virtually every corner of your customer-facing content — whether on the Help Center or in your automated emails and notifications — can be customized by making changes to whichever template governs its appearance. By editing these templates, you can control how your Help Center and communications appear to your customers.

This article provides details about the Kayako's templating tools work, how to make and save your changes, and gives you a rundown of all of the templates you can edit.

Prerequisites

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

Solution

Understanding How Templates Work

In Kayako, when we talk about templates we are talking about the HTML documents that control how your content is presented. You have editing access to the templates that control your Help Center, your automated emails, and your satisfaction surveys.

When editing templates, you will be working primarily with four elements:

• HTML code — Each template includes HTML code that provides the basic framework for your content.

  

  This code is responsible for the layout and overall structure for the email or Help Center page. You can add to or modify this code just as you would for any other HTML web page.

• Content blocks — In addition to the HTML framework, you will also see content blocks, which look like this:

  

  Any time you see a set of double curly brackets in a template — i.e., {{ content-thing }} — this denotes a content block. Each block contains a predefined chunk of code that is then displayed when the page is rendered. We use content blocks in our templates for a number of reasons:

  • They make it possible for us to make improvements and updates to key pieces of the Help Center without disrupting any customizations you have made.
  • They dramatically reduce the risk of breaking important Help Center functionality, when editing templates.
  • They make Kayako's templates much less complex and easier to modify.
  • For a complete list of Placeholders see the Help Center Placeholders article

• Arguments — While placeholders are used to specify dynamic content, arguments are more complex, and can be used to make conditional formatting changes to your templates.

  

  You will know you are looking at an argument if it is encapsulated in single curly brackets and percentage signs — { % argument-thing %}. The if argument above is probably the most common, which will tell Kayako to display what comes after it only when the if conditions are met. But there are more than a dozen other arguments you can use to build complex conditional formatting changes.

• Custom CSS styles — The last element you might use while editing templates are custom CSS styles. CSS lets you define custom formatting for specific elements of your Help Center. You can add as many custom styles as you like, from the 'Customize' panel on the Help Center, by selecting Custom CSS from the toolbar.

  

  Once you have defined a style, you can call it for any HTML element in any of your Help Center templates.

  Note: Custom CSS styles are not available when editing your email or survey templates.

List of Editable Templates

Now that we have covered the different elements that makeup Kayako templates, let us have a look at how to make your own changes.

Back to top

Steps

To edit a template, follow the steps below:

1. Sign in to Kayako and go to the Help Center.

2. Click the Customize button on the upper toolbar.

3. On the customization pane, click the Customize templates heading.

4. From the Templates drop-down, select the template you would like to edit. 

   
   

5. Once you have selected a template, make your changes to the code.

6. If you need to restore the original template, click the Revert to default button.

   Note: If you are editing a template that has already been customized, it is a good idea to make your own local copy of the template contents, in case you want to roll back only your most recent changes.

7. Add your own CSS styles on the Custom CSS tab.

8. When you have finished making your changes click the Save button.

9. Back out of the 'Customize' pane, and refresh to make your changes live.

And that is it! Once you're done saving your work, just refresh the Help Center page and any changes you made to your templates will become live.

Back to top