Adding a widget to a web page

Follow these steps to create a web page with a floating or embedded widget.

Prerequisites: Before performing this task, you should have a Bold360 AI account and knowledge base. See Prerequisites for using the Web API and SDK.

About this task: This procedure adds a floating or embedded widget to a web page. It is a prerequisite for many other procedures.

Steps:

In the Bold360 AI Console, select your knowledge base and go to Touchpoints > Widgets.
Under Floating Widget or Embedded Widget, click GET THE CODE.
Check the Enforce KB box, and select the knowledge base that the widget should use. (You can also enable other options here if you like.)

Tip: You don't need to use the Personalize button now. You can make changes there later. Personalization changes immediately affect all widgets of that type that you have already added to web pages.

Copy the code and paste it into an HTML file. For example, if you are creating a floating widget, the code you paste might look like the following within the  comments.

Note: If you are adding a floating widget, paste the code at the beginning of the <body> tag. If you are adding an embedded widget, paste the code at the location where you want the field to appear.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My Chatbot</title>
</head>
                        
<body>
 <!-- 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)}("example_company","floatingWidget","floating-widget.js","/web/","example_company.nanorep.com");
</script>
<script>
nanorep.floatingWidget.on({
    init: function() {
        this.setKB('1234567890');
    }
});</script>
<!-- //nanorep floating widget -->
</body>
</html>

Save the page and open it in a web browser to test the floating widget.
You should be able to type questions in the widget that match topics in your knowledge base (such as the "how do I get help" topic below). So long as your knowledge base doesn't contain a topic about chatting or a channeling policy that is triggered by the word "chat", you will get an answer similar to the one below if you type chat.

If you encounter problems, see Troubleshooting.