Chat Widget API

The Chat Widget API allows you to manipulate the chat widget displayed on your website. Thanks to the ChatBot API, you can control the chat window behavior and much more. Below, you will find a complete list of all methods available in ChatBot.

What is JS API

You can use ChatBot Chat Widget API to control the chat window behavior. It allows you to control whether the widget should be opened, closed, hidden, or visible. For example, you can hide the widget by default and show it only when a specific button on the page is clicked.

Getting started

Once you implement the ChatBot Chat Widget on your website, you can immediately use our JS API via the OpenWidget object, which is loaded along with the Chat Widget tracking code. If you haven’t implemented chat widget to your website yet, here’s a step-by-step tutorial showing how to do it. An example ChatBot Chat Widget code looks like this:

<!-- Start of ChatBot (www.chatbot.com) code -->
<script>
  window.__ow = window.__ow || {};
  window.__ow.organizationId = "<organization_id>";
  window.__ow.template_id = "<widget_id>";
  window.__ow.integration_name = "manual_settings";
  window.__ow.product_name = "chatbot";   
  ;(function(n,t,c){function i(n){return e._h ...) // rest of code
</script>
<noscript>You need to enable JavaScript in order to use the AI chatbot tool powered by ChatBot</noscript>
<!-- End of ChatBot code -->

Two types of functions can be used:

• on — triggered when a specific action occurs (for example, when the chat widget is loaded, opened, or closed).
• call — can be triggered in any part of your code and combined with the on function (for example, when chat widget is loaded, maximize it).

Functions can be used in the following pattern:

OpenWidget.function(method, data)

For example, a function used to maximize the chat widget looks like this:

OpenWidget.call('maximize')

Examples

The easiest way to understand how JS API works is to see it in action. We prepared some ready-to-use examples you can freely modify and use in your project. You can find them below.

Embedding the widget in your website

Methods

Available JS API methods:

• minimize
• maximize
• hide
• destroy

You can find detailed information about each method below.

Minimize

Minimizes the maximized chat widget when called.

OpenWidget.call('minimize')

Maximize

Maximizes the minimized chat widget when called.

OpenWidget.call('maximize')

Hide

Hides both minimized and maximized chat widget when called. To show the chat widget once it has been hidden, you need to use either maximize or minimize API calls.

OpenWidget.call('hide')

Destroy

Destroys the chat widget when called To show the chat widget one it has been destroyed, you need to reinitialize the chat widget once again, using OpenWidget.init() API call.

OpenWidget.call('destroy')

Callbacks

Callbacks are triggered when a specific event occurs. Using callbacks allows you to react to these events dynamically. For example, when the chat widget has been loaded properly and is ready to use, maximize it automatically.

Example:

function onReady() {
  // add actions that you'd like to perform when OpenWidget is ready
  // for example:
  OpenWidget.call('maximize')
}

OpenWidget.on('ready', onReady)

onReady

Callback function invoked when the chat widget is loaded and is ready to use. It will immediatelly be called when the chat widget has already been loaded.

OpenWidget.on('ready', onReady)