Using JavaScript to control neetoChat widget

neetoChat allows you to control the behaviour of the neetoChat 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. In order 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 how the widget should behave 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 maximized state.

Control trigger action

NeetoChat.triggerAction accepts a string value to control how 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).

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.

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 updates. 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 neetoChat widget.

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

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

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