---
title: "Het aanpassen van de Knowledge Base-widget met behulp van aangepaste CSS/JavaScript"
slug: "customizing-the-kb-widget"
description: "You can choose to add a custom icon for the knowledge base assistant. This go well to carry your brand theme."
tags: ["Customization", "Widget"]
updated: 2026-08-17T08:56:22Z
published: 2026-08-17T08:56:22Z
canonical: "docs.document360.com/customizing-the-kb-widget"
---
> ## 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.
# Het aanpassen van de Knowledge Base-widget met behulp van aangepaste CSS/JavaScript
Het tabblad **Custom CSS & JavaScript** in de widgetinstellingen, dat aparte **CSS-** en JavaScript-secties bevat, laat je het uiterlijk en gedrag van de widget uitbreiden voorbij de ingebouwde stylingcontroles. Veelvoorkomende toepassingen zijn het vervangen van het widgetpictogram door een aangepaste knop, het programmatisch regelen van de zichtbaarheid van widgets, het toepassen van een donker thema of het aanpassen van veldlabels en widgettekst.
---
## Wanneer te gebruiken met aangepaste CSS/JavaScript
- Je wilt de widget activeren via een aangepaste knop (bijvoorbeeld een "Help"-link in je navigatiebalk) in plaats van het standaard zwevende icoon.
- Je wilt het donkere thema van de widget of andere visuele eigenschappen veranderen die niet beschikbaar zijn via de ingebouwde stylingbesturing.
- Je wilt ingebouwde widget-besturing (zoals de versieselector, taalselector, uitbreidingsicoon of sleephandvat) verbergen die niet relevant zijn voor je gebruikers.
- Je moet de widget automatisch openen bij het laden van de pagina of onderdrukken op basis van de gebruikerscontext.
---
## Voordat je begint
Je moet toegang hebben tot widget-instellingen in Document360 en basiskennis hebben van HTML, CSS en JavaScript.
---
## Voeg aangepaste CSS of JavaScript toe
1. Ga naar **Connections** () > **Knowledge base-widget**.
2. Beweeg je muis over de gewenste widget en klik **op Bewerken** ().
3. Selecteer het tabblad **Custom CSS & JavaScript** en gebruik vervolgens de **CSS-** of **JavaScript-sectie** indien nodig.
4. Plak je code in het codepaneel.
5. Klik **op Opslaan**.
---
## Pas Widget 2.0 aan
### Verberg ingebouwde widgetbesturingen
Gebruik deze snippets om individuele ingebouwde bedieningselementen uit de widget te verwijderen die je niet aan je gebruikers wilt blootstellen. Voeg het gewenste fragment toe aan de **CSS-sectie** van het **tabblad Custom CSS & JavaScript** en klik op **Opslaan**.
#### Verberg de optie voor het selecteren van projectversies
Verwijdert het versie-dropdown uit de widgetheader.
```
#doc360-widget-modal #project-version-dropdown,
#doc360-widget-modal .version-select-sec {
display: none !important;
}
```
#### Verberg de taalkeuzeoptie
Verwijdert het taal-dropdown uit de widgetheader.
```
#doc360-widget-modal #language-dropdown,
#doc360-widget-modal .language-version-select-sec {
display: none !important;
}
```
#### Verberg de optie "Artikel openen in nieuw tabblad"
Verwijdert het open-in-nieuw-tabblad-icoon dat op een geopend artikel wordt weergegeven.
```
#doc360-widget-modal .article-open-new {
display: none !important;
}
```
#### Verberg de optie voor uitbreiden/maximaliseren
Verwijdert het uitbreidingsicoon dat de widget vergroot naar volledig scherm.
```
#doc360-widget-modal .expand-collapse {
display: none !important;
}
```
#### Verberg de optie voor bewegen (slepen)
Verwijdert de sleephandle waarmee de widget kan worden verplaatst.
```
#doc360-widget-modal #move-window,
#doc360-widget-modal .move-icon {
display: none !important;
}
```
#### Verberg de hele headerbalk
Verwijdert de hele bovenste controlerij (versie, taal, verplaatsen en sluiten).
```
#doc360-widget-modal .version-selection {
display: none !important;
}
```
WAARSCHUWING
Het verbergen van de hele headerbalk verwijdert ook de sluitknop (✕). Zorg ervoor dat je gebruikers een andere manier hebben om de widget te verwijderen voordat ze dit fragment toepassen.
### Houd het tabblad Knowledge Base actief als de widget overschakelt naar Page Help
Sommige implementaties hebben het tabblad Knowledge Base nodig om actief te blijven, zelfs als de widget tijdens gebruik overschakelt naar het tabblad Page Help. Dit geldt voor Widget 2.0. Als je dit eerder in Widget 1.0 hebt afgehandeld door CSS-klassen te schakelen in de secties Page Help en Knowledge Base, werkt die aanpak niet meer, omdat Widget 2.0 alleen de inhoud van het momenteel actieve tabblad in de pagina laadt. Simuleer in plaats daarvan een klik op het tabblad Knowledge Base telkens wanneer het tabblad Page Help actief wordt.
1. Ga naar **de widget Connections > Knowledge Base.**
2. Beweeg de muis over de gewenste widget en klik **op Bewerken**.
3. Open het tabblad **Custom CSS & JavaScript** en gebruik de **JavaScript-sectie** .
4. Plak het volgende script en klik op Opslaan.
Deze code is geschreven in javascript:
```
(function switchToKBIfNeeded() {
function switchToKB() {
const kbTab = document.getElementById('knowledge-base-tab');
const pageTab = document.getElementById('page-help-tab');
if (!kbTab || !pageTab) return;
if (pageTab.classList.contains('current') && !kbTab.classList.contains('current')) {
kbTab.click();
}
}
const observer = new MutationObserver(function() {
switchToKB();
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['class', 'style']
});
switchToKB();
})();
```
**Wat dit doet:** Houdt de widget in de gaten op wijzigingen en controleert of het tabblad Pagina Hulp actief is geworden. Als dat zo is, klikt het op het tabblad Knowledge Base om terug te schakelen, net zoals een gebruiker dat zou doen.
**Waarom dit werkt in Widget 2.0 waar klassewisselen niet werkt:** Widget 2.0 beheert het actieve tabblad intern en mountt alleen de inhoud van het actieve tabblad. Het direct veranderen van CSS-klassen heeft geen blijvend effect, omdat de app dat niet als een echte tabwissel behandelt. Door op het tab-element te klikken, wordt de door de widget ondersteunde interactie gebruikt, waardoor er correct een echte tab-wissel wordt geactiveerd.
---
## Pas Widget 1.0 aan
### Verander het standaard widget-icoon
Vervang het standaard zwevende widget-icoon door een aangepaste knop op je pagina.
#### Stap 1: Voeg een aangepaste HTML-knop toe
```
```
#### Stap 2: Verberg het standaard in CSS
```
.hide {
display: none;
}
```
#### Stap 3: Stel callback-functies in in JavaScript in
Deze callbacks bepalen de zichtbaarheid van de knop op basis van de status van de widget. Voeg ze toe aan een van je JavaScript-bestanden of binnen een `<script>` tag.
**Toon knop wanneer widget laadt:**
```
function doc360_callback() {
document.getElementById('doc360_help_btn').classList.remove('hide');
}
```
**Toon knop nadat deze is verborgen door URL-mapping:**
```
function doc360_show_callback() {
document.getElementById('doc360_help_btn').classList.remove('hide');
}
```
**Verbergknop op basis van URL-mapping:**
```
function doc360_hide_callback() {
document.getElementById('doc360_help_btn').classList.add('hide');
}
```
OPMERKING
De throwbacks en verbergen zijn alleen nodig als je de widget op specifieke pagina's verbergt met behulp van URL-mapping.
#### Stap 4: Registreer callbacks in het widget JavaScript-fragment
Pas het JavaScript-fragment van de widget aan (te vinden in de widgetinstellingen) om je callback-functies op te nemen:
```
```
#### Stap 5: Laat de knop de widget openen
**Met pure JavaScript:**
```
document.getElementById('doc360_help_btn').addEventListener('click', function () {
document.getElementById('document360-assistant-iframe').contentDocument.getElementById('doc360-button').click();
});
```
**Gebruik van jQuery:**
```
$('#doc360_help_btn').click(function() {
$('#document360-assistant-iframe').contents().find('#doc360-button').click();
});
```
#### Stap 6: Pas aangepaste styling toe op de knop
Pas een aangepaste CSS toe op de knop om het branding van je website te matchen — kleuren, lettertypestijlen of extra effecten.
---
### Verander het donkere thema
1. Ga naar **Connections** () > **Knowledge base-widget**.
2. Beweeg de muis over een widget en klik op () **Bewerken**.
3. Open het tabblad **Aangepaste CSS & JavaScript** , plak het onderstaande fragment in de **CSS-sectie** en klik **op Opslaan**.
```
.doc360-widget-modal {
background-color: black;
color: white;
}
.doc360-widget-modal div,
.doc360-widget-modal li,
.doc360-widget-modal p,
.doc360-widget-modal ul,
.doc360-widget-modal span,
.doc360-widget-modal input,
.doc360-widget-modal textarea {
color: white !important;
background-color: black !important;
}
.doc360-widget-modal button {
color: white !important;
}
.eddy-feedback-btn:hover {
color: black !important;
background-color: #e4e4e7 !important;
}
.eddy-feedback-btn {
background-color: black !important;
}
```
---
### Verander veldlabels en tekst binnen de widget
1. Beweeg de muis over een widget en klik op () **Bewerken**.
2. Open het tabblad **Custom CSS & JavaScript** en plak het onderstaande fragment in de **JavaScript-sectie** . Vervang de tekstwaarden door je eigen labels en klik **op Opslaan**.
```
$(document).ready(function() {
if ($('.tab-link.current').length > 0) {
$('.tab-link.current').html($('.tab-link.current').html().replace("Page help", "Support"));
$('.tabs li:last-child').html($('.tabs li:last-child').html().replace("Knowledge base", "Documentation"));
}
setTimeout(function() {
$('#top-search-title').html($('#top-search-title').html().replace("Top search articles", "Popular Articles"));
}, 3000);
});
$(document).ready(function() {
$('#search-input').each(function() {
if (!$(this).val()) { $(this).attr("placeholder", "Search..."); }
});
$('#category-filter').each(function() {
if (!$(this).val()) { $(this).attr("placeholder", "Filter"); }
});
});
```
---
### Stel de widget in om automatisch te openen
1. Beweeg je muis over een widget en klik op **Bewerken** ().
2. Open het tabblad **Aangepaste CSS & JavaScript** , plak het onderstaande fragment in de **JavaScript-sectie** en klik op **Opslaan**.
```
$(function() {
setTimeout(function() {
let iframe = $('#document360-widget-iframe');
let button = iframe.contents().find('#doc360-button');
button.trigger("click");
}, 2000);
});
```
---
### Verberg het pagina-helptabblad en de zoekbalk voor een URL-mapping van één artikel
Plak het **CSS-gedeelte** van het **tabblad Custom CSS & JavaScript** in:
```
li#page-help-tab { display: none; }
.article-header .article-back-icon { display: none; }
.search-container { display: none !Important; }
```
Plak het **JavaScript-gedeelte** van het **tabblad Custom CSS & JavaScript** in:
```
setTimeout(function() { $('.search-container').hide(); }, 2000);
setTimeout(function() { $("#knowledge-base-tab").click(); }, 2000);
```
Noot
Het hierboven genoemde aangepaste JavaScript-fragment, dat op het tabblad Knowledge Base klikt, werkt ook onder Widget 2.0 zonder wijzigingen. Het wordt in deze sectie vermeld omdat het oorspronkelijk is geschreven voor URL-mapping van één artikel, niet omdat het beperkt is tot Widget 1.0.
---
## Best practices
- Combineer altijd de **Hide widget-schakelaar** (in Uiterlijk) met een aangepaste knop om te voorkomen dat er twee toegangspunten worden getoond.
- Test de callback-functies op zowel desktop als mobiel voordat je het uitrolt.
- Beperk je Custom CSS-selectors specifiek naar widget-elementen om conflicten met de bestaande CSS van je product te voorkomen.
---
## FAQ
**Kan ik de afbeeldingsgrootte van de widgetknop aanpassen in een aangepaste applicatie?**
**Nee.** De Document360-widget wordt weergegeven binnen een cross-domain iframe, en vanwege beveiligingsbeperkingen van de browser (Same-Origin Policy) kan de afbeeldingsgrootte van de knop niet worden aangepast vanuit de hoofdapplicatie.