--- title: "Aangepaste JavaScript" slug: "custom-javascript" updated: 2026-06-22T09:03:17Z published: 2026-06-22T09:03:17Z canonical: "docs.document360.com/custom-javascript" stale: true --- > ## 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. # Aangepaste JavaScript Aangepaste JavaScript in Document360 stelt je in staat je eigen JavaScript-code toe te voegen om de functionaliteit van je kennisbanksite uit te breiden voorbij wat de ingebouwde instellingen bieden. Je plakt code direct in het portaal en het draait op elke pagina van je kennisbanksite. Dit is het juiste hulpmiddel wanneer je dynamisch gedrag moet toevoegen, met pagina-elementen moet interageren, scripts van derden moet integreren of interacties moet automatiseren die niet via de standaardinstellingen kunnen worden geconfigureerd. --- ## Wanneer gebruik van aangepaste JavaScript Gebruik aangepaste JavaScript wanneer je gedrag of functionaliteit nodig hebt die CSS en de ingebouwde instellingen niet kunnen bieden: - **Pas de paginastructuur dynamisch** aan - herschik, toon of verberg elementen op de pagina op basis van de voorwaarden. Verplaats bijvoorbeeld het gerelateerde artikelen-gedeelte boven het feedbackgedeelte, of verberg de linker navigatiebalk voor specifieke lezers. - **Voeg headerinteractiviteit toe** - voeg sociale media-iconen, dynamische feedbacklinks of aangepaste knoppen toe aan de navigatieheader met JavaScript. - **Integreer tools van derden** - embed analytics-scripts, chatwidgets, feedbacktools of aangepaste tracking die op elke pagina moeten draaien. - **Toon alleen de actieve categorie in de linkerzijbalk** - filter de categorieboom zodat alleen de momenteel actieve categorie en de subcategorieën zichtbaar zijn, waardoor navigatierommel voor lezers wordt verminderd. --- ## Voordat je begint - Je moet een teamaccount hebben met beheerderstoegang tot het kennisbankportaal. - Aangepaste JavaScript wordt wereldwijd toegepast op de hele kennisbanksite - het draait op elke pagina en beïnvloedt alle lezers. - Document360 valideert of pluist je JavaScript-code niet. - Fouten worden niet automatisch gemarkeerd en kapotte scripts kunnen de site-ervaring verstoren. Test je wijzigingen zorgvuldig voordat je opslaat. OPMERKING De kennisbanksite van Document360 gebruikt een Single Page Application (SPA)-model. Dit betekent dat alleen de inhoud van het artikel ververst wanneer een lezer navigeert - niet de volledige pagina. Aangepaste JavaScript die afhankelijk is van pagina-laad- of paginaverversingsgebeurtenissen werkt mogelijk niet zoals verwacht. Gebruik in plaats daarvan het `articleload` evenement: ``` panel.addEventListener('articleload', function() { // Your custom JavaScript code here }); ``` --- ## Hoe voeg je aangepaste JavaScript toe 1. Navigeer naar () > **Knowledge base site** in de linker navigatiebalk van het Knowledge Base-portaal. 2. Navigeer in het linker navigatiepaneel naar **Site-aanpassing**. ![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. Klik **op Custom CSS & JavaScript**. 2. Selecteer het **JavaScript-tabblad** . De JavaScript-code-editor verschijnt. 3. Plak je JavaScript-code in het tekstgebied. 4. Klik op **Opslaan** om je wijzigingen toe te passen. ![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) JavaScript is nu actief op je kennisbanksite. Bezoek de site om het gedrag te verifiëren. --- ## Voorbeelden van gebruikssituaties De volgende voorbeelden tonen veelvoorkomende aanpassingen die je kunt bereiken met aangepaste JavaScript. ### Plaats gerelateerde artikelen boven het feedbackgedeelte ``` panel.onload = function () { $(".content_block_text").append("
"); $('.related-articles-container').appendTo('.content_block_text') } ``` ### Toon alleen de actieve categorie in de linker 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 */ ``` OPMERKING Voor meer voorbeelden van JavaScript-toepassingen, zie de [artikelen Tips & Tricks](https://docs.document360.com/docs/nl/customization-editor) . --- ## Best practices - **Gebruik het `articleload` event voor SPA-compatibiliteit** - wikkel alle JavaScript die met artikelinhoud interacteert binnenin `panel.addEventListener('articleload', function() { ... })` om ervoor te zorgen dat het betrouwbaar wordt weergegeven bij elke artikelnavigatie, niet alleen bij het initiële laden van de pagina. - Houd **scripts gefocust en minimaal** – aangepaste JavaScript draait op elke pagina. Opgeblazen of trage scripts verhogen de laadtijd van de pagina's voor alle lezers. Vermeld alleen wat nodig is. - **Test in zowel licht- als donkermodus** - scripts die DOM-elementen of stijlen manipuleren, kunnen zich verschillend gedragen per thema. Bekijk altijd beide voordat je opslaat. - **Geef commentaar op je code** - voeg inline reacties toe waarin wordt uitgelegd wat elk blok doet, vooral als meerdere teamleden het JavaScript beheren. Voorbeeld: `/* Moves related articles above feedback — added June 2026 */` - **Verwijder ongebruikte scripts** - scripts die niet meer nodig zijn, moeten uit de editor worden verwijderd. Overgebleven code verhoogt de complexiteit en kan onverwachte conflicten veroorzaken met toekomstige wijzigingen. - **Aangepaste JavaScript verschijnt niet in deelbare preview-links** - om het uiteindelijke gedrag te verifiëren, publiceer je wijzigingen en bekijk direct de live knowledge base-site. --- ## FAQ **Waarom werkt mijn aangepaste JavaScript niet nadat een lezer naar een nieuw artikel is genavigeerd?** Document360 gebruikt een Single Page Application (SPA)-model — wanneer een lezer tussen artikelen navigeert, ververst alleen de inhoud van het artikel, niet de volledige pagina. JavaScript dat afhankelijk is van paginalaad- of paginaverversingsgebeurtenissen draait slechts één keer bij de eerste laadtijd. Pak je code in `panel.addEventListener('articleload', function() { ... })` zodat deze elke keer draait wanneer de inhoud van het artikel verandert. **Waarom verschijnt aangepaste JavaScript niet in de deelbare preview-link?** Aangepaste JavaScript is opzettelijk uitgeschakeld in deelbare preview-links om consistente prestaties en beveiliging te garanderen wanneer inhoud extern wordt gedeeld. Om je JavaScript-wijzigingen te verifiëren, publiceer je het artikel en krijg je direct toegang vanaf de kennisbanksite, of gebruik je een sandbox-omgeving. **Kan ik voor elke werkruimte verschillende JavaScript toevoegen?** Nee. Aangepaste JavaScript is geconfigureerd op projectniveau en wordt toegepast op alle werkruimtes binnen het project. Het is niet mogelijk om aparte JavaScript toe te voegen voor individuele werkruimtes via de Custom CSS- en JavaScript-instellingen.