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:
Click on Admin Panel.
Click on Customize.
Click the Widget modes tab.
By enabling the Hidden Mode option, you can ensure that the NeetoChat widget will not be shown on your website by default.
To show the widget, you can use the JavaScript API
NeetoChat.contextualHelp.showWidget()In case, you wish to hide the widget, then use the JavaScript API
NeetoChat.contextualHelp.closeWidget()
Showing the widget again when an agent replies
If you keep the widget hidden and open it from your own button or menu, a visitor may not notice when an agent replies. You can have NeetoChat show the launcher again, with its unread badge, when an agent replies while the widget is hidden. This setting is off by default.
Go to Admin Panel > Customize.
Click the Widget modes tab.
Turn on Show widget on new reply.
Click Save changes.
The launcher comes back for replies that arrive while the visitor has your page open. If you would rather keep the launcher hidden and show the count in your own menu, use the NeetoChat.onUnreadChange callback described below.
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.
Change the launcher text and icon
NeetoChat.widgetConfig sets the launcher text and icon for the page it runs on, instead of the admin panel settings. Refer to this document for the options.
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.
Maximize 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.
Show the widget and maximize it
NeetoChat.contextualHelp.openWidget()can be used to show the widget in the maximized state. If the widget is hidden, this command will show the widget in the maximized state. If the widget is already shown, this command will maximize the widget.
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).
Get the number of unread replies
NeetoChat.contextualHelp.getUnreadCount() method returns the number of agent messages the visitor has not read yet, across all of the visitor's conversations. The method returns a number.
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 |
|---|---|
|
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. |
|
Invoked when the widget is minimized. |
|
Invoked when the widget is maximized. |
|
Invoked when widget switches from hidden state to visible state. |
|
Invoked when widget switches from visible state to hidden state. |
|
Invoked for every widget state update. The callback receives the latest state as its first argument. The state includes |
|
Invoked when the number of unread agent messages changes, for example when an agent replies, when the visitor reads a reply, or when the page loads with replies the visitor has not read yet. The callback receives the new count as its first argument. |
|
Invoked right before the widget is unmounted from the DOM. |
For example, to show the unread count next to your own help menu:
window.NeetoChat = window.NeetoChat || {};
window.NeetoChat.onUnreadChange = count => {
const badge = document.getElementById("help-menu-badge");
badge.textContent = count > 0 ? count : "";
};If you wish to check all methods returned from NeetoChat object, then:
Go to the website where you have installed the NeetoChat widget.
Open the browser dev tools and click on the console.
On the console, do
console.log(window.NeetoChat).You would see all methods and values returned from the
NeetoChatglobal object.