HTML5 Layout Editor Options

Use Algolia search

If you want to use the high-end Algolia search engine in your help output, enable this. (Requires separate Algolia subscription).

Elastic Search (Swiftype)

If you prefer a crawler-based indexing search engine, Elastic Search (Swiftype) is another powerful option.

To enable Swiftype, add the key (only) from the code snippet in the Swiftype control panel.

Use fuzzy search

If you do not want to use Algolia, and the default search is not your preference, the fuzzy search is another built-in option.

Use multilingual support for default search

If using the default search, but you need support for multiple languages, enable this. Disabled by default since it adds unnecessary files if you don't have the need for multilingual publishing.

Include excerpt snippets

Applies to default search or fuzzy search, if you use one of them you should normally enable it. Disabled by default only for backward compatibility. Algolia search always has snippets by default.

Use breadcrumbs path in search results

If you use the snippets option (required for this option), you will also get a path for the result topic. This can be the exact path with the HTML file name, or a more user-friendly breadcrumbs path with the titles of the topics.

Default: Breadcrumbs made from titles enabled.

Use voting panel

If this is enabled, your users will see a panel asking if they found a help page useful or not, with a 'Yes' and 'No' button to respond, like this:

The buttons have unique ids so you can collect the data through an analytics tool.

To track the number of clicks on Yes or No, you can use the analytics tool of your choice. As an example, see this page for how to do this in Google Analytics Tag Manager: Google Analytics events.

Default: Disabled

Allow users to submit feedback (suggest edits)

If this is enabled, your users will be allowed to submit feedback to you or suggest edits to a help page. By default the feedback will be by email. Other types of feedback can be purchased as a customization.

Default: Disabled

Toggle feedback with voting panel

If using the voting panel, choose whether the link to provide feedback should be toggled on 'No', both 'Yes' and 'No', or always visible.

Default: Toggle on the 'No' button.

Email for feedback

Enter an email address here if you want your users to email you feedback.

Use cookie consent popup

If you are using any of the integrations below you should enable this popup to comply with legal regulations, such as the EU GDPR law.

You have the strict option where the user can opt out completely, or just the informational.

Privacy policy link

If you use the cookie consent popup, you must enter the URL to your privacy policy here.

Google Analytics

Add your property id (or "tracking id") to connect Google Analytics to your HTML5 output. Also select whether you want to use the analytics.js tag or the global site tag (default).

Mixpanel tracking

If you want to integrate with Mixpanel analytics.

Disqus comments

To get a section at the bottom of each topic with discussion threads, where users can add feedback, enable this with your Disqus domain.

Intercom chat

If you use Intercom, you can add the chat widget here to communicate live with your customers as they browse your help site.

Use Lightbox for images

If enabled, clicking images in the HTML5 output will enlarge them to full size. Default: disabled for legacy HTML5, enabled for the Help Center output.

Use thumbnails for all mediaobject (block) images

If enabled, every image in the HTML5 output will be rendered as a small thumbnail (for content where you want to reduce the space images take up).

It may be more common to only want certain images as thumbnails. If so, just leave this option disabled and set it individually in certain images:

Default width for thumbnails is 200px. You can change that in your custom CSS if you want.

If you already have a role attribute on the mediaobject, separate the values with a semi-colon.

Example 1. Thumbnail with lightbox

Standalone TOC

If enabled, the Table of Contents will not be created inside each HTML file, but rather as a standalone file, inserted by javascript when rendering the page. This makes HTML files smaller and so they will load faster in the browser. Faster page loading times are better for SEO.

For details, see Include TOC in HTML or Load Standalone TOC.

Default: Disabled

TOC section depth

Use to define the number of levels in your table of contents. For example, if you set it to 4, the table of contents will show links for topics that are at level 1, 2, 3, and 4 in your publication. The levels are nested in your table of contents to reflect the publication structure. Any topics that are at a lower level than that are not shown in the table of contents, but still exist in your output.

Default: 3.

Only include chunks in TOC

If enabled, only those topics which become chunks (according to your settings) will be included in the TOC. Chunks are topics that are on their own web page and cannot be subsections of other topics.

If you enable this setting, any internal section elements in a topic will not be included in the TOC.

Default: Disabled

Chunk section depth

A chunk is a topic that is always on its own web page in the output. With the Chunk section depth setting, you can set all topics to be a chunk up to a certain level in the publication. For example, if you set the chunk section depth to 4, all topics from level 1-4 in your publication will be on their own page.

Once the chunk section level is reached, any lower level topics will be added as subsections of their immediate parent topic.

Each section element can have an xinfo:chunk attribute that controls whether that section is a chunk. It can be set to yes, no, or default. This takes priority over the Chunk section depth setting in your layout.

Default: 3.

Chunk first sections

If enabled, a chunk will be created for the first top-level section elements in each component. Otherwise, that section will be part of the chunk for its parent.

Default: Enabled.

Use legacy section chunking

This should in most cases be disabled. But if you want to enable legacy chunking, where any section element, whether an internal element in a topic or not, would be treated just like a topic, you can enable this.

