---
title: "Custom JavaScript"
slug: "custom-javascript"
description: "Extend your Document360 knowledge base with custom JavaScript to add dynamic behavior, integrate tools, and enhance user experience across all pages."
updated: 2026-07-24T10:11:18Z
published: 2026-07-24T10:11:18Z
canonical: "docs.document360.com/custom-javascript"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 user 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.

 NOTE

Document360's knowledge base site uses a Single Page Application (SPA) model. This means only the article content refreshes when a reader navigates - not the full page. Custom JavaScript that relies on page-load or page-refresh events may not work as expected. Use the `articleload` event instead:

```
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**.

![Site customization page showing the Custom CSS and JavaScript option in the left navigation pane](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770890215248.png)

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

![JavaScript tab in the Custom CSS and JavaScript editor showing a code snippet pasted in the editor](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom-JavaScript-Snippet.png)

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 */
```

 NOTE

For more JavaScript use case examples, see the [Tips & Tricks](https://docs.document360.com/docs/en/customization-editor) articles.

---

## 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

**Why doesn't my custom JavaScript work after a reader navigates to a new article?**

Document360 uses a Single Page Application (SPA) model — when a reader navigates between articles, only the article content refreshes, not the full page. JavaScript that relies on page-load or page-refresh events will only run once on the initial load. Wrap your code in `panel.addEventListener('articleload', function() { ... })` to ensure it runs every time article content changes.

**Why doesn't custom JavaScript appear in the shareable preview link?**

Custom JavaScript is intentionally disabled in shareable preview links to ensure consistent performance and security when content is shared externally. To verify your JavaScript changes, publish the article and access it directly from the knowledge base site, or use a sandbox environment.

**Can I add different JavaScript for each workspace?**

No. Custom JavaScript is configured at the project level and applies across all workspaces within the project. It is not possible to add separate JavaScript for individual workspaces through the Custom CSS & JavaScript settings.