Installation

Script Tag (Recommended)

The simplest way to add MailAgent to your website is with a single <script> tag. Place it before the closing </body> tag:

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

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:

<script
  src="https://widget.mailagent.email/connect/connect.js"
  data-user-id="YOUR_USER_ID"
  data-suggestions='[
    {"icon": "✉️", "text": "Write a professional email"},
    {"icon": "📝", "text": "Summarize this thread"}
  ]'
  data-header-transparent="true"
  data-color-background-primary="#2c7df6"
></script>

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:

// 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

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 <button onClick={openChat}>Open Chat</button>;
}

Next.js Example

Add the script in app/layout.tsx or pages/_document.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://widget.mailagent.email/connect/connect.js"
          data-user-id="YOUR_USER_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Verify Installation

Open your browser's developer console and type:

typeof window.MailAgent // should return "object"

If it returns "object", the widget is loaded and ready to use.

PreviousGetting Started NextConfiguration

Last updated 4 months ago