Emails

Email mechanics are a pillar for creating engagement with your users.

Loops

Loops is a great tool for collecting mails, sending transactional mails (think user action like SIgnIn) and even more like marketing mails or newsletter handling.

Setup

1. Create an account on Loops.

2. On your Dashboard go to Settings > API and Generate Key

3. Paste it to your .env file

.env

LOOPS_API_KEY=

4. Create a Transactional ID in Transactional > New, this will be the mail your users receive when they SignIn.

5. Customize your email and Publish it, paste the Publish > transactionalId value into your .env file:

API Details from Publish tab

.env

LOOPS_TRANSACTION_ID=

6. Set your DNS Records on Settings > Domain > View records from your registrar (Cloudflare, NameCheap, Gandi...)

Contacts

DirectoryFast automatically add all the signed up users to your contact list.

If you want to update or modify this behavior, go to the /api/mailing/signin/route.ts file:

mailing/signin/route.ts

export async function POST(request: Request) {
  const body = await request.json();
  const res = await fetch(`https://app.loops.so/api/v1/contacts/create`, {
    method: "POST",
    body: JSON.stringify({
      email: body.email,
      subscribed: false,
    }),
    headers: {
      Authorization: `Bearer ${process.env.LOOPS_API_KEY}`,
      "Content-Type": "application/json",
    },
  });
  return new Response(JSON.stringify(res), {
    status: 201,
    statusText: "Created",
    headers: { "content-type": "application/json" },
  });
}

Newsletter

The newsletter feature let visitors subscribe to your newsletter with or without signing up.

It adds those visitors to the contact list with the "subscribed" value set to "true".

To modify this, go to the /api/mailing/subscribe/route.ts file:

mailing/subscribe/route.ts

export async function POST(request: Request) {
  const body = await request.json();
  const res = await fetch(`https://app.loops.so/api/v1/contacts/create`, {
    method: "POST",
    body: JSON.stringify({
      email: body.email,
      source: "newsletter",
    }),
    headers: {
      Authorization: `Bearer ${process.env.LOOPS_API_KEY}`,
      "Content-Type": "application/json",
    },
  });
  return new Response(JSON.stringify(res), {
    status: 201,
    statusText: "Created",
    headers: { "content-type": "application/json" },
  });
}