Published on 

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

Firebaseis a great tool to build your next app. It provides you with a database, authentication, storage and much more.

Sending emails to your users with Firebase and Plunk

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 Firebase, you integrate their API or one of the many client libraries into your own code. This is by far the easiest way to link Firebase 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 Firebase.

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

Install it just like you did with your Firebase 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 Firebase!

1import Plunk from "@plunk/node";
3const plunkKey = process.env.NEXT_PUBLIC_PLUNK_PUBLIC_KEY;
5if (!plunkKey) {
6  throw new Error();
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();
4  // Create the account in Firebase
5  try {
6    await Firebase.auth().createUserWithEmailAndPassword(email, password);
7  } catch (e) {
8    alert(e.message);
9  }
11  // Send the event to Plunk
12  await{
13    email: "",
14    event: "account-created",
15  });
17  alert("Account created!");

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.

An image showing Plunk's built-in drag-and-drop email editor
An image showing Plunk's markdown editor

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!

Plunk's welcome email to new users
Plunk's welcome email to new users

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

2    email: "",
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 integrations with a number of 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.