How to Use Notify with TypeScript/JavaScript

Send your first email with Notify using pure TypeScript/JavaScript, no dependencies needed.

Before we begin, know that we don't recommend this approach. The Notify Node.js SDK does a lot more under the hood, and handles a lot of the heavy lifting for you.

But if you're not using Node at all, or can't because of organizational limitations—goodness knows we've all been there—this is a decent workaround, if a little verbose.

Prerequisites

Before you start, make sure you have:

• Your API key – We generated one for you when you signed up. This authenticates your app and lets you send emails.
• A verified domain (optional) – Not required for testing. Trial accounts can send up to 100 emails total (10/hr limit). To scale beyond that, verify your domain for better deliverability.

---

1. Create the Notify Class

We’ll create a simple Notify class to wrap API calls. This mimics the functionality of the Notify SDK but works in pure TypeScript/JavaScript with fetch.

interface SendEmailParams {
  subject: string;
  to: string;
  name: string;
  message: string;
}

interface SendEmailFromTemplateParams {
  templateId: string;
  from?: string;
  to: string;
  variables?: Record<string, string>;
}

class Notify {
  private readonly apiKey: string;
  private readonly apiUrl: string;

  constructor(apiKey: string, apiUrl = 'https://notify.cx/api') {
    if (!apiKey) {
      throw new Error('API key is required');
    }
    this.apiKey = apiKey;
    this.apiUrl = apiUrl;
  }

  async sendEmail(
    params: SendEmailParams
  ): Promise<{ success: boolean; message: string }> {
    try {
      const response = await fetch(`${this.apiUrl}/send-email`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': this.apiKey
        },
        body: JSON.stringify(params)
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || response.statusText);
      }

      return data;
    } catch (error: unknown) {
      if (error instanceof Error) {
        throw new Error(`Failed to send email: ${error.message}`);
      }
      throw new Error('Failed to send email: An unknown error occurred');
    }
  }

  async sendEmailFromTemplate(
    params: SendEmailFromTemplateParams
  ): Promise<{ success: boolean; message: string }> {
    try {
      const response = await fetch(`${this.apiUrl}/send-email-from-template`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': this.apiKey
        },
        body: JSON.stringify({
          templateId: params.templateId,
          from: params?.from,
          to: params.to,
          variables: params?.variables
        })
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || response.statusText);
      }

      return data;
    } catch (error: unknown) {
      if (error instanceof Error) {
        throw new Error(`Failed to send email from template: ${error.message}`);
      }
      throw new Error(
        'Failed to send email from template: An unknown error occurred'
      );
    }
  }
}

---

2. Send an Email

Now that we have the Notify class, let's send a basic email:

const notify = new Notify('YOUR_NOTIFY_API_KEY');

async function sendEmail() {
  const response = await notify.sendEmail({
    to: 'john@example.com',
    subject: 'Hello world',
    name: 'John Doe',
    message: 'Your email content here'
  });
  console.log(response);
}

sendEmail();

Run this in a browser console or any JS/TS environment that supports fetch.

---

3. Sending Template-Based Emails

Instead of writing HTML manually for the message field, use Notify's templates. Notify offers an intuitive template builder with pre-made and fully customizable templates. These support dynamic variables for personalization.

async function sendEmailFromTemplate() {
  const response = await notify.sendEmailFromTemplate({
    to: 'john@example.com',
    from: 'Notify <noreply@notify.cx>',
    templateId: '4d6cb871-2c88-4f6f-bc0d-8902544afa9c',
    variables: {
      name: 'Jane Doe',
      company: 'Example Inc.'
    }
  });

  console.log(response);
}
sendEmailFromTemplate();

Both sendEmail and sendEmailFromTemplate throw errors if the request fails. Always wrap them in try/catch.

---

Where To Next?

• How to use Notify with Node.js
• Dive into the NotifyCX docs for advanced features.
• Explore analytics, logs, and transactional email best practices.

Now you’re ready to send emails with Notify using pure TypeScript/JavaScript! 🚀