Default: Disabled

Use section TOC

With this enabled, you get a 'mini' TOC (Table of Contents) in each output topic. There are a few options: legacy, which produces a list of the direct child sections and the title 'Additional links', 'After' or 'Before', which produces a hierarchical list of the level of sub topics according to your TOC section depth, or 'None' if you don't want one at all.

Default: legacy.

Focus on current section on click

Use this setting to control the behavior of the table of contents (TOC) in the published output.

If you set this to enabled or default, and then select a sub-level topic, the TOC will collapse all "sibling" topics (topics at the same level as the topic you have selected). For example, let's say you have a TOC with 5 levels of topics. If you navigate down to the 5th level and select a topic, the TOC will update and show Levels 1-4 open, but level 5 closed.

If you set Focus on current section on click to disabled, it creates a "sticky menu". This is where all levels of the TOC, from the top level to the topic you select, are opened. The TOC does not collapse the "sibling" topics.

Use H1 headings for topic chunks

Use to control whether topic headings:

For details, see Use H1 Headings for HTML Pages.

Default: Publication hierarchy.

Use a separate list of related topics

If you want the list of separate topics to be separate from the "Section TOC" (list of child topics), this should be enabled.

See for selecting a taxonomy to use for selecting related topics.

Default: Enabled.

Include child topics in related topics section

If you are categorizing topics as related, and some of these topics happen to also be child topics of a related topic, you can choose to exclude such child topics here. Otherwise, if you also use the "Section TOC", which by default lists all child topics, you might get duplicate topics.

See for selecting a taxonomy to use for selecting related topics.

Default: Disabled

Use page TOC

Add a small page navigation (Table of Contents) for only the headings in the current page that highlights when you scroll.

Default: Disabled

Top navigation

If you want to use a top navigation menu in your Help Center theme, enable this. You can select topics by using role attribute set to 'top-nav-link' or a taxonomy value named top-nav-link or Top nav link.

Default: Disabled

Top navigation depth

If top navigation is enabled, and topics have been selected as top nav links, select the depth of links here. If a topic has child topics that are chunked, the child topics will become a dropdown menu.

Default: 2

External top navigation links

If you have enabled top navigation and want to use links to external sites, add them here in the format text:MyLinkText, url:https://www.myurl.com;. (Make sure you don't use extra spaces, and note the separators).

Separate text and url with a comma, and end each link with a semicolon. These characters are special characters and must not be used in the text or url themselves.

Default: none (empty)

Use translation strings for external top navigation link text

For external top navigation links, it is possible to have some such strings translated automatically.

These strings need to be available in the default translation strings configuration, or added to a customization (on applicable plans).

For example, if this option is enabled, using the string contact.support will generate the text "Contact support" in the language currently being published. Not all languages are supported for all available strings. Contact support to request if a string translation can be added.

Default: Disabled

Use section numbering

If you want section numbering in your HTML5 output, enable this option.

Default: Disabled

Section numbering max depth

When section numbering is enabled, you can select the depth for which numbering is applied.

Default: level 8

TOC sidebar placement (single page HTML5 only)

For the single page HTML5 output, the TOC sidebar is place on the right by default. Select whether to place the Table of Contents sidebar on the left or right here.

Default: Right

Output taxonomies

When enabled, taxonomies will be part of the output, and is automatically propagated as class names. If this option is enabled, taxonomies can also be used for filtering and more below.

Default: Disabled

Value structure for taxonomy class names

You can set whether class names from taxonomies should output the value and all its descendant values in a taxonomy tree, just the value itself, or the value and its parent.

Default: Value and descendants

Underscore delimiter for taxonomy class names

When enabled, an underscore ('_') will be used to separate the parts of a taxonomy value output for class names in HTML5, instead of a dash ('-').

For most common purposes this is not necessary, but can be useful if you need to further process the separate parts of the value.

Default: Disabled

Taxonomy filtering strategy

You can set whether taxonomies should be used for filtering, and whether to output the value and all its descendant values in a taxonomy tree, or just the value itself.

If you want to enable taxonomies for filtering, the most recommended value is to select "Descendants" to take advantage of the hierarchy of a taxonomy.

Default: Disabled

Relationship taxonomy

Select any taxonomy to create relationship links.

Enter the exact name of the taxonomy node (usually the root of a sub tree right under Taxonomies). Separate multiple names with a semicolon. Leave empty if you don't want to use taxonomies for relationship links.

See TOC and Chunking for options how to output the related topic links in your output.

Default: none (empty)

Create HTML meta tags from taxonomies

Creates meta tags with the root (name) of the taxonomy tree as the name attribute, and the value as the content attribute. Multiple values will be separated by a comma. The 'Output taxonomies' option must also be enabled.

Default: Disabled

Output role attribute as class names

If enabled, you can get your role attributes into your output as class names for further processing (e.g by css and javascript).

Output profile/filtering attributes as class names

