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

# Widget

> Add an AI shopping assistant to your storefront with one script tag

The widget puts a shopping assistant on your site. Shoppers search the catalog, build a cart, and check out through the chat. It runs on the deployment's commerce backend, so it sells exactly what your agents sell.

## Install

1. In the [portal](https://app.vaultgraph.com), open the deployment's widget settings.
2. Optionally set a **Title**, an **Assistant name**, and the **Allowed domains**.
3. Copy the snippet and add it to every page of your storefront:

```html theme={null}
<script
  src="https://app.vaultgraph.com/widget.js"
  data-deployment="dep_your_deployment_id"
  async
></script>
```

The widget adds a chat button to the bottom-right corner. Clicking it opens the assistant in a drawer on the right side of the page, or full screen on phones. A shopper's conversation carries over between page loads.

## Allowed domains

The widget only loads on the domains you list, for example `shop.example.com, www.shop.example.com`. Enter each host you serve the storefront from. `http://localhost` is accepted for local development. With no domains listed, the widget loads on any site.

## Try it before installing

The **VaultGraph Widget On/Off** button in the deployment adds the widget to the portal page so you can chat with it. Drag the button to your browser's bookmarks bar to toggle the widget on any page, such as your live storefront, without changing its code. The widget still only loads on allowed domains.

## Control it from your page

The script exposes `window.vgWidget`:

| Method | Effect |
| - | - |
| `open(message?)` | Opens the drawer. A `message` is sent to the assistant as the shopper's own. |
| `close()` | Closes the drawer. |
| `remove()` | Removes the widget from the page. |

Use `open` with a message to start a conversation from your own buttons, for example suggestion chips:

```html theme={null}
<button onclick="vgWidget.open('What do you sell?')">What do you sell?</button>
<button onclick="vgWidget.open('Help me find a gift under $50')">
  Gift ideas
</button>
```

The script loads asynchronously, so check that `window.vgWidget` exists before calling it from code that runs on page load.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.