Aprende a integrar Mailtrap con tu aplicación Bolt.new para enviar emails transaccionales y gestionar contactos sin escribir código complejo. Además, descubre cómo orquestar la lógica en Supabase para almacenar con seguridad la información de tus formularios y credenciales.
Este artículo se basa en el tutorial oficial de Mailtrap sobre cómo enviar emails con Bolt.new. Puedes consultarlo en este recurso.
En Q2BSTUDIO desarrollamos aplicaciones a medida y software a medida con foco en escalabilidad, seguridad y optimización de costes. Nuestro equipo integra inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, además de automatizar flujos con agentes IA e implementar ia para empresas. Si buscas un partner experto para construir tu plataforma y tu canal de emails, visita nuestra página de aplicaciones a medida y software a medida.
Antes de empezar
Cuentas necesarias
- Cuenta de Bolt.new para crear aplicaciones y generar la lógica
- Cuenta de Mailtrap para enviar emails con alta entregabilidad
- Cuenta de Supabase para guardar API keys con seguridad y gestionar la base de datos
Configuración previa
1. Verifica tu dominio de envío. Mailtrap permite enviar correos solo desde un dominio verificado. Sigue la guía de configuración en este enlace.
2. Obtén tu token de API. Asegúrate de que tu API Token tenga nivel de acceso admin a tu dominio y contactos.
3. Encuentra tu Account ID. Lo necesitarás para crear contactos en Mailtrap. Está disponible en la sección de gestión de la cuenta.
4. Crea campos personalizados si los necesitas. Configura Custom fields en Mailtrap si tus formularios tienen inputs adicionales que quieras guardar.
5. Localiza tu List ID opcionalmente si deseas organizar contactos en listas específicas.
Nota importante: los prompts propuestos se basan en nuestra experiencia con Bolt.new a agosto de 2025. Dado que Bolt.new y los modelos LLM evolucionan constantemente, puede que necesites ajustar los prompts a tus necesidades.
Configura Mailtrap Email API con Bolt.new
Paso 1: envío básico de emails
Comienza con este prompt en Bolt.new para crear una funcionalidad simple de envío de correos:
El email debe enviarse vía Mailtrap.io porque ya tengo cuenta allí. Mi dominio verificado en Mailtrap es tu-dominio.com. Quiero enviar emails desde hello@tu-dominio.com. Guarda mi API key de Mailtrap en el secreto MAILTRAP_API_KEY. Incluye y usa el SDK de Mailtrap para NodeJS https://www.npmjs.com/package/mailtrap para enviar correos utilizando la última versión disponible del paquete.
Referencias de documentación: Readme https://github.com/railsware/mailtrap-nodejs/blob/main/README.md. Ejemplos de implementación https://github.com/railsware/mailtrap-nodejs/tree/main/examples. Ejemplo de envío de email https://github.com/railsware/mailtrap-nodejs/blob/main/examples/sending/everything.ts.
Con esta base tendrás la integración con Mailtrap lista y el entorno preparado para enviar emails.
Paso 2: gestiona contactos de Mailtrap automáticamente
Mejora la configuración para añadir automáticamente los envíos de formularios a los Contactos de Mailtrap:
Pasa todos mis nuevos usuarios y envíos de formulario a Mailtrap Contacts. Usa la versión más reciente del SDK de Mailtrap para NodeJS para añadir contactos. Usa la variable de entorno MAILTRAP_ACCOUNT_ID. Usa el mismo token que empleo en modo producción de Mailtrap ya que también puede crear contactos. Pasa el nombre del formulario al campo name de Mailtrap. Añade los usuarios a MAILTRAP_LIST_ID.
Configuración de base de datos en Supabase: crea una tabla contacts con columnas id UUID clave primaria, name text, email text, message text, created_at timestamp, mailtrap_contact_id text. Aplica Row Level Security RLS para restringir el acceso solo a usuarios autenticados. Guarda la información del formulario en la base de datos y usa el SDK de Mailtrap para crear el contacto en Mailtrap. Guarda el contact_id de Mailtrap en la columna mailtrap_contact_id.
Paso 3: localiza tu List ID en Mailtrap opcional
Si quieres añadir contactos a una lista concreta en Mailtrap: 1. Entra en tu lista haciendo clic en ella en Mailtrap. 2. Revisa la URL, tendrá este formato de filtros similar a https://mailtrap.io/contacts?filters=%5B%7B%22name%22:%22list_id%22,%22operator%22:%22equal%22,%22value%22:%5B23%5D%7D%5D. 3. Usa un decodificador de URL como esta herramienta. 4. Localiza el list ID en la URL decodificada por ejemplo 23 en el ejemplo.
Crea una landing page en Bolt.new
Paso 1: conecta Bolt.new con Supabase
1. En tu proyecto de Bolt.new, haz clic en Integrations en la parte superior derecha. 2. Selecciona Supabase. 3. Sigue el asistente para conectar tus cuentas. 4. Elige el proyecto de Supabase adecuado. 5. Confirma que la conexión quedó establecida.
Paso 2: construye una landing con formulario de contacto
Utiliza este prompt para generar una landing SaaS completa con funcionalidad de email:
Crea una landing para un SaaS con un formulario de contacto que recoja nombre completo, correo electrónico y mensaje.
Información de la empresa: Mi SaaS se llama TuEmpresa, ayuda a clientes a describir propuesta de valor. El formulario capturará leads interesados en nuestros servicios.
Estructura de la página: sección hero con beneficios y botón que hace scroll al formulario. Sección de testimonios o casos de éxito. Formulario de contacto. Sección about. Sección de información de contacto. Enlaces a redes sociales.
Funcionalidad del formulario: valida en el navegador el email para que solo pase un correo válido. Longitud mínima de 50 caracteres para el campo mensaje y longitud máxima de 100 caracteres para el campo nombre.
Al enviar un formulario: envía un email con el contenido del formulario a mi email almacenado en el secreto MAILTRAP_MY_EMAIL. Los correos deben enviarse desde MAILTRAP_FROM_EMAIL por ejemplo form-submissions@tu-dominio-verificado.com. Crea un contacto en Mailtrap con nombre y email. Pasa el valor del campo Full name del formulario al campo personalizado name de Mailtrap. Guarda la información del envío en la tabla contacts de Supabase. Muestra confirmación al visitante. Aplica RLS en Supabase para que solo usuarios autenticados accedan a los datos.
Integración de email: el email se enviará mediante Mailtrap usando MAILTRAP_ACCOUNT_ID guardado en Secrets de Supabase, SDK de Mailtrap para crear contactos y enviar correos y la API key en el secreto MAILTRAP_API_KEY. Planifica paso a paso, verifica resultados tras cada paso. Escribe el código en TypeScript y genera archivos atómicos en una Supabase Edge Function para facilitar el debug.
Paso 3: configura tus secretos de Mailtrap
Después de que Bolt.new cree tu app, añade estos secretos en tu proyecto de Supabase: MAILTRAP_ACCOUNT_ID=tu_account_id. MAILTRAP_API_KEY=tu_api_key. MAILTRAP_MY_EMAIL=tu-email@ejemplo.com. MAILTRAP_FROM_EMAIL=form-submissions@tu-dominio-verificado.com. Sustituye los valores de ejemplo por tus credenciales reales de Mailtrap.
Prueba tu integración de Mailtrap con Bolt.new
Paso 1: prueba el envío del formulario
1. Abre la vista previa de tu landing en Bolt.new. 2. Rellena el formulario con datos de prueba. 3. Envíalo y verifica el mensaje de confirmación. 4. Revisa la consola por si aparecen errores.
Paso 2: verifica la entrega del email
1. Revisa tu bandeja de entrada para el email de notificación. 2. Comprueba que el contacto aparece en Mailtrap Contacts. 3. Confirma que el contenido incluye todos los datos del formulario. 4. Revisa el registro en Mailtrap Email Logs.
Paso 3: comprueba la integración con la base de datos
1. Verifica que el contacto se guardó en la tabla contacts de Supabase. 2. Confirma que el identificador de Mailtrap se guardó en mailtrap_contact_id. 3. Asegura que RLS está correctamente configurado.
Buenas prácticas de envío de emails con Bolt.new
Seguridad
- Guarda la información sensible en Supabase Secrets, nunca en el código. - Habilita Row Level Security en todas las tablas. - Rota tus API keys regularmente. - Usa variables de entorno para toda la configuración. - Valida inputs para prevenir inyecciones y abusos.
Entregabilidad
- Usa siempre un dominio verificado. - Supervisa tu reputación de remitente en los reportes de Mailtrap. - Mantén tus listas de contactos limpias y actualizadas. - Configura correctamente SPF, DKIM y DMARC. - Sigue buenas prácticas de contenido para evitar filtros de spam.
Experiencia de usuario
- Proporciona feedback claro al enviar formularios. - Incluye mensajes de validación útiles. - Añade estados de carga durante el envío. - Asegura accesibilidad con etiquetas ARIA adecuadas. - Implementa manejo de errores con mensajes amigables.
Rendimiento
- Usa Supabase Edge Functions para la lógica del servidor. - Implementa manejo de errores y reintentos. - Considera rate limiting para formularios. - Optimiza llamadas a APIs para reducir latencia. - Monitoriza métricas y configura alertas.
Pro tips
Evita límites de email de Supabase
Para eludir los límites horarios de envío de Supabase, configura el SMTP del proyecto para usar Mailtrap. Sigue la guía de integración en este artículo.
Optimización de prompts
Empieza por lo básico y mejora iterativamente. Bolt.new funciona mejor construyendo por pasos que intentando crear todo de una sola vez.
Estrategia de manejo de errores
Incluye manejo de errores integral. Las operaciones de email pueden fallar por múltiples motivos, así que ofrece retroalimentación adecuada y asegúrate de que tu app se recupere con gracia.
Monitorización de rendimiento
Revisa con regularidad la analítica de Mailtrap y las métricas de Supabase para detectar oportunidades de optimización y asegurar una entrega fiable.
Cierre
Con Bolt.new y Mailtrap dispones de una base sólida para crear aplicaciones basadas en email que escalan con tu negocio. La combinación del desarrollo acelerado de Bolt.new y la infraestructura de correo de Mailtrap te permite crear experiencias de email profesionales de forma rápida y eficiente. Si además quieres llevar tu plataforma al siguiente nivel con pipelines de datos, power bi, agentes IA o ciberseguridad avanzada, en Q2BSTUDIO podemos ayudarte. Conoce cómo abordamos proyectos de extremo a extremo en nuestra página de desarrollo de aplicaciones y software a medida.