Bold360 and BoldChat Developer Center

Embedded widget

The nanorep.embeddedWidget places a search box in the flow of your web page.

Customers type questions in this box to get answers driven by the knowledge base.



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

Note: This widget type is always used in Search mode.

To add an embedded 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 Embedded 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 location where you want the field to appear.
  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.embeddedWidget 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 embedded widget code to be placed in an HTML page:

<!-- nanorep embedded widget -->
<div id="nanorep-embedded-widget"></div>
<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", "embeddedWidget", "embedded-widget.js", "/web/", "account_name.nanorep.co");
</script>
<!-- //nanorep embedded widget -->