You can always change the default knowledge base widget icon to a custom icon that goes well with your branding.

  1. Add a new HTML element, a button, for example, anywhere on your page

     <button id="doc360_help_btn" class="btn hide"><span>Help!</span></button>
    
  2. Assign the element a CSS class that includes display: none

    .hide
    {
        display:none;
    }
    
  3. Add the following callback functions to any of your JavaScript files or inside a <script> tag

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

    doc360_callback needs to remove the display: none from your button. This will be executed when the Knowledge Base widget has completed loading the setting

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

    doc360_show_callback() needs to remove the display: none from your button. This will be executed if the button was previously hidden by URL mapping

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

    doc360_hide_callback()needs to add the display: none to your button. This will be executed by the url mapping if a valid map is found to hide Knowledge Base widget

The show and hide callback are only needed if the Knowledge Base widget is hidden on specific pages with URL mapping.
  1. Now, in the Knowledge Base widget JavaScript snippet, which can be found in the Knowledge Base widget section in Settings, include your callback functions like below:

    <!-- 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 -->
    
  2. Now, to make your new button open the Knowledge Base widget, use one of the scripts on the OnClick event

    1. Pure JavaScript
    document.getElementById('doc360_help_btn').addEventListener('click', function () { 
        document.getElementById('document360-assistant-iframe').contentDocument.getElementById('doc360-button').click();
    });
    
    1. JQuery
    $('#doc360_help_btn').click(function() {
        $('#document360-assistant-iframe').contents().find('#doc360-button').click();
    }); 
    
  3. Finally, apply any custom styling to your new button/icon so that it matches your company branding or website.