> ## Documentation Index
> Fetch the complete documentation index at: https://www.text.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# About the Chat Widget JavaScript API

> Customize the behavior of the chat widget. Adjust the mechanics of the widget or leverage the JavaScript API to pass additional details on to the customer.

## About the API

The Chat Widget JavaScript API lets you interact with the chat widget embedded on your site.
It might come in handy whenever you want to gather some additional data using Text, show or hide your chat widget on certain occasions, or amend its behavior in a way that is not provided by the standard settings.

This document focuses on Developers and requires a basic knowledge of JavaScript. However, if you would have any questions, don't hesitate to start a chat with our Support Team or add a new topic on our [Discord for Developers](https://discord.gg/rFbJkYQFwp).

## Getting started

The API is accessed through the `LiveChatWidget` object. It's being initialized within the widget code, which is used to install our chat widget on your site.

If you haven't installed the code yet, you can either find it [directly in the app](https://www.text.com/app/settings/websites) or copy it from below. Remember to replace `<ORGANIZATION_ID>` with your organization ID.

```html title="Text widget code" theme={null}
<!-- Start of Text (www.text.com) code -->
<script>
  window.__lc = window.__lc || {};
  window.__lc.organizationId = "<ORGANIZATION_ID>";
  window.__lc.integration_name = "manual_onboarding";
  window.__lc.product_name = "text";
  (function (n, t, c) {
    function i(n) {
      return e._h ? e._h.apply(null, n) : e._q.push(n);
    }
    var e = {
      _q: [],
      _h: null,
      _v: "2.0",
      on: function () {
        i(["on", c.call(arguments)]);
      },
      once: function () {
        i(["once", c.call(arguments)]);
      },
      off: function () {
        i(["off", c.call(arguments)]);
      },
      get: function () {
        if (!e._h)
          throw new Error(
            "[LiveChatWidget] You can't use getters before load.",
          );
        return i(["get", c.call(arguments)]);
      },
      call: function () {
        i(["call", c.call(arguments)]);
      },
      init: function () {
        var n = t.createElement("script");
        ((n.async = !0),
          (n.type = "text/javascript"),
          (n.src = "https://cdn.livechatinc.com/tracking.js"),
          t.head.appendChild(n));
      },
    };
    (!n.__lc.asyncInit && e.init(), (n.LiveChatWidget = n.LiveChatWidget || e));
  })(window, document, [].slice);
</script>
<noscript
  ><a
    href="https://www.text.com/chat-with-ai-agent/<ORGANIZATION_ID>/"
    rel="nofollow"
    >Chat with AI agent</a
  >, powered by
  <a href="https://www.text.com/" rel="noopener nofollow" target="_blank"
    >Text</a
  ></noscript
>
<!-- End of Text code -->
```

The `LiveChatWidget` object comes with four functions:

* `on` registers a callback function for a specific event
* `once` similar to `on` but after single event trigger the callback is removed
* `off` removes a callback registered by `on`
* `call` allows you to invoke methods and setters
* `get` makes it possible to fetch data

The usage of these functions is based on passing the correct arguments in the following pattern:

```js theme={null}
LiveChatWidget.function("method", "data");
```

For example, if you would like to set your customer's name to `John Doe`, this is how it would look like:

```js theme={null}
LiveChatWidget.call("set_customer_name", "John Doe");
```

## Asynchronous Initialization

Asynchronous initialization is an optional feature available for chat widget via JavaScript API.
It allows for far more control over the moment when the chat widget should be loaded. It can be especially useful if you would like to make widget initialization happen as a consequence of some user interaction, or your own application business logic event.

This feature is disabled by default, so the chat widget loads automatically just after the snippet code is executed. In order to enable it, you need to explicitly set `__lc.asyncInit` property to `true`.

```html theme={null}
<script>
  window.__lc = window.__lc || {};
  window.__lc.organizationId = "<ORGANIZATION_ID>";
  window.__lc.asyncInit = true;

  /* rest of the standard snippet code */
</script>
```

From now on the snippet code will be executed but the chat widget and its resources will not be loaded. It means that although you will have access to `LiveChatWidget` object, the widget itself will not be present on your website and the `ready` callback will not be triggered.

Later in your code you can initialize chat widget manually when needed.
To do that simply call `init` function from `LiveChatWidget` object.

```js theme={null}
LiveChatWidget.init();
```