Bold360 and BoldChat Developer Center

Floating widget

The nanorep.floatingWidget is an interactive window that floats on top of a web page.

Customers click an icon to open the floating window. They can then type questions or click suggested links to access information in the knowledge base. Controls within the widget allow customers to close, collapse, or expand the window.



Generated base code to implement the widget is available on the Bold360 AI Console and customizable through the nanorep.floatingWidget API.

Note: This widget type is typically used in Conversational widget mode, but it can also be used in Search mode.

To add a floating widget to your web page, follow these steps:

  1. In the Bold360 AI Console, select your knowledge base and go to Touchpoints > Widgets.
  2. Click Get the Code in the Floating widget section.
  3. Check the boxes for any settings you want to enforce.

  4. Copy the generated code and paste it into your HTML page at the beginning of the <body> tag.
  5. You can Personalize the widget in the Bold360 AI Console. Changes saved in the Personalization page take effect immediately; you don't need to change the code in your HTML page to activate Personalization changes.
  6. You can further customize the behavior of the widget using the methods and events of the nanorep.floatingWidget class.
    Tip: In general, changes in the Personalize page affect the appearance of your widget, while changes to the API code in your HTML page affect the behavior of your widget.

For example, the following is generic floating widget code to be placed in an HTML page:

<!-- nanorep floating widget -->
<script>!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,
        l = document.createElement("script");
    l.async = l.defer = !0, l.setAttribute("src", p), document.getElementsByTagName("head")[0].appendChild(l)
}("account_name", "floatingWidget", "floating-widget.js", "/web/", "account_name.nanorep.co");
</script>
<!-- //nanorep floating widget -->