Loops Integration

BuilderKit provides a seamless integration with Loops (opens in a new tab), a powerful tool for sending automated emails based on user events. This integration allows you to trigger emails and update contact information based on specific user actions or events within your application.

Configuration

To set up the Loops integration, you need to add your Loops API key to the .env file in the root directory of your project:

LOOPS_API_KEY=your_loops_api_key

Make sure to replace your_loops_api_key with your actual Loops API key.

Creating Contacts

To create a contact, you need to provide the email, userId, firstName, and lastName of the user. The email is required by Loops to create a contact, and you can include additional custom variables as needed.

The API route for creating contacts is located in src/app/api/loops/contact/create/route.ts.

How to use?

You can create contacts in Loops by making an API call to /api/loops/contact/create. Here's an example of how to create a contact:

import config from "@/config";
 
const URL = `${config.app.url}/api/loops/contact/create`;
await fetch(URL, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, userId, firstName, lastName }),
});

Updating Contacts

The API route for updating contacts is located in src/app/api/loops/contact/update/route.ts.

To update a contact, you need to provide the email of the contact along with the field(s) you want to update. In this example, we are updating the notes field for a contact. You can update any field except the email ID itself.

How to use?

You can update contact information in Loops by making an API call to /api/loops/contact/update. Here's an example of how to update the notes for a contact:

import config from "@/config";
 
const URL = `${config.app.url}/api/loops/contact/update`;
await fetch(URL, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, notes }),
});

Sending Events

The API route for sending events is located in src/app/api/loops/send-event/route.ts.

To send an event, you need to provide either the email or userId (or both) of the user. The eventName is required to specify which email event to trigger in Loops.

How to use?

You can send events to trigger emails in Loops by making an API call to /api/loops/send-event. Here's an example of how to send a welcome-email event to a user:

import config from "@/config";
 
const URL = `${config.app.url}/api/loops/send-event`;
await fetch(URL, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, userId, event }),
});

Optionally, you can pass eventProperties to include dynamic variables in the email, depending on your email template requirements in Loops.

By leveraging the Loops integration in BuilderKit, you can easily set up automated email campaigns, manage contacts, and trigger emails based on user events, enhancing user engagement and communication within your application.