Personnalisation du widget de la base de connaissances en utilisant du CSS/JavaScript personnalisé

Les onglets CSS personnalisé et JavaScript personnalisé dans les paramètres du widget permettent d’étendre l’apparence et le comportement du widget au-delà des contrôles de style intégrés. Les usages courants incluent le remplacement de l’icône du widget par un bouton personnalisé, le contrôle programmatique de la visibilité des widgets, l’application d’un thème sombre ou la modification des étiquettes des champs et du texte du widget.

Quand utiliser un CSS/JavaScript personnalisé

• Vous voulez déclencher le widget à partir d’un bouton personnalisé (par exemple un lien « Aide » dans votre barre de navigation) au lieu de l’icône flottante par défaut.
• Vous souhaitez modifier le thème sombre du widget ou d’autres propriétés graphiques non disponibles via les commandes de style intégrées.
• Vous devez ouvrir automatiquement le widget au chargement de la page ou le supprimer en fonction du contexte utilisateur.

Avant que tu commences

Vous devez avoir accès aux paramètres de widgets dans Document360 et comprendre les bases du HTML, du CSS et du JavaScript.

Comment ajouter du CSS personnalisé ou du JavaScript

1. Naviguer vers Connexions () > widget de la base de connaissances.
2. Survolez le widget souhaité et cliquez sur Modifier ().
3. Sélectionnez l’onglet CSS personnalisé ou JavaScript personnalisé .
4. Collez votre code dans le panneau de codes.
5. Cliquez sur Enregistrer.

Comment changer l’icône du widget par défaut

Remplacez l’icône de widget flottant par défaut par un bouton personnalisé sur votre page.

Étape 1 : Ajouter un bouton HTML personnalisé

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

Étape 2 : Le masquer par défaut dans CSS

.hide {
    display: none;
}

Étape 3 : Configurer les fonctions de rappel en JavaScript

Ces rappels contrôlent la visibilité du bouton en fonction de l’état du widget. Ajoutez-les à n’importe lequel de vos fichiers JavaScript ou à l’intérieur d’un <script> tag.

Bouton Afficher lors du chargement du widget :

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

Bouton Afficher après avoir été caché par le mappage URL :

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

Bouton Masquer selon le mappage d’URL :

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

Étape 4 : Enregistrer les rappels dans le widget JavaScript extrait

Modifiez le extrait JavaScript du widget (disponible dans les paramètres du widget) pour inclure vos fonctions de rappel :

<!-- 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 -->

Étape 5 : Faites en sorte que le bouton ouvre le widget

Utilisation de JavaScript pur :

document.getElementById('doc360_help_btn').addEventListener('click', function () {
    document.getElementById('document360-assistant-iframe').contentDocument.getElementById('doc360-button').click();
});

Utilisation de jQuery :

$('#doc360_help_btn').click(function() {
    $('#document360-assistant-iframe').contents().find('#doc360-button').click();
});

Étape 6 : Appliquez un style personnalisé au bouton

Appliquez tout CSS personnalisé au bouton pour correspondre à la marque de votre site — couleurs, styles de polices ou effets supplémentaires.

Comment changer le thème sombre

1. Naviguer vers Connexions () > widget de la base de connaissances.
2. Surplombe un widget et clique sur () Modifier.

3. Ouvrez l’onglet CSS personnalisé , collez le extrait ci-dessous, puis cliquez sur Enregistrer.

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

Comment changer les étiquettes des champs et le texte à l’intérieur du widget

1. Surplombe un widget et clique sur () Modifier.

2. Ouvrez l’onglet JavaScript personnalisé et collez l’extrait ci-dessous. Remplacez les valeurs du texte par vos propres étiquettes et cliquez sur Enregistrer.

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

Comment configurer l’ouverture automatique du widget

1. Survolez un widget et cliquez sur Modifier ().

2. Ouvrez l’onglet JavaScript personnalisé , collez l’extrait ci-dessous, puis cliquez sur Enregistrer.

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

Comment masquer l’onglet d’aide de la page et la barre de recherche pour un mappage d’URL d’un seul article

Coller dans l’onglet CSS personnalisé :

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

Coller dans l’onglet JavaScript personnalisé :

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

Meilleures pratiques

• Combinez toujours le bouton Masquer le widget (dans le widget Style) avec un bouton personnalisé pour éviter d’afficher deux points d’entrée.
• Testez les fonctions de rappel sur ordinateur et mobile avant le déploiement.
• Ajustez spécifiquement vos sélecteurs CSS personnalisés aux éléments de widget afin d’éviter les conflits avec le CSS existant de votre produit.

FAQ