Inicio rápido

La versión corta, para quien solo quiere la lista de pasos. Cada punto enlaza con el paso correspondiente del Tutorial, que lo explica con capturas de pantalla.

1. Cuenta y organización

• Crea una cuenta en app.frontmail.dev con correo y contraseña, Google o GitHub. Confirma tu dirección de correo: hasta entonces puedes echar un vistazo, pero no enviar.
• Crea tu organización: rellena Nombre de la organización, País de facturación (determina el IVA y la moneda) y ¿Qué vas a enviar? (Formulario de contacto, Correos transaccionales u Otra cosa) y haz clic en Crear organización.
• Estás en el plan Free con 300 solicitudes para este mes. Frontmail te muestra tu primera clave privada, una sola vez. Cópiala en tu gestor de contraseñas o en los secretos de tu servidor; solo la necesitas para enviar desde un servidor. Después haz clic en Continuar con la configuración.

2. Los seis pasos de configuración

La página Primeros pasos te guía por seis pasos. Puedes saltarte cualquiera (Omitir este paso, Omitir configuración) y volver más tarde.

1. Conecta un servicio de correo: Servicios de correo → Añadir servicio, elige un proveedor, rellena las credenciales (o Conectar con tu cuenta para Gmail / Outlook), Verificar y guardar. → Paso 1 del tutorial
2. Crea una plantilla: Plantillas → Desde la galería → Formulario de contacto → Usar plantilla. Para viene con tu dirección y Reply-To, con la del visitante. → Paso 2 del tutorial (y el paso 3 para una respuesta automática)
3. Dominios permitidos y protección contra bots: Seguridad → Sitios web permitidos → Añadir dominio, p. ej. example.com, *.example.com o localhost:3000, y luego Guardar. Recomendado: añade las claves de tu propio widget gratuito de Cloudflare Turnstile en Protección contra bots (Turnstile) y haz clic en Activar la CAPTCHA en todas las plantillas. → Paso 4 del tutorial
4. Envía un correo de prueba: en el editor, Enviar prueba. Gratis, 20 al día. → Paso 6 del tutorial
5. Añádelo a tu web: copia el código de la pestaña Fragmentos de la plantilla (HTML / JS, React, Vue, Svelte, Node.js, cURL). → Paso 5 del tutorial
6. Protege tu cuenta e invita: si quieres, activa la verificación en dos pasos e invita a tus compañeros (Equipo).

3. Envía desde el código

La pestaña Fragmentos rellena tu clave pública y tus ID. El código del navegador usa la clave pública (pk_…); los servidores, una clave privada (sk_…):

Navegador (npm)

npm install @frontmail/browser

import { init, send } from '@frontmail/browser';

init({ publicKey: 'pk_…' });

const result = await send('svc_…', 'tpl_…', {
  name: 'Lucía García',
  email: 'lucia@example.es',
  message: 'Hola, me gustaría pedir un presupuesto.',
});
console.log(result.status); // "queued" (o "held" si te has quedado sin créditos)

Una plantilla con Exigir CAPTCHA (Turnstile) necesita además un token de Turnstile: consulta Crea el formulario para ver un formulario completo con sendForm().

Servidor (cURL)

curl https://api.frontmail.dev/v1/send \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer sk_…' \
  -d '{
    "service_id": "svc_…",
    "template_id": "tpl_…",
    "template_params": { "name": "Lucía", "email": "lucia@example.es", "message": "¡Hola!" }
  }'

Las solicitudes con clave privada se saltan las comprobaciones de origen y de CAPTCHA. Consulta la referencia de la API.

La API responde 202 Accepted con un message_id; sigue el correo en el Historial.

Precaución

Nunca pongas la clave privada (sk_…) en código de frontend. Consulta Claves públicas y privadas.

¿Prefieres la versión guiada?El Tutorial crea paso a paso un formulario de contacto con respuesta automática, con capturas de pantalla.