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

# Programmatic chat API

> Open the chat from your own JavaScript or by wiring up an arbitrary element with an onclick handler.

Need to open the chat from your own JavaScript or from an existing element on your page (an image, a banner, a custom-styled button)? Use the programmatic API on the embedded widget element.

<Note>
  If you just want a "Chat with us" button, paste the prebuilt [`<molin-shop-ai-button>`](/home/general/elements#molin-shop-ai-button) instead. It is one HTML tag, no JavaScript, and you style it with a single `bg` attribute. Use this page when you need to wire up something custom.
</Note>

## API

The embedded widget element exposes two methods you can call from anywhere on the page:

* `document.querySelector('molin-shop-ai').openChat()` opens the chat window
* `document.querySelector('molin-shop-ai').closeChat()` closes it

For sending a message at the same time, see [Send message programmatically](/home/general/send-message).

## Wire up your own button

Wrap any element in an `onclick` that calls `openChat()`:

```html theme={null}
<button type="button" onclick="document.querySelector('molin-shop-ai').openChat()">Chat with us</button>
```

Style it however you want, the API is independent of the markup:

```html theme={null}
<button
  type="button"
  onclick="document.querySelector('molin-shop-ai').openChat()"
  class="rounded-full bg-[#601FEB] px-8 py-2 text-base font-medium text-white transition-colors duration-200 hover:bg-[#8624FF]">
  Chat with us
</button>
```

## Make an existing element clickable

If you already have an image, banner, or text block you want to use as the trigger, wrap it in an anchor that calls `openChat()`:

```html theme={null}
<a href="javascript:void(0);" onclick="document.querySelector('molin-shop-ai').openChat()">
  <!-- your element here -->
</a>
```

## Related

* [Elements](/home/general/elements) — drop-in HTML tags including the prebuilt chat button
* [Send message programmatically](/home/general/send-message) — open the chat AND deliver a message in one call
* [Show/Hide widget](/apis/experimental/show-hide-widget) — control widget visibility