# Widget

The chat widget on your site: a 6KB loader, a hosted chat app, and a host API for talking to it from your own code.

Source: https://docs.omazy.ai/widget/

The widget is the part of Omazy your customers actually touch. Everything else
is backstage.

It ships in two pieces, and the split is the whole trick:

| Piece | What it is | Where it runs |
|---|---|---|
| **Loader** | About 6KB of dependency-free vanilla JavaScript. Draws the launcher, opens an iframe, relays messages. | Your page |
| **Chat app** | The actual conversation UI. | An iframe on `chat.omazy.ai` |

Your page carries the weight of a small image. The chat app, which is the heavy
part, does not load at all until someone opens it. And because it lives in an
iframe on our origin, its CSS cannot leak into your site and your CSS cannot
leak into it. Good fences, quiet neighbours.

## Install

One script tag, placed before `</body>`:

```html
<script>
  (function (d, s) {
    var j = d.createElement(s); j.async = 1;
    j.src = "https://chat.omazy.ai/widget.js";
    d.head.appendChild(j);
  })(document, 'script');
  window.ouWidget = window.ouWidget || function () {
    (window.ouWidget.q = window.ouWidget.q || []).push(arguments);
  };
  ouWidget('init', { key: 'YOUR_WIDGET_KEY' });
</script>
```

That middle stanza is a command queue, the same pattern analytics snippets use.
Calls made before the loader finishes are not dropped, they queue up and run on
arrival. You can call `ouWidget('open')` on the very next line and it will be
honoured a moment later. No load-order archaeology required.

Your widget key comes from the console under Connect, Widget.

## What to read next

| Page | For |
|---|---|
| [Host API](/widget/host-api/) | Driving the widget from your own JavaScript |
| [Message blocks](/widget/message-blocks/) | What the agent can put on screen beyond plain text |
| [Troubleshooting](/widget/troubleshooting/) | When the launcher does not appear |

## Mobile apps

The loader also speaks to native shells. If it finds `window.OuchatNative` or
`window.webkit.messageHandlers.ouchat`, it forwards the same events over that
bridge, so a WebView-hosted widget can tell its host app about unread counts
without you writing a second protocol.