Sending emails to your users with Supabase, Next.js and Plunk

Supabase, the open-source Google Firebase alternative is a fantastic platform to power your applications. With built-in features like authentication, database and storage, it is a great solution for building a modern app.

We all know that any modern app should work with a great email marketing tool, which is why today, you will learn how to connect Plunk to your Supabase projects. In this tutorial, we will discover how you can send a welcome email to a user when they sign up with Supabase.

How does Plunk work?

As you may already know, Plunk operates with events that you can trigger through a single API endpoint. Making it a super flexible tool since you can trigger them from literally anywhere! These events can be anything, you name it! Signup, project deleted, subscription cancelled and many more. Allowing you to trigger complex email workflows from practically anywhere.

You can already create a new project on the Plunk dashboard to get started.

1. Triggering an event

When you are building with Supabase, you integrate their API or one of the many client libraries into your own code. This is by far the easiest way to link Supabase and Plunk together. Let's say we want to trigger an event every time we have a new signup in our Next.js application that uses Supabase.

All we need to do is add our Plunk client next to our Supabase client and we are ready to start sending emails!

Install it just like you did with your Supabase client and you are ready to rumble!

yarn add @plunk/node

Head over to your Plunk dashboard's API settings and copy your public key. You will need it to send events from your application to Plunk. Now you can create a Plunk client, just like you did with Supabase!

1import Plunk from "@plunk/node";
2
3const plunkKey = process.env.NEXT_PUBLIC_PLUNK_PUBLIC_KEY;
4
5if (!plunkKey) {
6  throw new Error();
7}
8
9export const plunk = new Plunk(plunkKey);

After that, you can start using it in your code like this.

1const handleSignup = async (e: FormEvent<HTMLFormElement>) => {
2  e.preventDefault();
3
4  // Create the account in Supabase
5  const { error } = await supabase.auth.signUp({
6    email: "hello@useplunk.com", 
7    password: password
8  });
9
10  if (error) {
11    return alert(error.message);
12  }
13
14  // Send the event to Plunk
15  await plunk.events.track({
16    email: "hello@useplunk.com",
17    event: "account-created",
18  });
19
20  alert("Account created!");
21};

Now that our account-created events are being sent to Plunk, we can use them to create automated workflows that trigger every time someone creates an account. Allowing us to send them a friendly welcome email!

You can also find the complete example setup in the Plunk examples repository

2. Creating our template

Let's head over to our Plunk dashboard and create a new email template. Plunk templates are written in markdown and automatically converted into the complex HTML that email clients understand.

You can try out the editor if you want to see how it works.

Save your template once you have that perfect design and let's link it all together with an action!

3. Creating an action

Actions are your automated workflows. They take in events and automatically send emails to users that have completed the required ones.

You can create up to two automated workflows on the free plan. Find the create button on the actions tab. Give your action a name, select your account-created event and the template you just saved.

We suggest you also toggle the Run once toggle, just to make sure users only receive a single email when they sign up!

Testing it out

Once you have saved your action, your Plunk setup is up and running. Users will now receive emails when they create an account in your application. Easy right?

Go ahead and test it out with your own email! If you already used it to trigger the event, don't worry you can always delete your user in the dashboard!

Personalizing it

A great marketing email should always be personalized. Luckily, you can easily do this with Plunk! All we need to do is associate data to our users that we can then use in our templates. Let's say that you also collect their name during the signup process and you want to store that information in Plunk.

Changing our event publish function

1await plunk.events.track({
2    email: "hello@useplunk.com",
3    event: "account-created",
4    data: {
5      name: "Plunk",
6    }
7  });

Updating our template

By also adding the data parameter to our Plunk event, we can store extra data about our users and use it in our emails. Let's update the template you created in the previous steps.

Variables are automatically inserted in emails if they exist in the user. All you need to do is let Plunk know where it should place them. For this you make use of the {{variable}} syntax. Where you replace the word variable with the name of the variable you want to insert. In our case that would look something like this {{name}}

Variables are supported in both the subject and the body of the email, making it really easy to personalize the emails you are sending out! Because let's be honest, who doesn't want to see their name in an email?

Some common questions

What other tools does Plunk work with?

Plunk works with all tools and languages that can send API calls. We also have some integrations with some third-party no-code tools like Zapier.

What else can I use Plunk for?

Plunk is also a great tool to send transactional emails. You can use it to send completely customisable emails to your users, all through a single API call. You can find more information about this in our docs

Do I really need email marketing?

We know, marketing is a pain. Don't underestimate it's power though! Especially email marketing is still very effective in 2022. Several statistics show us that content marketing through email, like newsletters, is still the most effective way to reach your users.