If enabled, you can get your profile/filtering attributes into your output as class names for further processing (e.g by css and javascript), such as creating "on-the-fly" filtering.

Use xml:lang as profiling attribute

If enabled, the language attribute xml:lang can be used for filtering on language (natural languages like Swedish, Japanese, etc)

Glossary popovers

When enabled, glossary terms will display the definition in a pop over in HTML5 Help Center output, when the user hovers over it.

Note: This currently has no effect on legacy HTML5.

Default: enabled for Help Center output.

Output classes for styling of tables

It is recommended to enable this setting. The only reason it is not enabled by default is for backward compatibility.

Enabling it will make the publish process output class names and these will be used for e.g borders, rather than obsolete attributes for borders and rules.

Frame options

For either table or informaltable, set the frame (the border around the entire table) default.

For no frame, set "void". For frame around the entire table, set "border" or "box".

See this page for more on the options: Table options

Rules options

For either table or informaltable, set the rules (the border between cells) default.

For no border, set "none". For borders between all cells, set "all".

See this page for more on the options: Table options

Re-sort sorted tables automatically on publish

Even if you have sorted a table in the editor, re-sorting them on publish can be useful for example if you publish to multiple languages (in which case the sort order may be different), or if you have missed updating the sort before you publish.

Default: enabled.

Extra responsive table features

Use to give tables extra responsive features. These include a column filter button so that readers can control which table columns are shown and a sticky table header.

You can use the features for all tables, selected tables only, or turn the extra responsive features off. To find out more, see Column Filter and Sticky Header for Tables.

Default: Disabled

Use separate styling for label, number, and title in formal elements

If enabled, each part of the title for a formal elements, like a table, example, or figure, will get a span element with a specific class name, so they can be styled differently or excluded, using CSS.

Default: Disabled

Restart auto-label numbering

If enabled, tables, figures, and examples will restart their numbering for each topic, section (including internal sections inside topics), or chunk.

Default: continuous numbering throughout the publication.

Exclude label for abstract

If enabled, the label for an abstract is excluded from output. This is useful if you do not need it, and if publishing to multiple formats where hiding it with CSS does not work.

Default: Disabled

Image title attribute

Use to output a title attribute on the image in your output. The title appears in a tooltip when you over over the image (in the output).

Default: Disabled

To find out more, see Hover Text using the Image Title.

Use lightbox for images

Use to enable or disable the lightbox feature for images in your output. When lightbox is enabled, you can select an image in the published output and the image will display at full size. If lightbox is disabled, selecting the image has no effect.

Default: Enabled for HTML5 help center. Disabled for legacy HTML layouts.

To find out more, see Lightbox for Images.

Use thumbnails for all mediaobject (block) images

Use to control whether every image in the HTML5 output appears as a small "thumbnail" image. Enabling this feature is useful if you want to reduce the amount of space that images use on the page. But note that this setting applies to all images.

You may find it more useful to apply thumbnails to only certain images, rather than all of them. To do this, leave this setting disabled and then add a role attribute to the images you want to have thumbnails. Set the role attribute on the mediaobject element and give it the value: img-thumbnail.

Default width for thumbnails is 250px. You can change that in your custom CSS if you want.

Default: Disabled

To find out more, see Thumbnail Images.

Image size

To find out more, see Adjust Image Resolution.

Enable cross-reference auto-title customization

When enabled, the cross-reference auto-title customizations below can be used. Otherwise legacy cross-reference auto-text is used, or any stylesheet customization you may have.

Default: Disabled

Cross-reference auto-title

Determines the format of the generated text for cross-references.

See Cross-Reference Styling (PDF and HTML5) for options available.

Default: 'title page', which produces a format like 'My Topic Title (page x)'.

Cross-reference auto-title for formal elements

Determines the format of the generated text for cross-references for formal elements (like tables, figures, examples).

See Cross-Reference Styling (PDF and HTML5) for options available.

Default: 'default', which produces a format like 'Example 5, "My Title"'.

Cross-reference label/title separator

Punctuation or space separating label (if used) from title in cross-references, when the auto-title parameter above is set.

Default: ':s', which produces a format like 'Example 5: "My Title"'.

Highlight verbatim elements

Enable syntax highlighting for code elements.

Highlight theme

Select the theme for your syntax highlighting (many different background colors and highlighting themes)

Use Font Awesome glyphs for code callouts

If you use calloutlist for annotating code samples, you can use Font Awesome for the "callout bugs". This is the default for HTML5.

Use graphics for code callouts

If you'd prefer, you can use a graphic for the code callout, an svg image will then be used. Max 30 callouts with this option.

Use unicode symbol for code callouts

Another option is to use a unicode symbol for callouts. If this is set a symbol similar to the graphic and Font Awesome version will be used. Max 20 callouts with this option.

Use code switcher for API style layout

Enabled by default. Only disable e.g if you need to mix programming languages in the same output and always show all samples without the user switching.

Graphical rendering of keycap

Use this if you want the keycap elements to render as a keyboard key, like so: AltShiftV.