EmailSubscribe

<EmailSubscribe> place un formulaire d'inscription e-mail directement dans une page de documentation avec une seule balise MDX. Lorsque vous avez connecté un fournisseur dans le dashboard, il affiche un formulaire hébergé par Jamdesk qui ajoute les nouveaux abonnés directement à votre audience. Sans fournisseur connecté, il peut à la place héberger l'embed à coller d'un autre service. Il est conçu pour les pages de changelog et de notes de version, où les lecteurs veulent suivre les nouveautés.

Démarrage rapide

Connectez d'abord un fournisseur dans le dashboard, puis ajoutez la balise avec l'id de ce fournisseur :

<EmailSubscribe provider="resend" />

Cela affiche un champ e-mail étiqueté et un bouton S'abonner. À l'envoi, l'adresse est ajoutée à l'audience que vous avez connectée. La même balise fonctionne pour tout fournisseur natif (mailchimp, kit, loops, beehiiv, brevo ou sendgrid) une fois ce fournisseur connecté.

Ajoutez un titre et une ligne de description facultatifs :

<EmailSubscribe
  provider="resend"
  title="Get release notes"
  description="One email when we ship something new. No spam."
/>

Props

Natif ou embed

Le provider que vous passez détermine le comportement du formulaire :

• Fournisseurs natifs (resend, mailchimp, kit, loops, beehiiv, brevo, sendgrid) affichent un formulaire hébergé par Jamdesk. Jamdesk capture l'adresse et l'ajoute via votre clé connectée. C'est la voie qui nécessite un fournisseur connecté dans le dashboard.
• Fournisseurs embed uniquement (buttondown, substack) affichent le formulaire ou l'iframe de ce service. Il n'y a aucune clé à connecter — vous fournissez votre username et le visiteur envoie directement au fournisseur.

Fournisseurs embed uniquement

Buttondown et Substack fonctionnent sans connexion au dashboard. Indiquez le nom d'utilisateur de votre compte :

<EmailSubscribe provider="buttondown" username="acme" />
<EmailSubscribe provider="substack" username="acme" />

Solution de secours : coller n'importe quel embed

Pour un fournisseur dont Jamdesk n'a pas de raccourci, collez son code d'embed dans snippet. Il s'affiche tel quel sur la page publiée :

<EmailSubscribe snippet={`<form action="https://example.com/subscribe">...</form>`} />

Mode compact

Un champ e-mail complet plus un bouton S'abonner, c'est beaucoup de poids à déposer au milieu d'une page. Définissez collapsed et le formulaire natif démarre comme un simple bouton S'abonner. Le lecteur qui clique obtient le champ complet, en ligne, sans rechargement de page :

<EmailSubscribe provider="resend" collapsed title="Subscribe to updates" />

Le libellé du bouton vient de title (il revient à « Subscribe to updates » si vous n'en définissez pas). C'est réservé au natif — les fournisseurs embed affichent leur propre code, il n'y a donc rien que Jamdesk puisse réduire.

Abonnés de retour

Une fois qu'un lecteur s'est abonné via un formulaire natif, le navigateur s'en souvient. À sa prochaine visite, au lieu du formulaire complet il voit une courte ligne : Vous êtes abonné à la newsletter. Personne ne se voit redemander de s'inscrire à quelque chose qu'il a déjà rejoint.

S'il veut ajouter une deuxième adresse, la ligne propose un contrôle « Utiliser une autre adresse ? » qui rouvre le formulaire complet sur place. La mémoire est propre au navigateur (elle vit dans le localStorage, pas dans votre audience), donc effacer les données du site ou changer de navigateur réaffiche le formulaire. Rien à configurer — chaque formulaire natif le fait.

Placement automatique sur les pages de changelog

Au lieu d'ajouter la balise à chaque page de version à la main, montez le formulaire automatiquement sur les pages de changelog. Dans docs.json, réglez le placement de l'intégration newsletter sur changelog :

{
  "integrations": {
    "newsletter": {
      "provider": "resend",
      "title": "Get release notes",
      "placement": "changelog"
    }
  }
}

Avec placement: "changelog", le formulaire se monte sur chaque page de changelog (toute page avec rss: true). Pour l'ignorer sur une de ces pages, définissez newsletter: false dans le frontmatter de cette page. Si une page contient déjà un <EmailSubscribe> placé à la main, le placement automatique s'efface pour éviter d'avoir deux formulaires.

Le bloc complet integrations.newsletter accepte les mêmes champs que le composant (provider, title, description, collapsed, username, snippet, height) plus placement (none, la valeur par défaut, ou changelog).

Et ensuite ?