ericallam/resend-staging-2

✨ Trigger.dev Welcome Drip Campaign with Resend.com

This repo contains a customEvent Trigger that will send an example drip email campaign using Resend.com and react.email

Resend.com is currently in private beta, but if you signup for their waitlist, give us a shout on our Discord and we'll help you get in.

🚀 Deploy

We've made it really easy to deploy this repo to Render.com, if you don't already have a Node.js server to host your triggers.

Render.com is a super-fast way to deploy webapps and servers (think of it like a modern Heroku)

Note Make sure you use your "live" trigger.dev API Key when deploying to a server

💻 Run locally

First, in your terminal of choice, clone the repo and install dependencies:

git clone https://github.com/ericallam/resend-staging-2.git
cd resend-staging-2
npm install

Then execute the following command to create a .env file with your development Trigger.dev API Key:

echo "TRIGGER_API_KEY=<APIKEY>" >> .env

And finally you are ready to run the process:

npm run dev

You should see a message output in your terminal like the following:

[trigger.dev]  ✨ Connected and listening for events [resend-welcome-drip-campaign]

🧪 Test it

After successfully running this template locally, head over to your Trigger.dev Dashboard and you should see your newly created workflow:

Click on the workflow in the list and you should come to the Workflow overview page:

Click on the "Test your workflow" button and fill in the JSON needed for this workflow's customEvent Trigger:

After click "Run Test" you'll be redirected to the Run Details page and you should see a prompt for entering your Resend.com API Key:

Resend.com is currently in private beta, but if you signup for their waitlist, give us a shout on our Discord and we'll help you get in.

After hitting "Save" the Run will pickup where it left off and make the request to Resend.com to send your email. You can even see a preview of the email right inside the step:

📺 Go Live

After you are happy with your campaign and deploy it live to Render.com (or some other hosting service), you can send custom events that Trigger your workflow using the sendEvent function from the @trigger.dev/sdk, or simply by making requests to our events API endpoint.

Here is an example of sending the custom event to trigger the workflow contained in this repo using fetch:

const eventId = ulid();
const event = {
  name: "new.user",
  payload: {
    id: "user_1234",
    email: "eric@trigger.dev",
    name: "Eric",
  },
};

const response = await fetch("https://app.trigger.dev/api/v1/events", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${process.env.TRIGGER_API_KEY}`,
  },
  body: JSON.stringify({
    id: eventId,
    event,
  }),
});

✍️ Customize

We've included two example emails that you should customize to your needs. You can use the react.email preview server locally to preview the emails and live edit them.

First clone the repo and install the dependencies:

git clone https://github.com/ericallam/resend-staging-2.git
cd resend-staging-2
npm install

Then you can run the email preview server and visit http://localhost:3000:

npm run emails

You can now edit the emails:

• welcomeEmail.tsx
• tipsEmail.tsx

From, Reply To, and Subject lines

You can customize the from and replyTo options by setting the FROM_EMAIL and REPLY_TO_EMAIL environment variables:

FROM_EMAIL="Trigger.dev <eric@email.trigger.dev>"
REPLY_TO_EMAIL="Eric <eric@trigger.dev>"

To customize the subject lines, edit the index.tsx file.

Customize the drippiness

You can customize the delays between emails by editing the ctx.waitFor call:

await ctx.waitFor("⏲", { hours: 1 });

You can also make your drip campaigns smarter by connecting to your own database and conditionally sending different emails depending on what the user does. To see an example of that check out our resend example.