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

L’onglet CSS personnalisé & JavaScript dans les paramètres du widget, qui contient des sections CSS et JavaScript séparées, vous permet 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 souhaitez masquer les contrôles de widgets intégrés (comme le sélecteur de version, le sélecteur de langue, l’icône d’extension ou la poignée de glisser) qui ne sont pas pertinents pour vos utilisateurs.
• 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.

Ajouter du CSS ou du JavaScript personnalisé

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 & JavaScript personnalisé , puis utilisez la section CSS ou JavaScript selon les besoins.
4. Collez votre code dans le panneau de codes.
5. Cliquez sur Enregistrer.

Personnaliser le widget 2.0

Masquer les contrôles intégrés des widgets

Utilisez ces extraits pour supprimer les contrôles intégrés individuels du widget que vous ne souhaitez pas exposer à vos utilisateurs. Ajoutez le extrait souhaité dans la section CSS de l’onglet CSS & JavaScript personnalisé et cliquez sur Enregistrer.

Masquer l’option de sélection de la version du projet

Supprime le menu déroulant de la version de l’en-tête du widget.

#doc360-widget-modal #project-version-dropdown,
#doc360-widget-modal .version-select-sec {
    display: none !important;
}

Masquer l’option de sélection de langue

Supprime le menu déroulant du langage de l’en-tête du widget.

#doc360-widget-modal #language-dropdown,
#doc360-widget-modal .language-version-select-sec {
    display: none !important;
}

Masquer l’option « Ouvrir l’article dans un nouvel onglet »

Supprime l’icône d’ouverture dans un nouvel onglet affichée sur un article ouvert.

#doc360-widget-modal .article-open-new {
    display: none !important;
}

Masquer l’option d’extension/maximisation

Supprime l’icône d’expansion qui agrandit le widget en plein écran.

#doc360-widget-modal .expand-collapse {
    display: none !important;
}

Masquer l’option de déplacer (glisser)

Ça enlève la poignée de glissée qui permet de repositionner le widget.

#doc360-widget-modal #move-window,
#doc360-widget-modal .move-icon {
    display: none !important;
}

Masquer toute la barre d’en-tête

Supprime toute la rangée de contrôle supérieure (version, langue, déplacer et fermer).

#doc360-widget-modal .version-selection {
    display: none !important;
}

Gardez l’onglet Base de connaissances actif si le widget passe à l’Aide à la page

Certaines implémentations ont besoin que l’onglet Base de connaissances reste actif même si le widget passe à l’onglet Aide de la page pendant l’utilisation. Cela s’applique à Widget 2.0. Si vous gériez cela auparavant dans Widget 1.0 en activant les classes CSS dans les sections Aide de la page et de la Base de connaissances, cette approche ne fonctionne plus, car Widget 2.0 ne charge que le contenu de l’onglet actuellement actif dans la page. Simulez plutôt un clic sur l’onglet Base de connaissances chaque fois que l’onglet Aide de la page devient actif.

1. Naviguez vers le widget Connexions > Base de connaissances.
2. Passez la souris sur le widget souhaité et cliquez sur Modifier.
3. Ouvrez l’onglet CSS & JavaScript personnalisés et utilisez la section JavaScript .
4. Collez le script suivant et cliquez sur Enregistrer.
   Ce code est écrit en 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();
})();

Ce que cela fait :
Surveille le widget pour détecter les changements et vérifie si l’onglet Aide de la page est devenu actif.
Si oui, il clique sur l’onglet Base de connaissances pour revenir en arrière, de la même manière qu’un utilisateur le ferait.

Pourquoi cela fonctionne dans Widget 2.0 où le changement de classe ne fonctionne pas :
Le widget 2.0 contrôle l’onglet actif en interne et ne monte que le contenu de l’onglet actif. Changer directement de classe CSS n’a pas d’effet durable, puisque l’application ne considère pas cela comme un vrai changement de tabulation. Cliquer sur l’élément tab utilise l’interaction prise en charge par le widget, ce qui déclenche correctement un vrai changement d’onglet.

Personnaliser le widget 1.0

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.

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 & JavaScript personnalisés , collez le extrait ci-dessous dans la section CSS , 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;
}

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

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

2. Ouvrez l’onglet CSS & JavaScript personnalisé et collez l’extrait ci-dessous dans la section JavaScript . 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"); }
    });
});

Réglez le widget pour qu’il s’ouvre automatiquement

1. Survolez un widget et cliquez sur Modifier ().
2. Ouvrez l’onglet CSS & JavaScript personnalisé , collez l’extrait ci-dessous dans la section JavaScript , puis cliquez sur Enregistrer.

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

Masquer l’onglet Aide de la page et la barre de recherche pour un mappage d’URL d’un seul article

Collez la section CSS de l’onglet CSS & JavaScript personnalisés :

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

Collez la section JavaScript de l’onglet CSS & JavaScript personnalisés :

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

Meilleures pratiques

• Combinez toujours le bouton Masquer le widget (dans l’apparence) 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