Het aanpassen van de Knowledge Base-widget met behulp van aangepaste CSS/JavaScript

De tabbladen Custom CSS en Custom JavaScript in de widgetinstellingen laten 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 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.

Hoe voeg je aangepaste CSS of JavaScript toe

1. Navigeer naar Connections () > Knowledge Base-widget.
2. Beweeg je muis over de gewenste widget en klik op Bewerken ().
3. Selecteer het tabblad Custom CSS of Custom JavaScript .
4. Plak je code in het codepaneel.
5. Klik op Opslaan.

Hoe het standaard widget-icoon te wijzigen

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.

Hoe verander je het donkere thema

1. Navigeer naar Connections () > Knowledge Base-widget.
2. Beweeg de muis over een widget en klik op () Bewerken.

3. Open het tabblad Aangepaste CSS, plak het fragment hieronder 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;
}

Hoe je veldlabels en tekst binnen de widget verandert

1. Beweeg de muis over een widget en klik op () Bewerken.

2. Open het tabblad Aangepaste JavaScript en plak het fragment hieronder. 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"); }
    });
});

Hoe je de widget automatisch opent

1. Beweeg je muis over een widget en klik op Bewerken ().

2. Open het tabblad Aangepaste JavaScript , plak het fragment hieronder en klik op Opslaan.

$(function() {
    setTimeout(function() {
        let iframe = $('#document360-widget-iframe');
        let button = iframe.contents().find('#doc360-button');
        button.trigger("click");
    }, 2000);
});

Hoe verberg je het Pagina-helptabblad en de zoekbalk voor een URL-mapping van één artikel

Plak het tabblad Aangepaste CSS in:

li#page-help-tab { display: none; }
.article-header .article-back-icon { display: none; }
.search-container { display: none !Important; }

Plak het tabblad Aangepaste JavaScript erin:

setTimeout(function() { $('.search-container').hide(); }, 2000);
setTimeout(function() { $("#knowledge-base-tab").click(); }, 2000);

Best practices

• Combineer altijd de Widget Verbergen toggle (in Stijl-widget) 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