Custom JavaScript

Custom JavaScript in Document360 lets you add your own JavaScript code to extend the functionality of your knowledge base site beyond what the built-in settings provide. You paste code directly into the portal and it runs on every page of your knowledge base site. This is the right tool when you need to add dynamic behavior, interact with page elements, integrate third-party scripts, or automate interactions that cannot be configured through the standard settings.

When to use custom JavaScript

Use custom JavaScript when you need behavior or functionality that CSS and the built-in settings cannot provide:

• Modify page structure dynamically - reorder, show, or hide elements on the page based on conditions. For example, move the related articles section above the feedback section, or hide the left navigation bar for specific readers.
• Add header interactivity - append social media icons, dynamic feedback links, or custom buttons to the navigation header using JavaScript.
• Integrate third-party tools - embed analytics scripts, chat widgets, feedback tools, or custom tracking that need to run on every page.
• Show only the active category in the left sidebar - filter the category tree so only the currently active category and its sub-categories are visible, reducing navigation clutter for readers.

Before you begin

• You must have a team account with admin-level access to the Knowledge base portal.
• Custom JavaScript applies globally to the entire knowledge base site - it runs on every page and affects all readers.
• Document360 does not validate or lint your JavaScript code.
• Errors will not be flagged automatically and broken scripts can disrupt the site experience. Test your changes carefully before saving.

panel.addEventListener('articleload', function() {
  // Your custom JavaScript code here
});

How to add custom JavaScript

1. Navigate to Settings () > Knowledge base site in the left navigation bar of the Knowledge base portal.
2. In the left navigation pane, navigate to Site customization.

3. Click Custom CSS & JavaScript.
4. Select the JavaScript tab. The JavaScript code editor appears.
5. Paste your JavaScript code in the text area.
6. Click Save to apply your changes.

The JavaScript is now active on your knowledge base site. Visit the site to verify the behavior.

Use case examples

The following examples show common customizations you can achieve with custom JavaScript.

Move related articles above the feedback section

panel.onload = function () {
  $(".content_block_text").append("<div class=\"sperator\"><hr></div>");
  $('.related-articles-container').appendTo('.content_block_text')
}

Show only the active category in the left sidebar

/* Left sidebar category start */
let parent_data = null;
function client_tree_data(data) {
  parent_data = data;
  window.clientData = data;
  const slug = window.location.pathname.split('/').filter(Boolean).pop();
  if (slug === "docs") {
    return [data[0]];
  }
  return data.filter(item => markIfContainsSlug(item, slug));
}
function markIfContainsSlug(node, slug) {
  if (node.slug === slug) {
    node.found = true;
    return true;
  }
  return node.children?.some(child => markIfContainsSlug(child, slug)) || false;
}
/* Left sidebar category end */

Best practices

• Use the articleload event for SPA compatibility - wrap all JavaScript that interacts with article content inside panel.addEventListener('articleload', function() { ... }) to ensure it fires reliably on every article navigation, not just the initial page load.
• Keep scripts focused and minimal - custom JavaScript runs on every page. Bloated or slow scripts increase page load time for all readers. Only include what is necessary.
• Test in both light and dark mode - scripts that manipulate DOM elements or styles may behave differently across themes. Always preview both before saving.
• Comment your code - add inline comments explaining what each block does, especially if multiple team members manage the JavaScript. Example: /* Moves related articles above feedback — added June 2026 */
• Remove unused scripts - scripts that are no longer needed should be deleted from the editor. Leftover code increases complexity and can cause unexpected conflicts with future changes.
• Custom JavaScript does not appear in shareable preview links - to verify the final behavior, publish your changes and view the live knowledge base site directly.

FAQ