Changing category, section, ticket form, topic icons

In Zendesk, there's no easy way to add an icon to a category, section, topic, or ticket form. Luckily, we have an extension that adds this functionality to Zendesk themes.

1. Unpack the downloaded zip file. There will be a file:lotus-icons.js

2. In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.

3. Click the theme you want to edit to open it.

4. Click the Edit code button.

5. In the Assets section, click Add asset, then browse to select your files. Select the lotus-icons.js file from the unpacked zip.  The file is added to your list of asset files.

6. In your theme code configuration page under the templates directory, click the document_head.hbs file.

7. In the document_head.hbs file, paste the following snippet:

   <script src="{{asset 'lotus-icons.js'}}"></script>

8. Initialize extension. Check if you have the following code in the “document_head.hbs” template:

   window.LotusConfig = {}

   If that code exists, add the Lotus Icons initialization code between the curly bars ({}), so it will look like this:

   window.LotusConfig = {
     icons: {
       default: "{{asset 'icon_one.svg'}}", // 'icon_one.svg' is the name of one of your icons from the Assets folder in steps 1 & 5. Insert your icon file name
     }
   } 

    If you have no such construction in the current code, even window.LotusConfig = {}, make sure to add it inside the script tag:

   <script>
     window.LotusConfig = {
       icons: {
         default: "{{asset 'icon_one.svg'}}",
       }
     } 
   </script>
   

9. Display the icon in the desired place. For the img tag, you need to specify the data-lotus-icon attribute, passing the desired Id to its value.

   Output through a loop, for example, on the home page:

   {{#each category}}
     <img data-lotus-icon="{{id}}" />
   {{/each}}
   

   Output in category template:

   <img data-lotus-icon="{{id}}" />

   Output via specifying Id directly:

   <img data-lotus-icon="200271742" />

Where can I find a category/section Id?

Id is a unique numeric identifier that can be found in the URL. Let's say we have the FAQ category with this URL:

https://your-help-center.zendesk.com/hc/en-us/categories/200271742-FAQ

In this case, the current category Id is 200271742.

How to find a ticket form Id?

If you use our Improved Ticket Form selection extension, you may need to add the icons to the form.

You need to open the ticket form and copy its Id from the URL:

https://your-helpe-center.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000216960

In this case, the ticket form Id is 360000216960.

Where to upload the icons?

To upload your own theme assets

1. In Guide, click the Customize design icon in the sidebar.

2. Click Customize on the theme you want to edit.

3. Click Edit code.

4. In the Files section, click Add new, then select Asset.

5. Browse to select your file. Theme asset names must be unique and cannot be more than 50 characters. Asset names can contain any of the following: letters, numbers, dot, minus, plus, underscore, and dash. We recommend using SVG format.

   The asset file is added to your list of asset files.

Where to get icons from?

You can use any icons you have or a Font Awesome free icons library, or Streamline free icons.