Automating onboarding emails with n8n and AutoSend

#automation #programming #webdev

Building a SaaS? The first thing you will build in your SaaS platform is the onboarding process. In my last article, you learned how to build the authentication system, and in this article, you will learn how you can automate the welcome emails during sign-up.

To build this, we will be using n8n and AutoSend, here’s a little about both the tools:

n8n: n8n is an automation tool that lets you connect apps and services without writing glue code everywhere. You build workflows visually, trigger something (like a webhook), run logic, call APIs, transform data, and ship results where you need them. It’s open-source, self-hostable, and flexible enough to power everything from simple automations to production-grade backend workflows.
AutoSend: AutoSend is a developer-first email API that makes sending transactional emails simple and reliable. You define templates once, trigger emails via an API or webhook, and AutoSend handles delivery, retries, and tracking.

Here’s what we will be building today:

Understanding the workflow

What happened above is, as soon as the user signed up with their details, a webhook was triggered which then made a Http call to the AutoSend API and sent the welcome email.

Here’s the entire workflow diagram:

To explain the entire process step-by-step:

User fills signup form

Frontend collects and sends this to n8n Webhook via POST:

{

"name": "Haimantika",

"email": "test@gmail.com"

}
Webhook receives the request

Data lands in:

$json.body.name

$json.body.email
n8n makes an API call to AutoSend:

POST https://api.autosend.com/v1/mails/send

And sends structured email payload:


`{`  
 `"from": { "email": "no-reply@saascode.in", "name": "Team SaaSCode"`   
`},`  
    `"to":   { "email": "test@gmail.com", "name": "Haimantika" },`  
  `"subject": "Welcome to SaaSCode 🎉",`  
  `"html": "<h1>Hello Haimantika</h1>"`  
    `}`

Finally, AutoSend validates the request, renders the template and sends the email

Building the n8n workflow

The n8n workflow is simple, all that it includes is a webhook and a http request.

To build the workflow, here’s how you need to configure them:

Add a webhook, change the HTTP method to POST, give the path a unique name, e.g user-signup and then keep the response timing to Immediate. Copy the production URL and then keep it saved, we will add it to our application later.

Then you need to add a HTTP request, in that add the https://api.autosend.com/v1/mails/send endpoint and keep the method as POST. a. Once this done, you need to add two headers: i. Authorization: Bearer <API key> ii. Content-type: application/json b. Next, you will need to add a JSON body. Copy and paste the JSON below. Update the email and the message:

{
  "from": {
    "email": "test@saascode.in",
    "name": "Team SaaSCode"
  },
  "to": {
    "email": "{{$json.body.email}}",
    "name": "{{$json.body.name}}"
  },
  "subject": "Welcome to SaaSCode 🎉",
  "html": "<h1>Hello {{$json.body.name}}</h1><p>Thanks for joining!</p>",
  "text": "Hello {{$json.body.name}}, Thanks for joining!"
}

The final step is to save and publish the workflow.

Frontend integration

The next step is to connect the frontend to the n8n workflow. For this particular demo, we are using a single index.html file and you can find the reference code here.

The frontend uses the native fetch API to communicate with n8n. When the user submits the sign-up form, we prevent the default browser behavior and aggregate the input values into a JavaScript object:

const formData = {
  name: fields.name.input.value.trim(),
  email: fields.email.input.value.trim(),
  password: fields.password.input.value,
};

Then we send a POST request to the n8n webhook endpoint.

Note: We include the Content-Type: application/json\ header so n8n can automatically parse the body.

const response = await fetch(
  "https://hmitra.app.n8n.cloud/webhook-test/user-signup", //the url we copied from n8n
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  }
);

Wrapping up

That’s really all there is to it.

With one webhook and one HTTP request in n8n, you’ve automated one of the most important parts of any SaaS: the first email a user receives after signing up. No background jobs, no custom mailer logic, no retry handling code scattered across your backend.

What I like about this setup is the clear separation of responsibility:

The frontend just collects user input and sends it somewhere.
n8n acts as the glue and the control plane.
AutoSend sends emails.

Once this is in place, you can keep extending it without touching your application code. Want to send a follow-up email after 24 hours? Add a Delay node. Want to route enterprise signups to a different template? Add a condition. Want to notify your internal team on Slack? Same workflow, one more node.

This is also why I prefer workflows for things like onboarding. These flows change often, especially early on. Keeping them outside your core codebase makes iteration much faster and much safer.

If you’re building a SaaS, this is one of those “set it up once and forget about it” pieces that pays off immediately.

Here’s some resources if you would like to learn more:

Hope you enjoyed reading this quick tutorial. Will see you next year with more such quick and fun content!