✨ 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

Sign up to Resend using our special queue jump link ✨

new Trigger({
  // Give your Trigger a stable ID
  id: "resend-welcome-drip-campaign",
  name: "Resend.com: Welcome Drip Campaign",
  // Trigger on a custom event, see https://docs.trigger.dev/triggers/custom-events
  on: customEvent({
    name: "new.user",
    // Use zod to verify event payload. See https://docs.trigger.dev/guides/zod
    schema: z.object({ id: z.string(), email: z.string(), name: z.string() }),
  }),
  // The run functions gets called once per "new.user" event
  async run(event, ctx) {
    // Send the initial welcome email. See https://docs.trigger.dev/integrations/apis/resend/actions/send-email
    await resend.sendEmail("📧 welcome", {
      from: FROM_EMAIL,
      replyTo: REPLY_TO_EMAIL,
      to: event.email,
      subject: "Welcome to Acme!",
      react: <WelcomeEmail name={event.name} />,
    });

    // Wait for 1 hour. See https://docs.trigger.dev/functions/delays
    await ctx.waitFor("⏲", { hours: 1 });

    // Send a tips email
    await resend.sendEmail("📧 tips", {
      from: FROM_EMAIL,
      replyTo: REPLY_TO_EMAIL,
      to: event.email,
      subject: "3 tips to get the most out of Acme",
      react: <TipsEmail name={event.name} />,
    });

    return event;
  },
}).listen();

✍️ 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.

You can easily 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.

📺 Go Live

Once you are happy with your campaign you can deploy it live to Render.com (or another hosting service). You can then 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,
  }),
});