Changing the default launcher icon
  • 21 Mar 2022
  • 1 Minute to read
  • Contributors
  • Dark
    Light
  • PDF

Changing the default launcher icon

  • Dark
    Light
  • PDF

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

  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 Knowledge Base Assistant 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 Assistant

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

    <!-- Document360 Knowledge Base Assistant Start -->
    <script>
        (function (w,d,s,o,f,js,fjs) {
            w['JS-Widget']=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/widget.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 Assistant, use one of the scripts on the OnClick event

    1. Pure JavaScript
    document.getElementById('doc360_help_btn').addEventListener('click', function () { 
        document.getElementById('document360-widget-iframe').contentDocument.getElementById('doc360-button').click();
    });
    
    1. JQuery
    $('#doc360_help_btn').click(function() {
        $('#document360-widget-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.


Was this article helpful?