Wix to Brevo: Add a Contact to a List and Send a Transactional Email

Want a copy-paste way to push Wix form submissions into Brevo (ex-Sendinblue)—creating/updating the contact in a List and firing a transactional template? Below is a production-ready backend module and a minimal front-end handler. Drop them into your Wix Studio project, wire one secret, map your form fields, and you’re live.

---

Overview of Wix to Brevo Integration

This guide walks you through integrating Wix with Brevo. You will learn how to create or update a contact in a Brevo list and send a transactional email.

Key Features

• Creates or updates a Brevo contact in a specific List.

• Sends a transactional email using a Brevo templateId.

• Safe secret handling via Wix Secrets Manager.

• Robust list resolution by ID or name (with pagination).

• Clean error surfaces for debugging and analytics.

  
  

---

Prerequisites

Before you start, ensure you have the following:

• A Brevo API key (SMTP & API enabled).

• A Brevo List (ID or exact name).

• A transactional email templateId in Brevo.

• A Wix form (lightbox or inline) with known field keys.

• One Secret in Wix Secrets Manager named BREVO that stores your Brevo API key (value only).

  
  

---

1) Backend: backend/brevo.web.js

Paste the following code as-is. It exposes two web methods:

• `subscribeToWaitingList(args)` → creates or updates a contact in a list and sends a transactional email.

• `getBrevoLists()` → enumerates lists (handy for debugging and mapping).

  
  

2) Front-end: Pop-up (Lightbox) Handler

Bind this code to your form element (ID form1 in this example). On successful submission, we read the field values, call the backend method, and close the lightbox if everything is OK.

How It Works (Brief)

• Secret resolution: The backend pulls the API key from BREVO in Secrets Manager via `elevate(secrets.getSecretValue)`.

• List lookup: The code paginates `/contacts/lists` and resolves the target list by ID or normalized name.

• Upsert contact: POST `/contacts` with `updateEnabled: true`—this creates or updates the contact and assigns them to the list.

• Transactional email: POST `/smtp/email` with your `templateId` and runtime params (like FIRSTNAME, LASTNAME).

• Frontend flow: After a successful Wix form submit, we read values, call the web method, and optionally close the lightbox.

  
  

---

Configuration You Must Set

• BREVO secret: Go to Wix Dashboard → Settings → Secrets Manager → New Secret → Key=BREVO, Value=<your Brevo API key>.

• List & template: Change the constants in your front-end (or pass via dataset):

- `LIST_ID` → The numeric List ID in Brevo (or adapt backend to use `targetListName`).

- `TEMPLATE_ID` → Your transactional template ID.

• Form field keys: Replace `first_name_1000`, `last_name_2b5d`, `email_5e1c` with your actual field keys (use `formEl.getFieldValues()` to show them in console—log it once and copy the exact keys).

  
  

---

Customization Tips

• Resolve list by name: Call `subscribeToWaitingList({ ..., targetListName: 'VIP Waiting List' })` instead of `targetListId`.

• Tag outbound emails: Adjust `tags: ['waiting-list']` to your taxonomy for analytics.

• Attributes mapping: Extend attributes in `_subscribeRaw` to push custom fields into Brevo contacts.

• Access: If this is not a public form, change `Permissions.Anyone` to `Permissions.SiteMember`.

• Silent email: If you only need to store contact (no email), skip the email call in `subscribeToWaitingList`.

  
  

---

Troubleshooting

• “List … not found”: Confirm `LIST_ID` or exact name; try `getBrevoLists()` from the browser console to list available IDs.

• “Missing email”: Check your form field keys and ensure the email is non-empty.

• 401/403 from Brevo: Rotate the `BREVO` secret; verify your key has API permissions.

• Template sends but no params: Ensure your Brevo template uses the same variable names (e.g., `{{ params.FIRSTNAME }}`).

  
  

By following these steps, you can effectively integrate Wix with Brevo, ensuring seamless communication and data management.