Saltar al contenido principal

​
¿Qué es Resend?

Resend es una API de correo electrónico pensada para desarrolladores. Se centra en una alta tasa de entrega, la facilidad de integración y una experiencia de desarrollo sencilla a la hora de enviar correos electrónicos transaccionales y de marketing.

​
Tutorial paso a paso

Este tutorial te guía paso a paso para crear un CRM completamente funcional en menos de una hora, con recopilación de leads, confirmación por correo electrónico, suscripción a la newsletter y un panel interno de administración. Utilizarás:
  • Lovable: para generar el frontend y la lógica de backend.
  • Supabase: para el almacenamiento seguro de datos y la autenticación.
  • Resend: para automatizar y hacer seguimiento de correos electrónicos transaccionales y de marketing.
Empecemos.
1

Crea una landing page con un formulario de contacto

Usa la IA de Lovable para generar rápidamente una landing page para tu producto o servicio.Instrucciones:
1

Nuevo proyecto de Lovable

Crea un nuevo proyecto de Lovable.
2

Instrucción:

Crea una landing page de SaaS con un formulario de contacto que recopile nombre, correo electrónico y mensaje.
Landing Page Lovable Project Pn
3

Inspeccionar el código generado

Inspecciona el código generado o usa la herramienta de selección para ajustar elementos.
4

Añadir validación de datos

Añade validación de datos y un campo message para ofrecer una mejor experiencia de usuario.Email Resend Form Pn
2

Guarda las respuestas de formularios en Supabase

Supabase funciona como tu base de datos backend segura.
1

Cuenta de Supabase

Crea una cuenta gratuita de Supabase y un nuevo proyecto.
2

Clave API

En Lovable, conecta tu proyecto de Supabase usando la clave API.Correo de Resend en Supabase Pn
3

Crea una tabla `contacts` con:

  • id: UUID, clave primaria
  • name: text
  • email: text
  • message: text
  • created_at: timestamp
4

Lógica de envío

Modifica la lógica de envío del formulario para insertar datos en Supabase.
5

RLS

Aplica la seguridad a nivel de fila (Row-Level Security, RLS) de Supabase para restringir el acceso únicamente a usuarios autenticados.
3

Envía correos electrónicos de confirmación con Resend

Configura Resend para enviar correos electrónicos de confirmación automáticos cada vez que un lead envíe el formulario.
1

Regístrate en Resend

Regístrate en Resend y verifica tu dominio personalizado.
  • Se te pedirá que actualices tus registros DNS (TXT, MX).
  • Usa subdominios como updates.domain.com para gestionar mejor la reputación del correo electrónico.
2

Clave API

Integra la clave API en Lovable mediante la configuración de entorno o una función de backend.
3

SDK

Usa el SDK de Resend para enviar un correo electrónico de confirmación cuando se envíe el formulario.Confirmation Email Submission Resend Pn
4

Opcional: React Email

Usa React Email (también de Resend) para personalizar el aspecto y el estilo de tus correos con componentes reutilizables.Customize Email Resend Pn
4

Crea un panel de administración seguro

Permite que solo los usuarios autenticados puedan ver y gestionar leads.
1

Ruta de administrador

Crea una ruta /admin en Lovable.
2

Autenticación de Supabase

Habilita la autenticación de Supabase con inicio de sesión con correo electrónico y contraseña.
3

Contactos

Muestra la tabla contacts con las columnas:
  • Nombre
  • Correo electrónico
  • Vista previa del mensaje
  • Fecha de envío
4

Detalle completo del contacto

Añade un panel de detalle (por ejemplo, un panel deslizante) que muestre los datos completos del contacto cuando se haga clic en una fila.Crm Resend Email Pn
5

Lógica de redirección

Añade lógica de redirección para que los usuarios no autenticados sean redirigidos a /login.
5

Habilitar respuestas de correo personalizadas desde el administrador

Permite que tu equipo envíe seguimientos personalizados.
1

Panel de detalles del contacto

En el panel de detalles del contacto, agrega un campo de texto y plantillas predefinidas (por ejemplo, “¡Gracias por registrarte!”).
2

Agregar botón de envío

Agrega un botón de envío vinculado a Resend.
3

Almacenar mensajes enviados

Almacena cada mensaje enviado en una tabla sent_emails en Supabase:
  • contact_id
  • subject
  • body
  • sent_at
Esto te proporciona un registro buscable de todos los seguimientos.
6

Agregar un formulario de suscripción al boletín

Usa las Audiences de Resend para gestionar tus suscriptores y enviar correos de difusión.Boletín de suscripción Resend Pn
1

Añadir nuevo formulario

Añade un nuevo formulario en tu landing page para la suscripción al boletín.
2

Contacto de Resend

Al enviar el formulario:
  • Crea un contacto de Resend mediante la API
  • (Opcional) Guarda también el contacto localmente en Supabase
3

Diseño

Usa la interfaz de correos de difusión de Resend para diseñar y enviar newsletters.
  • Lógica de cancelación de suscripción integrada
  • Información sobre rendimiento (tasas de apertura, estado de entrega)
4

¡Revisión de cumplimiento!

