Send emails with Firebase and Plunk

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

Firebase allows you to send emails from your app, but it is not the most flexible tool out there. You probably already know that since you are reading this post. In this tutorial, you will learn how easy it is to send emails with Firebase and Plunk.

How does Plunk work?

Plunk actions are triggered by events. These events can be triggered through the Plunk API or by using one of the many client libraries. In this tutorial, you will use the Node.js client to trigger an event.

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!

import Plunk from "@plunk/node";

const plunk_pk = process.env.NEXT_PUBLIC_PLUNK_PK;

if (!plunk_pk) {
  throw new Error();
}

export const plunk = new Plunk(plunk_pk);

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

const handleSignup = async (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();

  // Create the account in Firebase
  try {
    await Firebase.auth().createUserWithEmailAndPassword(email, password);
  } catch (e) {
    alert(e.message);
  }

  // Send the event to Plunk
  await plunk.events.track({
    email: "hello@useplunk.com",
    event: "account-created",
  });

  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.

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 link together your events and templates and allow you to send emails automatically.

You can create as many actions as you want. 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!

4. Personalising it

A great email should always be personalised. 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

await plunk.events.track({
    email: "hello@useplunk.com",
    event: "account-created",
    data: {
      name: "Plunk",
    }
});

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 are linked to 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 personalise 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 else can I use Plunk for?

Plunk is also a great tool for sending transactional emails. You can use it to send completely customisable emails with 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 2024. Several statistics show us that content marketing through email, like newsletters, is still the most effective way to reach your users.