You can always change the default knowledge base widget icon to a custom icon that goes well with your branding.
-
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>
-
Assign the element a CSS class that includes
display: none
.hide { display:none; }
-
Add the following callback functions to any of your JavaScript files or inside a
<script>
tagfunction doc360_callback() { document.getElementById('doc360_help_btn').classList.remove('hide'); }
doc360_callback
needs to remove thedisplay: none
from your button. This will be executed when the Knowledge Base widget has completed loading the settingfunction doc360_show_callback() { document.getElementById('doc360_help_btn').classList.remove('hide'); }
doc360_show_callback()
needs to remove thedisplay: none
from your button. This will be executed if the button was previously hidden by URL mappingfunction doc360_hide_callback() { document.getElementById('doc360_help_btn').classList.add('hide'); }
doc360_hide_callback()
needs to add thedisplay: none
to your button. This will be executed by the url mapping if a valid map is found to hide Knowledge Base widget
-
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 -->
-
Now, to make your new button open the Knowledge Base widget, use one of the scripts on the
OnClick
event- Pure JavaScript
document.getElementById('doc360_help_btn').addEventListener('click', function () { document.getElementById('document360-assistant-iframe').contentDocument.getElementById('doc360-button').click(); });
- JQuery
$('#doc360_help_btn').click(function() { $('#document360-assistant-iframe').contents().find('#doc360-button').click(); });
-
Finally, apply any custom styling to your new button/icon so that it matches your company branding or website.