EmailSubscribe
Añade un formulario de suscripción a newsletter o changelog con EmailSubscribe: captura nativa para siete proveedores, embeds para el resto.
<EmailSubscribe> inserta un formulario de suscripción por correo directamente en una página de documentación con una sola etiqueta MDX. Cuando has conectado un proveedor en el dashboard, renderiza un formulario alojado en Jamdesk que añade nuevos suscriptores directamente a tu audiencia. Sin un proveedor conectado, puede alojar el embed de otro servicio. Está diseñado para páginas de changelog y notas de versión, donde los lectores quieren enterarse de las novedades.
Inicio rápido
Conecta un proveedor en el dashboard primero, luego añade la etiqueta con el id de ese proveedor:
<EmailSubscribe provider="resend" />Esto renderiza un campo de correo etiquetado y un botón Suscribirse. Al enviar, la dirección se añade a la audiencia que conectaste. La misma etiqueta funciona con cualquier proveedor nativo (mailchimp, kit, loops, beehiiv, brevo o sendgrid) una vez que ese proveedor esté conectado.
Añade un encabezado opcional y una línea de apoyo:
<EmailSubscribe
provider="resend"
title="Get release notes"
description="One email when we ship something new. No spam."
/>Props
| Prop | Tipo | Propósito |
|---|---|---|
provider | string | Id del proveedor: resend, mailchimp, kit, loops, beehiiv, brevo, sendgrid, buttondown o substack. |
title | string | Encabezado opcional que se muestra sobre el formulario. |
description | string | Línea de apoyo opcional bajo el encabezado. |
collapsed | boolean | Solo proveedores nativos. Comienza como un botón compacto Suscribirse que se expande al formulario completo al hacer clic. |
username | string | Nombre de usuario de Buttondown / Substack (proveedores solo de embed). |
snippet | string | Markup de embed en bruto de cualquier proveedor. La vía de escape (ver más abajo). |
className | string | Clase CSS adicional en el contenedor. |
Nativo vs. embed
El provider que pases determina cómo se comporta el formulario:
- Proveedores nativos (
resend,mailchimp,kit,loops,beehiiv,brevo,sendgrid) renderizan un formulario alojado en Jamdesk. Jamdesk captura la dirección y la añade a través de tu clave conectada. Esta es la ruta que requiere un proveedor conectado en el dashboard. - Proveedores solo de embed (
buttondown,substack) renderizan el formulario o iframe propio de ese servicio. No hay clave que conectar: proporcionas tuusernamey el visitante envía directamente al proveedor.
Si nombras un proveedor nativo que aún no has conectado en el dashboard, el formulario no capturará suscripciones. Conecta el proveedor primero para que los envíos tengan un destino.
Proveedores solo de embed
Buttondown y Substack funcionan sin una conexión en el dashboard. Pasa tu nombre de usuario:
<EmailSubscribe provider="buttondown" username="acme" />
<EmailSubscribe provider="substack" username="acme" />Vía de escape: pega cualquier embed
Para un proveedor para el que Jamdesk no tiene un acceso directo, pega su markup de embed en snippet. Se renderiza tal cual en la página publicada:
<EmailSubscribe snippet={`<form action="https://example.com/subscribe">...</form>`} />Un snippet ejecuta el código propio del proveedor en tu página. Algunos proveedores incluyen un script de una sola ejecución que no se vuelve a ejecutar cuando un lector navega entre páginas sin una recarga completa. Coloca los embeds basados en scripts en una página dedicada y cargada directamente (como tu changelog) en lugar de en un flujo de navegación profundo.
Modo compacto
Un campo de correo completo más un botón Suscribirse añaden mucho peso en medio de una página. Establece collapsed y el formulario nativo comienza como un único botón Suscribirse. El lector que hace clic obtiene el campo completo, en línea, sin recarga de página:
<EmailSubscribe provider="resend" collapsed title="Subscribe to updates" />La etiqueta del botón proviene de title (usa "Subscribe to updates" por defecto si no estableces uno). Esto es solo para nativos. Los proveedores de embed renderizan su propio markup, por lo que Jamdesk no tiene nada que contraer.
Suscriptores que regresan
Una vez que un lector se suscribe a través de un formulario nativo, el navegador lo recuerda. En su próxima visita, en lugar del formulario completo verá una línea breve: Estás suscrito al newsletter. Nadie recibe la solicitud de suscribirse a algo a lo que ya se unió.
Si quieren añadir una segunda dirección, la línea tiene un control "¿Usar un correo diferente?" que reabre el formulario completo en ese momento. La memoria es por navegador (vive en localStorage, no en tu audiencia), por lo que borrar los datos del sitio o cambiar de navegador mostrará el formulario de nuevo. No hay nada que configurar: todo formulario nativo hace esto.
Inserción automática en páginas de changelog
En lugar de añadir la etiqueta en cada página de versión manualmente, monta el formulario automáticamente en las páginas de changelog. En docs.json, establece el placement de la integración de newsletter en changelog:
{
"integrations": {
"newsletter": {
"provider": "resend",
"title": "Get release notes",
"placement": "changelog"
}
}
}Con placement: "changelog", el formulario se monta en cada página de changelog (cualquier página con rss: true). Para omitirlo en una de esas páginas, establece newsletter: false en el frontmatter de esa página. Si una página ya tiene un <EmailSubscribe> colocado manualmente, la inserción automática se retira para que no aparezcan dos formularios.
El bloque completo integrations.newsletter acepta los mismos campos que el componente (provider, title, description, collapsed, username, snippet, height) más placement (none, el valor predeterminado, o changelog).
No es necesario establecer el encabezado y la línea de apoyo en docs.json. La tarjeta Email Signups en el dashboard tiene campos de título y subtítulo del formulario, y un formulario de inserción automática usa esos valores cuando docs.json los omite. Establece title/description aquí solo cuando quieras que el docs.json de este sitio prevalezca sobre el texto del dashboard.