Browser Client - Installation

The @mailiam/client SDK provides a lightweight, browser-safe solution for form submissions.

Installation

Install the package using npm:

npm install @mailiam/client

Or using yarn:

yarn add @mailiam/client

Or use directly from a CDN:

<script type="module">
  import { mailiamClient } from 'https://esm.sh/@mailiam/client';
</script>

Get a Public Key (Optional)

Public keys are optional but recommended for better rate limits:

# Install mailiam CLI if you haven't already
npm install -g mailiam

# Create a public key for your domain
mailiam keys create --name "Website Forms" --type public --domain mycompany.com

Save the key that starts with mlm_pk_...

Basic Setup

With a Module Bundler

import { mailiamClient } from '@mailiam/client';

const client = new mailiamClient({
  publicKey: 'mlm_pk_...' // Optional
});

Without a Public Key

import { mailiamClient } from '@mailiam/client';

// No authentication required for form submissions
const client = new mailiamClient();

From CDN

<script type="module">
  import { mailiamClient } from 'https://esm.sh/@mailiam/client';

  const client = new mailiamClient({
    publicKey: 'mlm_pk_...'
  });

  // Use client here
</script>

Configuration Options

const client = new mailiamClient({
  // Optional: Public API key
  publicKey: 'mlm_pk_...',

  // Optional: Custom API base URL
  baseUrl: 'https://api.mailiam.dev',

  // Optional: Request timeout in milliseconds (default: 30000)
  timeout: 30000
});

Environment Variables

Next.js

Store public key in .env.local:

NEXT_PUBLIC_MAILIAM_PUBLIC_KEY=mlm_pk_your_key_here

Use in components:

import { mailiamClient } from '@mailiam/client';

const client = new mailiamClient({
  publicKey: process.env.NEXT_PUBLIC_MAILIAM_PUBLIC_KEY
});

Vite

Store in .env:

VITE_MAILIAM_PUBLIC_KEY=mlm_pk_your_key_here

Use in components:

const client = new mailiamClient({
  publicKey: import.meta.env.VITE_MAILIAM_PUBLIC_KEY
});

React (Create React App)

Store in .env:

REACT_APP_MAILIAM_PUBLIC_KEY=mlm_pk_your_key_here

Use in components:

const client = new mailiamClient({
  publicKey: process.env.REACT_APP_MAILIAM_PUBLIC_KEY
});

Verify Installation

Test that everything is working:

<!DOCTYPE html>
<html>
<body>
  <h1>Test Form</h1>
  <form id="testForm">
    <input name="email" type="email" placeholder="Your email" required>
    <button type="submit">Test</button>
  </form>
  <div id="result"></div>

  <script type="module">
    import { mailiamClient } from 'https://esm.sh/@mailiam/client';

    const client = new mailiamClient();

    document.getElementById('testForm').addEventListener('submit', async (e) => {
      e.preventDefault();

      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData.entries());

      try {
        await client.submitForm('yourdomain.com', data);
        document.getElementById('result').textContent = '✓ Working!';
      } catch (error) {
        document.getElementById('result').textContent = '✗ Error: ' + error.message;
      }
    });
  </script>
</body>
</html>

TypeScript Support

The client includes full TypeScript definitions:

import { mailiamClient, type FormSubmission } from '@mailiam/client';

const client = new mailiamClient({
  publicKey: 'mlm_pk_...'
});

const formData: FormSubmission = {
  name: 'John Doe',
  email: 'john@example.com',
  message: 'Hello!'
};

await client.submitForm('mycompany.com', formData);

Next Steps

Form Submission - Learn how to submit forms
Framework Examples - React, Vue, Svelte examples
API Reference - Complete API documentation