<!DOCTYPE html>
<html lang="en">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Bold360 AI Floating Widget Chatbot</title>
<h1>Floating Widget</h1>
<script type="text/javascript" src="conf.js"></script>
    //alert('BOLD360_AI_ACCOUNT is ' + BOLD360_AI_ACCOUNT);
    //alert('BOLD360_AI_DOMAIN is ' + BOLD360_AI_DOMAIN);
    //alert('BOLD360_AI_KBID is ' + BOLD360_AI_KBID);
    //alert('BOLD360_AI_CONFIGID is ' + BOLD360_AI_CONFIGID);
	//alert('BOLD360_AI_APIKEY is ' + BOLD360_AI_APIKEY);
    //alert('BOLD360_AI_SUPPORT is ' + BOLD360_AI_SUPPORT);
    !function(t, e, o, c, n, a) {
        var s = window.nanorep = window.nanorep || {};
        s = s[e] = s[e] || {}, s.apiHost = a, s.host = n, s.path = c, s.account = t, s.protocol = "https:" === location.protocol ? "https:" : "http:", s.on = s.on || function() {
            s._calls = s._calls || [], s._calls.push([].slice.call(arguments))
        var p = s.protocol + "//" + n + c + o + "?account=" + t, el = document.createElement("script");
        el.async = el.defer = !0, el.setAttribute("src", p), document.getElementsByTagName("head")[0].appendChild(el)
    }(BOLD360_AI_ACCOUNT, "floatingWidget", "floating-widget.js", "/web/", BOLD360_AI_ACCOUNT + '.' + BOLD360_AI_DOMAIN);
<p>Demonstrating the floating widget (floatingWidget) that has already been added to this web page.</p>
<h2>Ask, Collapse, Expand</h2>
  <li>Please click the Ask a question... button.  Notice that it acts as if you typed a question, then searches the knowledge base for a matching phrasing.</li>
  <li>In this demo code, we have created some entities, one of which is userFirstName.  Please create an article in your knowledge base that contains
<strong>[[userFirstName]]</strong> in its Content, add a phrasing such as <strong>user</strong>, and publish your article.  Then, enter <strong>user</strong> in
the widget, and press the Enter key on your keyboard.  You should see SampleFirstName as an answer.</li>
<button onclick="RunFloatingAsk('please help?');" class="button">Ask a question in the floatingWidget, and expand the widget</button>
<button onclick="CollapseFloating();" class="button">Collapse the floatingWidget</button>
<button onclick="ExpandFloating();" class="button">Expand the floatingWidget</button>
Notice when you focus on the expanded floatingWidget, the cursor is where the user can enter text, and when you focus away, the cursor leaves.
<div id="notFloatingWidget"></div>
<button onclick="$('#notFloatingWidget').get(0).focus();" class="button">Focus away from the floatingWidget</button>
<button onclick="nanorep.floatingWidget.focus();" class="button">Focus on the floatingWidget</button>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>   
    $(document).ready(function () {
        //alert('In .ready');
        nanorep.floatingWidget.on('init', FloatingWidgetInitHandler);
        nanorep.floatingWidget.on('load', FloatingWidgetLoadHandler);

    function RunFloatingAsk(queryText) {
        //alert('RunFloatingAsk called');
        nanorep.floatingWidget.ask('please help?');
    function FloatingWidgetInitHandler() {
        //alert('FloatingWidgetInitHandler called');
			userFirstName: 'SampleFirstName',
			role: 'SampleRole'
    function FloatingWidgetLoadHandler() {
        //alert('FloatingWidgetLoadHandler called');
        nanorep.floatingWidget.displayHeaderButtons({ close: false }); //These parameters do not appear to work:  minimize: false, expand: false
        nanorep.floatingWidget.collapse(); //needed in case the user has refreshed the page with the widget expanded, because we want to start collapsed
        //    alert('switching to custom chat');
        //    this.escalate(channel); -->
    function CollapseFloating() {

    function ExpandFloating() {