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! 🚀