# Getting Started

Add the MailAgent chat widget to your website in under 5 minutes. Your users will be able to interact with an AI assistant that can draft emails, answer questions, and more.

## Prerequisites

* A MailAgent account with a **user ID**
* A website where you can add a `<script>` tag

## Quick Start

Add the following script tag to your HTML:

```html
<script
  src="https://widget.mailagent.email/connect/connect.js"
  data-user-id="YOUR_USER_ID"
></script>
```

Then open the widget from JavaScript:

```javascript
const widget = await MailAgent.open({
  bottom: "20px",
  right: "20px",
  width: "400px",
  height: "600px"
});
```

That's it. The widget will appear as a fixed-position chat window in the corner of your page.

## Finding Your User ID

The `data-user-id` is your MailAgent user ID — the unique identifier assigned to your account when you sign in with Google.

### From the Gmail Addon

The easiest way to find your user ID is in the Gmail addon:

1. Open Gmail and click the MailAgent icon in the sidebar.
2. Scroll to the bottom of the settings panel.
3. Your user ID is displayed under **"Your User ID"**.

## What Happens Under the Hood

1. The `connect.js` script loads and registers the global `MailAgent` object on `window`.
2. When you call `MailAgent.open()`, it creates a sandboxed `<iframe>` pointing to the MailAgent hosted app.
3. The iframe initializes with your user ID and configuration via `postMessage`.
4. Once ready, the widget fades in and your users can start chatting.

## Next Steps

* [Installation](https://support.mailagent.email/widget/installation) — All the ways to add the widget to your site.
* [Configuration](https://support.mailagent.email/widget/configuration) — Customize suggestions, colors, and header.
* [JavaScript API](https://support.mailagent.email/widget/javascript-api) — Control the widget programmatically.