# Installation
## Script Tag (Recommended)
The simplest way to add MailAgent to your website is with a single `
```
This registers the global `window.MailAgent` object. You can then open the widget from anywhere in your code.
### With Configuration
Pass configuration directly via `data-*` attributes on the script tag:
```html
```
## Single Page Applications (React, Vue, Next.js, etc.)
For SPAs, add the script tag to your root HTML file (`index.html`, `_document.tsx`, etc.) or load it dynamically:
```javascript
// Load the connect script dynamically
const script = document.createElement('script');
script.src = 'https://widget.mailagent.email/connect/connect.js';
script.dataset.userId = 'YOUR_USER_ID';
document.body.appendChild(script);
```
### React Example
```tsx
import { useEffect, useRef } from 'react';
function ChatWidget() {
const widgetRef = useRef(null);
const openChat = async () => {
if (widgetRef.current?.mounted) return;
widgetRef.current = await MailAgent.open({
bottom: '20px',
right: '20px',
width: '400px',
height: '600px',
});
};
return ;
}
```
### Next.js Example
Add the script in `app/layout.tsx` or `pages/_document.tsx`:
```tsx
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
## Verify Installation
Open your browser's developer console and type:
```javascript
typeof window.MailAgent // should return "object"
```
If it returns `"object"`, the widget is loaded and ready to use.