EmailSubscribe

<EmailSubscribe> fügt mit einem einzigen MDX-Tag ein E-Mail-Anmeldeformular direkt in eine Dokumentationsseite ein. Wenn du im Dashboard einen Anbieter verbunden hast, rendert die Komponente ein von Jamdesk gehostetes Formular, das neue Abonnenten direkt zu deiner Zielgruppe hinzufügt. Ohne verbundenen Anbieter kann sie stattdessen die Einbettung eines anderen Dienstes hosten. Die Komponente eignet sich für Changelog- und Release-Notes-Seiten, auf denen Leser über Neuigkeiten informiert werden möchten.

Schnellstart

Verbinde zuerst einen Anbieter im Dashboard und füge dann das Tag mit der ID dieses Anbieters hinzu:

<EmailSubscribe provider="resend" />

Dadurch werden ein beschriftetes E-Mail-Feld und eine Subscribe-Schaltfläche angezeigt. Beim Absenden wird die Adresse zur verbundenen Zielgruppe hinzugefügt. Dasselbe Tag funktioniert für jeden nativen Anbieter (mailchimp, kit, loops, beehiiv, brevo oder sendgrid), sobald dieser Anbieter verbunden ist.

Füge optional eine Überschrift und eine unterstützende Zeile hinzu:

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

Props

Native Anbieter und Einbettungen

Der übergebene provider bestimmt, wie sich das Formular verhält:

• Native Anbieter (resend, mailchimp, kit, loops, beehiiv, brevo, sendgrid) rendern ein von Jamdesk gehostetes Formular. Jamdesk erfasst die Adresse und fügt sie über deinen verbundenen Schlüssel hinzu. Dafür muss ein Anbieter im Dashboard verbunden sein.
• Anbieter, die ausschließlich Einbettungen unterstützen (buttondown, substack) rendern das eigene Formular oder den Iframe des jeweiligen Dienstes. Du musst keinen Schlüssel verbinden, sondern gibst deinen username an, und der Besucher sendet seine Daten direkt an den Anbieter.

Anbieter, die ausschließlich Einbettungen unterstützen

Buttondown und Substack funktionieren ohne Verbindung im Dashboard. Übergib deinen Kontonamen:

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

Ausweichoption: beliebige Einbettung einfügen

Wenn Jamdesk für einen Anbieter keine Kurzform anbietet, füge dessen Einbettungs-Markup in snippet ein. Es wird auf der veröffentlichten Seite unverändert gerendert:

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

Kompakter Modus

Ein vollständiges E-Mail-Feld mit Subscribe-Schaltfläche nimmt in der Mitte einer Seite viel Platz ein. Setze collapsed, damit das native Formular zunächst nur als einzelne Subscribe-Schaltfläche angezeigt wird. Wenn ein Leser darauf klickt, wird das vollständige Feld direkt auf der Seite eingeblendet, ohne dass die Seite neu geladen wird:

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

Die Beschriftung der Schaltfläche stammt aus title (wenn du keinen Wert festlegst, wird „Subscribe to updates“ verwendet). Dies funktioniert nur mit nativen Anbietern. Anbieter für Einbettungen rendern ihr eigenes Markup, daher kann Jamdesk dort nichts einklappen.

Bereits abonnierte Leser

Sobald ein Leser über ein natives Formular abonniert, merkt sich der Browser dies. Beim nächsten Besuch wird statt des vollständigen Formulars eine kurze Zeile angezeigt: You're subscribed to the newsletter. Niemand wird aufgefordert, etwas zu abonnieren, dem er bereits beigetreten ist.

Wenn ein Leser eine zweite Adresse hinzufügen möchte, enthält die Zeile ein Steuerelement „Use a different email?“, das sofort das vollständige Formular erneut öffnet. Die Information wird pro Browser gespeichert (in localStorage, nicht in deiner Zielgruppe). Durch das Löschen von Websitedaten oder den Wechsel des Browsers wird das Formular wieder angezeigt. Es ist keine Konfiguration erforderlich: Jedes native Formular verhält sich so.

Automatisch auf Changelog-Seiten platzieren

Statt das Tag manuell zu jeder Release-Seite hinzuzufügen, kannst du das Formular automatisch auf Changelog-Seiten einbinden. Setze dazu in docs.json die placement-Einstellung der Newsletter-Integration auf changelog:

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

Mit placement: "changelog" wird das Formular auf jeder Changelog-Seite eingebunden (also auf jeder Seite mit rss: true). Um es auf einer solchen Seite zu überspringen, setze newsletter: false im Frontmatter dieser Seite. Wenn eine Seite bereits ein manuell platziertes <EmailSubscribe> enthält, wird die automatische Platzierung übersprungen, damit nicht zwei Formulare angezeigt werden.

Der vollständige Block integrations.newsletter akzeptiert dieselben Felder wie die Komponente (provider, title, description, collapsed, username, snippet, height) sowie placement (none, der Standardwert, oder changelog).

Wie geht es weiter?