EmailSubscribe
Añade un formulario de suscripción a newsletter o registro de cambios en cualquier página con el componente EmailSubscribe: captura nativa para siete proveedores, incrustaciones para el resto.
<EmailSubscribe> coloca un formulario de suscripción por correo dentro de una página de documentación con una sola etiqueta MDX. Cuando has conectado un proveedor en el dashboard, muestra un formulario alojado por Jamdesk que añade nuevos suscriptores directamente a tu audiencia. Sin un proveedor conectado, puede alojar en su lugar la incrustación para pegar de otro servicio. Está pensado para páginas de registro de cambios y notas de versión, donde los lectores quieren enterarse de las novedades.
Inicio rápido
Conecta primero un proveedor en el dashboard y luego añade la etiqueta con el id de ese proveedor:
<EmailSubscribe provider="resend" />Esto muestra 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 para cualquier proveedor nativo (mailchimp, kit, loops, beehiiv, brevo o sendgrid) una vez que ese proveedor está conectado.
Añade un título y una línea de apoyo opcionales:
<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 | Título opcional mostrado encima del formulario. |
description | string | Línea de apoyo opcional bajo el título. |
username | string | Nombre de usuario de la cuenta de Buttondown / Substack (proveedores solo de incrustación). |
snippet | string | Código de incrustación en bruto de cualquier proveedor. La solución alternativa (ver abajo). |
className | string | Clase CSS adicional en el contenedor. |
Nativo o incrustación
El provider que pasas decide cómo se comporta el formulario:
- Proveedores nativos (
resend,mailchimp,kit,loops,beehiiv,brevo,sendgrid) muestran un formulario alojado por Jamdesk. Jamdesk captura la dirección y la añade mediante tu clave conectada. Esta es la vía que necesita un proveedor conectado en el dashboard. - Proveedores solo de incrustación (
buttondown,substack) muestran el formulario o iframe 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á nada. Conecta primero el proveedor para que los envíos tengan a dónde ir.
Proveedores solo de incrustación
Buttondown y Substack funcionan sin una conexión al dashboard. Proporciona el nombre de usuario de tu cuenta:
<EmailSubscribe provider="buttondown" username="acme" />
<EmailSubscribe provider="substack" username="acme" />Solución alternativa: pegar cualquier incrustación
Para un proveedor del que Jamdesk no tiene un atajo, pega su código de incrustación en snippet. Se muestra tal cual en la página publicada:
<EmailSubscribe snippet={`<form action="https://example.com/subscribe">...</form>`} />Un snippet ejecuta el código del proveedor en tu página. Algunos proveedores incluyen un script de un solo uso que no se vuelve a ejecutar cuando un lector navega entre páginas sin una recarga completa. Coloca las incrustaciones basadas en script en una página dedicada y cargada directamente (como tu registro de cambios) en lugar de en medio de un flujo de navegación.
Colocación automática en páginas de registro de cambios
En lugar de añadir la etiqueta a cada página de versión a mano, monta el formulario automáticamente en las páginas de registro de cambios. En docs.json, ajusta el placement de la integración de newsletter a changelog:
{
"integrations": {
"newsletter": {
"provider": "resend",
"title": "Get release notes",
"placement": "changelog"
}
}
}Con placement: "changelog", el formulario se monta en cada página de registro de cambios (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 a mano, la colocación automática se aparta para que no obtengas dos formularios.
El bloque completo integrations.newsletter acepta los mismos campos que el componente (provider, title, description, username, snippet, height) más placement (none, el valor predeterminado, o changelog).