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;
}

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

<button id="doc360_help_btn" class="btn hide"><span>Help!</span></button>

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');
}

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:

<!-- Document360 Knowledge Base assistant Start -->
<script>
    (function (w,d,s,o,f,js,fjs) {
        w['JS-assistant']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'mw', 'https://cdn.document360.io/static/js/assistant.js'));
    mw('init', { apiKey: 'YOUR KEY',
                 callback: doc360_callback,
                 show_callback: doc360_show_callback,
                 hide_callback: doc360_hide_callback });
</script>
<!-- Document360 Knowledge Base assistant End -->

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);

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