Using JavaScript to control NeetoChat widget

NeetoChat allows you to control the behaviour of the widget using JavaScript.

NeetoChat widget exposes certain methods to a global object: NeetoChat. Developers can use them to control the NeetoChat widget programmatically.

For instance, if you need to hide or show the NeetoChat widget within your application via a button or link, you can do the following:

1. Login to NeetoChat using your admin account.

2. Click on Settings.

3. Inside the Widget Settings, click on Customize.

4. Go to Widget Modes in the left menu option.

5. By enabling the Hidden mode option, you can ensure that the NeetoChat widget will not be shown on your website by default.

6. To open the widget, you can use the JavaScript API NeetoChat.contextualHelp.openWidget()

7. In case, you wish to hide the widget, then use the JavaScript API NeetoChat.contextualHelp.closeWidget()

NeetoChat global object config

You can control the widget's behaviour by setting global configurations in the window object. Make sure the required configurations are set before embedding and initializing the widget.

Start widget in maximized state

NeetoChat.maximizedView can be set to true to start the widget in a maximized state.

Control trigger action

NeetoChat.triggerAction accepts a string value to control how the widget behaves when clicking the trigger button. By default, the button should minimize the widget. setting this property to "hide" will hide the entire widget along with the trigger. This is useful when you have a controlled widget.

NeetoChat global object methods

Show widget launcher icon on your website

NeetoChat.contextualHelp.showWidget() can be used to show the widget on your website. The widget will be placed as per your customization on the website.

Hide widget launcher icon on your website

NeetoChat.contextualHelp.closeWidget() can be used to hide the widget icon from your website.

Open the widget to show the widget home screen

NeetoChat.contextualHelp.maximizeWidget() can be used to maximize the widget and show the widget home screen.

Minimize the widget

NeetoChat.contextualHelp.minimizeWidget() can be used to minimize the widget to its launcher state.

Check whether the widget is shown or not

NeetoChat.contextualHelp.isWidgetOpened() method can be used to check whether the widget is shown or not. The method returns a boolean value (true/false).

Check whether the widget is maximized or not

NeetoChat.contextualHelp.isWidgetMaximized() method can be used to check whether the widget is in a maximized state or not. The method returns a boolean value (true/false).

Open a NeetoKB article in the widget

NeetoChat.contextualHelp.showKbArticle(slug/permalink) method can be used to open a NeetoKB article in the widget. You can pass the slug or the permalink of the article you wish to open to the method. Refer to this document for more details.

NeetoChat global object callbacks

If the host application code needs to register callbacks for certain events in the widgets, they can set the following event listeners/callbacks on the window.NeetoChat object. This callbacks are invoked when corresponding actions are performed on the widget.

Callback	Details
NeetoChat.onMount	Invoked when the widget is all ready and mounted to the DOM. From this point onwards, all widget related configs and methods should be available on the window object.
NeetoChat.onMinimize	Invoked when the widget is minimized.
NeetoChat.onMaximize	Invoked when the widget is maximized.
NeetoChat.onShow	Invoked when widget switches from hidden state to visible state.
NeetoChat.onHide	Invoked when widget switches from visible state to hidden state.
NeetoChat.onUpdate	Invoked for every widget state update. The callback receives the latest state as it's first argument. This callback should be useful for advanced customisation.
NeetoChat.onUnmount	Invoked right before the widget is unmounted from the DOM.

---

If you wish to check all methods returned from NeetoChat object, then -

1. Go to the website where you have installed the NeetoChat widget.

2. Open the browser dev tools and click on the console.

3. On the console, do console.log(window.NeetoChat).

4. You would see all methods and values returned from the NeetoChat global object.