<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bold360 AI Floating Widget Chatbot</title>
</head>
<body>
<h1>Floating Widget</h1>
<script type="text/javascript" src="conf.js"></script>
<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);
</script>
<p>Demonstrating the floating widget (floatingWidget) that has already been added to this web page.</p>
<h2>Ask, Collapse, Expand</h2>
<ol>
<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>
</ol>
<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>
<h2>Focus</h2>
<p>
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>
</p>
</body>
<!-- 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>
<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?');
nanorep.floatingWidget.expand();
}
function FloatingWidgetInitHandler() {
//alert('FloatingWidgetInitHandler called');
nanorep.floatingWidget.setKB(BOLD360_AI_KBID);
nanorep.floatingWidget.setConfigId(BOLD360_AI_CONFIGID);
nanorep.floatingWidget.setInitializedEntities({
userFirstName: 'SampleFirstName',
role: 'SampleRole'
});
nanorep.floatingWidget.enableLogging();
}
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() {
nanorep.floatingWidget.collapse();
}
function ExpandFloating() {
nanorep.floatingWidget.expand();
}
</script>
</html>