How to install Table of Contents extension

Note

To use this extension, you need to purchase it from our website.

For our clients’ convenience, we provide a free installation service of our extensions.

You can also install an extension by yourself if you like. It is rather simple, use the following instructions.

Step 1. Unarchive the downloaded zip file.

There will be 3 files:

  • toc-min.js
  • toc.css

Step 2. In Guide, click on the "Customize design" icon in the sidebar.

The Theming center page opens.

ae-demo.zendesk.com_theming_workbench_Laptop_with_HiDPI_screen_.png

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

ae-demo.zendesk.com_theming_workbench_Laptop_with_HiDPI_screen_.png

Step 4. Click the "Edit code" button.

ae-demo.zendesk.com_theming_workbench_Laptop_with_HiDPI_screen___3_.png

Step 5. In the Assets section, click Add asset, then browse to select your files. 

ae-demo.zendesk.com_theming_workbench_Laptop_with_HiDPI_screen___5_.png

Select all *.js and *.css files from unpacked zip.  The files are added to your list of asset files.

ae-demo.zendesk.com_theming_editor_a88edbf4-f1e0-45d5-b8fe-5bee2e9d7811_templates_document_head.hbs_Laptop_with_HiDPI_screen___2_.png

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

The file content is displayed.

ae-demo.zendesk.com_theming_workbench_Laptop_with_HiDPI_screen___7_.png

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

<link rel="stylesheet" href="{{asset 'toc.css'}}" />
<script src="{{asset 'toc-min.js'}}"></script>

ae-demo.zendesk.com_theming_editor_a88edbf4-f1e0-45d5-b8fe-5bee2e9d7811_templates_document_head.hbs_Laptop_with_HiDPI_screen___1_.png

Step 8. Click Publish. The table of contents navigation is displayed in articles.

Configuration options

Options can be passed to the data-toc attribute as a valid JSON object.

Name Type Default Description
articleBody String [data-article] The CSS selector with article content. It will be used to find heading
headers String h1, h2, .wysiwyg-font-size-x-large, .wysiwyg-font-size-large The CSS selectors are used to identify headings.
title String Table of contents A title that displays on the top. The empty string removes the title.
offsetTop Number 40 The offset from the top of the screen.
hideIfLabel String null If the article has a label name specified in this option, the Table of Contents will be hidden. You need to pass a list of the current article label names in the lables option.
showIfLabel String null If the article has a label name specified in this option, the Table of Contents will be displayed. The Table of Contents will be hidden in other articles without this label name. You need to pass a list of the current article label names in the lables option.
labels String null Comma-separated list of the article label names.
showEmptyBlock Boolean false Displays the empty Table of Contents if none of headings are found
isFixed Boolean true Makes the Table of contents to be sticky when scrolling

Extensions Bundle

Get 6 most popular extensions for your help center with a total price of $1,218 for $548 only.

  • Side Navigation
  • Prev Next Buttons
  • Table of Contents
  • Community Hot Posts
  • Alerts
  • Server Status
Learn More
Did this answer your question?
Still can’t find what you’re looking for?

Hire an expert

Our consultants and developers are Zendesk Guide certified.
Free up your time for your business while we take care of your help center.

Get a Quote

Ask a question

Not sure how something works or how to make changes?
Don’t worry, we’ll answer all your questions.

Contact Us