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

Door de Knowledge Base (KB) widget aan te passen, kun je het uiterlijk en gedrag personaliseren, zodat het aansluit bij je branding of specifieke functionaliteitsbehoeften. In dit artikel nemen we een stap door het aanpassen van het widget-icoon, het instellen van knoppen voor interactie, het beheren van callbacks voor show/verberg-functionaliteit, en het toepassen van styling- en lokalisatieaanpassingen.

Hoe verander je het standaard widget-icoon?

Je kunt eenvoudig het standaard Knowledge Base-widgetpictogram vervangen door een aangepast icoon dat past bij het ontwerp van jouw merk. Dit geeft je website of app een meer samenhangende uitstraling.

Een aangepaste knop aanmaken

Om een aangepaste knop toe te voegen die interactie heeft met de Knowledge Base-widget:

1. Voeg bijvoorbeeld een nieuw HTML-element toe, een knop, overal op je pagina.

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

2. Ken het element een CSS-klasse toe die bevat display: none.

   .hide
   {
       display:none;
   }

Callback-functies opzetten

Om de zichtbaarheid van de aangepaste knop te beheren op basis van de status van de Knowledge Base-widget, moet je callback-functies in JavaScript aanmaken.

Voeg de volgende callback-functies 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:

doc360_callback Moet de van display: none je knop verwijderen. Dit wordt uitgevoerd wanneer de Knowledge Base-widget de instelling heeft geladen.

function doc360_show_callback()
{
    document.getElementById('doc360_help_btn').classList.remove('hide');
}

Verbergknop op basis van URL-mapping:

doc360_show_callback() Moet de van display: none je knop verwijderen. Dit wordt uitgevoerd als de knop eerder verborgen was door URL-mapping

function doc360_hide_callback()
{
    document.getElementById('doc360_help_btn').classList.add('hide');
}

doc360_hide_callback()Moet de display: none toevoegen aan je knop. Dit wordt uitgevoerd door URL-mapping als een geldige map wordt gevonden om de Knowledge Base-widget te verbergen. Deze functies regelen de zichtbaarheid van de knop op basis van de status of URL-mapping van de Knowledge Base-widget.

OPMERKING

De throwbacks tonen en verbergen zijn alleen nodig als je de widget op specifieke pagina's verbergt met URL-mapping.

Integratie van de callback-functies

Om de widget je aangepaste callbacks te laten herkennen, wijzig je het JavaScript-fragment van de Knowledge Base-widget (te vinden in de widgetinstellingen):

<!-- 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);
    }(panel, 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 -->

De knop de widget laten openen

Zodra de knop zichtbaar is, wil je dat de Knowledge Base-widget opent wanneer je erop klikt. Je kunt dit bereiken met pure JavaScript of jQuery.

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

Het uiterlijk van de knop aanpassen

Pas een aangepaste CSS toe op de knop om bij de branding van je website te passen. Dit kan het veranderen van kleuren, lettertypestijlen of het toevoegen van extra effecten omvatten.

Hoe verander je het donkere thema in de Knowledge Base-widget?

Je kunt aangepaste JavaScript gebruiken om deze aanpassing te maken.

1. Navigeer naar Connections () > Knowledge base-widget in de linker navigatiebalk van het Knowledge base portal, en er wordt een lijst met widgets weergegeven.

2. Beweeg je muis over een widget en klik op het ( ) Bewerken-icoon .

2. Open het tabblad Aangepaste CSS, plak het onderstaande fragment 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 verander je de velden die in de Knowledge Base Widget worden weergegeven?

Je kunt Custom JavaScript gebruiken om deze aanpassing te maken.

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

2. Open het tabblad Custom JavaScript en plak het onderstaande fragment.

$(document).ready(function() {
    if ($('.tab-link.current').length > 0) {
        $('.tab-link.current').html($('.tab-link.current').html().replace("Page help", "Destek"));
        $('.tabs li:last-child').html($('.tabs li:last-child').html().replace("Knowledge base", "Dokümatasyon"));
    }

    setTimeout(function() {
        $('#top-search-title').html($('#top-search-title').html().replace("Top search articles", "En Çok Aranan Dokümanlar"));
    }, 3000);
});
$(document).ready(function() {
    $('#search-input').each(function(ev) {
        if (!$(this).val()) {
            $(this).attr("placeholder", "Arama");
        }
    });
    $('#category-filter').each(function(ev) {
        if (!$(this).val()) {
            $(this).attr("placeholder", "Filtrele");
        }
    });
});

3. Vervang de tekst zoals je wenst en klik op Opslaan.

Hoe stel je de Knowledge Base Widget in om automatisch te openen op de Knowledge base site?

Je kunt Custom JavaScript gebruiken om deze aanpassing te maken.

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

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