Loops is used to send marketing and transactional emails. It’s easy to set-up and integrate with Supabase + it provides powerful capabilities to set up funnels for your email marketing.

​
Set up Loops

First, create an Loops account or sign in. Follow the on-boarding guide, it will help you set everything up (domain, DNS records, etc…). Next, navigate to the API Settings and generate a new API key. Paste it in the .env file.
.env
LOOPS_API_KEY=your_loops_api_key

​
Integrate with Supabase

You can find the official Loops x Supabase integration guide here..

​
Set up Loops SMTP in Supabase

  1. In Supabase, go to Project Settings -> Authentication.
  2. Scroll down and toggle the Enable Custom SMTP option on.
  3. In the Sender details section, you will need to enter some values into the “Sender email” and “Sender name” fields. However, these values will always be overwritten by the values set in your Loops templates from the next step.
  4. In the SMTP Provider Settings section enter the following data:
    FieldValue
    Hostsmtp.loops.so
    Port number587
    Usernameloops
    PasswordAn API key copied from your API settings in Loops
Image 1 One final step is to check that the “Confirm email” toggle is turned on in the Email section in Authentication -> Providers.

​
Create Transactional emails in Loops

Next, create new transactional emails for Confirm signup and Magic link (Authentication -> Email Templates):
  1. In Loops, go to the Transactional page
  2. Click New or select one of the many ready-made templates from the Templates page.
You can find more info on creating transactional emails here.
Image 2
  1. Use the Loops editor to create nicely-designed templates or make them as simple as you like.
  2. Add a button button & link it to a data variable named confirmationUrl, this allows data from Supabase to be inserted into each email. Image 3
  3. Once you’re done creating the email and adding the data variables, click Next. On the next page, click the Show payload button to view the API payload for your template. You will need this for the next step.
Image 4 Make sure to also publish your email! It won’t send unless it’s published.

​
Configure email templates in Supabase

The final step is to make sure your emails in Supabase are configured to send the correct data to Loops:
  1. In Supabase, go to Authentication -> Email Templates, then edit the Confirm signup and Magic link template to contain the payload as shown in the previous step (you can click the clipboard icon in Loops to copy the full payload).
  2. Once pasted into the Message body, you need to add the Supabase message variables into the payload.
Make sure to add the correct transactionalId to your email template in Supabase as well as the {{ .Email }} and {{ .ConfirmationURL }} variables like in the example below:
{
  "transactionalId": "clvmzp39u035tl50pw7wrl0ri",
  "email": "{{ .Email }}",
  "dataVariables": {
    "confirmationUrl": "{{ .ConfirmationURL }}"
  }
}
Here’s how it looks in the Supabase editor: Image 5 With the integration set up, all authentication emails will be sent via Loops, giving you more visibility on your email sends and the great addition of being able to build beautiful and easy-to-update emails in the Loops editor.

​
Important notes

  • You need to add a template in Loops and set up the email in Supabase for at least the Confirm signup and Magic Link templates.
  • The subject in Supabase templates is always overwritten by the subject added to the corresponding template in Loops.
  • The sender name and sender email configured in your Supabase SMTP settings are always overwritten by the sender details added to your templates in Loops.
  • Any Supabase email not set up with the correct API-like payload will fail to send.

​
Add new contacts

New users will be automatically added when they are first redirected to the home/page.tsx page:
/app/home/page.tsx
  const userMetadata = user.user_metadata;
  const userEmail = user.email;
  const userName = userMetadata.full_name || userMetadata.name;

  if (userEmail) {
    const contactProperties = {
      purchased: false,
      ...(userName && { firstName: userName }),
    };

    await loops.createContact(userEmail, contactProperties);
  }

​
Set up email funnel

You can easily set up email funnels within the Loops dashboard. Here is an example of mine:

Example funnel

The logic I’m using is simple:
  1. New users are added as a contact on Loops
  2. After 3 days, we will check if they made a purchase or not
    • If they did, we’ll send them a thank you email
    • If they did not, we’ll start an email sequence with multiple emails spread out over 10 days.