Para cumplir con la normativa (p. ej., RGPD), considera implementar un flujo de doble opt-in.
7

BONUS: Cómo conectar Resend con Supabase Auth

Enviar correos electrónicos masivos Gdpr Resend Pn¿Quieres mejorar la autenticación por correo electrónico predeterminada de Supabase (que te limita a 4 correos por hora)?
1

Resend Supabase

Ve a la integración de Resend para Supabase.
2

Autenticación

Autentica tu proyecto de Supabase.
3

Configuración de dominio

Elige tu dominio y el nombre/correo electrónico del remitente.
4

SMTP

Resend configura automáticamente SMTP y reemplaza el sistema de correo electrónico predeterminado de Supabase.
5

Personalización

Ahora puedes personalizar las plantillas de correo electrónico de autenticación desde el panel de control de Supabase.
8

Toques finales y mejores prácticas

Audience Resend Pn
  • Manejo de errores: Lovable podría mostrar errores de compilación que sean falsos positivos. Siempre prueba tu funcionalidad en producción.
  • Reversiones con Supabase: Si reviertes código en Lovable, recuerda eliminar manualmente las políticas o migraciones asociadas en Supabase; no se deshacen automáticamente.
  • Consejos de entregabilidad:
    • Usa subdominios para aislar la reputación de envío.
    • Incluye siempre una versión en texto plano de tu correo electrónico.
    • Supervisa el rendimiento de tus correos con el panel de insights de Resend.
9

¡Listo! 🎉

En menos de una hora has creado un CRM moderno con:
  • Una landing page y un formulario de contacto
  • Almacenamiento de leads en base de datos
  • Confirmaciones de correo electrónico automatizadas
  • Panel de administración para la gestión de leads
  • Respuestas de correo electrónico personalizadas
  • Envío de newsletters
  • Autenticación y verificación de correo electrónico

​
¿Quieres ir más allá?

  • Agrega compatibilidad con correos electrónicos programados mediante cron jobs de Supabase
  • Crea flujos de automatización para enviar correos según las etapas de tus leads
  • Mejora el diseño de tu interfaz para aumentar la confianza en tu marca y las conversiones

​
Preguntas frecuentes sobre la integración con Resend

Resend es una API de correo electrónico creada para desarrolladores. Se centra en una alta entregabilidad, facilidad de integración y una experiencia limpia para desarrolladores a la hora de enviar correos transaccionales y de marketing.
No. Puedes completar toda la configuración del CRM usando el plan gratuito de Resend, que permite enviar correos desde un dominio verificado y hasta 3.000 contactos para correos de marketing.
Ve a Resend → Domains → Agrega tu dominio. Se te proporcionarán registros DNS (TXT, MX) para añadir a través de tu proveedor de DNS (por ejemplo, Cloudflare, Namecheap). Una vez añadidos, haz clic en Verify.
Usa un subdominio como updates.tudominio.com para aislar tu reputación de envío.
Hay algunas causas habituales:
  • No has verificado tu dominio.
  • Tu correo no tiene una versión de texto sin formato.
  • Estás enviando desde un remitente genérico como onboarding@resend.dev.
  • No estás siguiendo las mejores prácticas (por ejemplo, falta de enlaces para darse de baja en correos de marketing).
Usa el panel Deliverability Insights de Resend para obtener recomendaciones prácticas.
Sí. Usa React Email, una biblioteca de código abierto creada por el equipo de Resend, para diseñar correos con estilo y adaptables usando componentes de React.
Resend admite ambos:
  • Correos transaccionales (confirmación, restablecimiento, notificaciones) usando la API o el SDK.
  • Correos de marketing mediante la función Broadcast y Audiences.
Puedes crear, ver en vista previa y hacer seguimiento de las campañas desde el panel.
Usa Audiences:
  • Añade contactos manualmente, mediante CSV o de forma programática usando la API.
  • Cada Audience tiene un ID único que puedes usar para asociar suscripciones.
  • Los usuarios pueden darse de baja automáticamente mediante el enlace para darse de baja integrado de Resend.
No de forma predeterminada, pero puedes implementarlo manualmente:
  1. Al enviar el formulario, envía un correo inicial de confirmación.
  2. Pide a los usuarios que hagan clic en un enlace.
  3. Al hacer clic, confirma su suscripción y añádelos a tu audiencia de Resend.
Todavía no. Resend actualmente no admite campañas de goteo ni secuencias automatizadas.
Solución alternativa:Usa Supabase Cron Jobs para programar tareas que envíen correos de Resend a intervalos definidos.
Usa la integración oficial de Supabase creada por Resend:
  1. Autentícate con tu proyecto de Supabase.
  2. Proporciona un dominio y un nombre de remitente.
  3. Resend configura automáticamente tus correos de autenticación de Supabase para que usen tu cuenta de Resend.
Resend procesa automáticamente las bajas de suscripción:
  • Debes incluir un enlace para darse de baja en los correos de broadcast.
  • Cuando un usuario se da de baja, se elimina de la audiencia seleccionada.
  • Esto es necesario para el cumplimiento normativo de correo electrónico (por ejemplo, CAN-SPAM, GDPR).