Running client-side functions on article content

Follow these steps to run client-side processing on knowledge base articles.

Prerequisites: Before performing this task, you should have a web page containing a floating widget. See Adding a widget to a web page.

About this task: This procedure runs a client-side JavaScript function to apply formatting to content in a knowledge base article. It does this by calling the registerClientMethods method of the Web API.

Steps:

In the Bold360 AI Console, create an article that calls a JavaScript function you will add to your web page.
1. Create and title an article as shown below.
2. Click Source in the editing toolbar. This switches to an HTML view of the article. Editing in Source mode is necessary so that double and single quotes are not changed to " and ' respectively.
3. Add a JavaScript function call inside double curly braces. For example: {{ myFormattingFunction('hello there') }}.
4. While still in Source mode, click Publish so the article is available to your widget. Don't switch out of Source mode and then publish the article.
Go to the Widget Methods in the Bold360 AI Web API & SDK reference, scroll down to the registerClientMethods link, and click it to get the Web API.

Note: Notice that this method is only available to widgets running in "conversational" mode. Because embedded widgets always run in "search" mode, this method is not available to embedded widgets. Typically, floating widgets are run in conversational mode. If you use a floating widget in search mode, this method is not available.
Use an editor to open an HTML page that contains a floating widget.

Paste the following code into the <script> that initializes the floating widget.

nanorep.floatingWidget.on('load', function() {
   this.api.conversation.registerClientMethods({
      myFormattingFunction: function(text) {
         return '<b>' + text + '</b>';
      }
   });
});

Test your web page. Remember to refresh the page and type RESET in the widget to get the current behavior. Then type the title of your article and select that option. You should see the text passed to the function by the article formatted in the manner specified in the function in your web page.
To see that the function is run in the browser rather than on the server, open the Developer Tools (the Chrome tools are shown below, but other tools are similar) and examine the following:
1. Go to the Network page.
2. In the list of API requests sent, select the statement request. The Request URL in the Headers tab shows that the /api/conversation/v1/statement REST API was called by the widget. (Note: /api/conversation/v2/statement API endpoint is in introduction phase.)
3. In the Preview tab, you'll see that the function call stored in your article is passed to your browser without being processed on the server. The double curly braces indicate that the contents should be processed on the client side only.
You can use the registerClientMethods method for all sorts of client-side processing. Besides font formatting, you can run asynchronous functions using the JavaScript Promise syntax and can display different content based on the value passed to the function. You can also combine initialized entity processing with client method processing. For example, an article can contain the following code to run a getBalance() client-side function on the value of a USER.ID initialized entity:
```
{{ getBalance([[USER.ID]]) }}
```