Controlling a widget with methods

Follow these steps to control a widget on a web page.

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 shows how to control widgets using methods and events provided by the widget. In this case, you will use the expand() and collapse() methods and the expandWidget and collapseWidget events of the floatingWidget.

Steps:

Go to the Widget Methods in the Bold360 AI Web API & SDK reference. You'll see that floatingWidget provides methods to expand() and collapse() the widget.
Use an editor to open an HTML page that contains a floating widget.

Create a button and give it an onclick script like the following:

<button id="myButton" onclick="if (widgetExpanded == false) {
    nanorep.floatingWidget.expand();
}
else { 
    nanorep.floatingWidget.collapse();
};">Toggle Widget Expansion</button>

Within the <script> tag that controls the floating widget, add a variable to track whether the widget is expanded or collapsed. If your widget is initially collapsed, set the variable to false. For example:
```
var widgetExpanded = false;
```
In the Web API reference, navigate to the Widget Events for the Web API. You'll see that the floatingWidget also provides expandWidget and collapseWidget events.
Notice that the API reference says the expandWidget and collapseWidget events are supported only if the "Minimized Widget Mode: Minimized" setting is used.
1. In the Bold360 AI Console, go to Touchpoints > Widgets.
2. Click Personalize for the floating widget, and select your knowledge base.
3. In the Position & Size tab, change the Minimized widget mode to Minimized.
4. Click the Save Changes button.
Within the <script> tag that controls the floating widget, add code to set the variable when the user or the button expands or collapses the widget.
```
nanorep.floatingWidget.on('collapseWidget', function() {
	widgetExpanded = false;
});
nanorep.floatingWidget.on('expandWidget', function() {
	widgetExpanded = true;
});
```
Test the button to watch it control the widget.