Customizing the Knowledge base widget using Custom CSS/JavaScript

The Custom CSS and Custom JavaScript tabs in the widget settings let you extend the widget's appearance and behavior beyond the built-in styling controls. Common uses include replacing the widget icon with a custom button, programmatically controlling widget visibility, applying a dark theme, or modifying field labels and widget text.

When to use Custom CSS/JavaScript

• You want to trigger the widget from a custom button (e.g. a "Help" link in your navbar) instead of the default floating icon.
• You want to change the widget's dark theme or other visual properties not available via the built-in styling controls.
• You need to automatically open the widget on page load or suppress it based on user context.

Before you begin

You must have access to widget settings in Document360 and understand basic HTML, CSS, and JavaScript.

How to add Custom CSS or JavaScript

1. Navigate to Connections () > Knowledge base widget.
2. Hover over the desired widget and click Edit ().
3. Select the Custom CSS or Custom JavaScript tab.
4. Paste your code into the code panel.
5. Click Save.

How to change the default widget icon

Replace the default floating widget icon with a custom button on your page.

Step 1: Add a custom HTML button

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

Step 2: Hide it by default in CSS

.hide {
    display: none;
}

Step 3: Set up callback functions in JavaScript

These callbacks control the button's visibility based on the widget's state. Add them to any of your JavaScript files or inside a <script> tag.

Show button when widget loads:

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

Show button after being hidden by URL mapping:

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

Hide button based on URL mapping:

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

Step 4: Register callbacks in the widget JavaScript snippet

Modify the widget's JavaScript snippet (found in the widget settings) to include your callback functions:

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

Step 5: Make the button open the widget

Using pure JavaScript:

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

Using jQuery:

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

Step 6: Apply custom styling to the button

Apply any custom CSS to the button to match your website's branding — colors, font styles, or additional effects.

How to change the dark theme

1. Navigate to Connections () > Knowledge base widget.
2. Hover over a widget and click () Edit.

3. Open the Custom CSS tab, paste the snippet below, and click Save.

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

How to change field labels and text inside the widget

1. Hover over a widget and click () Edit.

2. Open the Custom JavaScript tab and paste the snippet below. Replace the text values with your own labels and click Save.

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

How to set the widget to open automatically

1. Hover over a widget and click Edit ().

2. Open the Custom JavaScript tab, paste the snippet below, and click Save.

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

How to hide the Page help tab and Search bar for a single-article URL mapping

Paste in the Custom CSS tab:

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

Paste in the Custom JavaScript tab:

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

Best practices

• Always combine the Hide widget toggle (in Style widget) with a custom button to avoid showing two entry points.
• Test callback functions on both desktop and mobile before deploying.
• Scope your Custom CSS selectors specifically to widget elements to avoid conflicts with your product's existing CSS.

FAQ