Lead-Magnet

Etwas Nützliches im Tausch gegen eine E-Mail-Adresse, mit einem echten Stück vorab. Eine Checkliste mit dem Rest hinter Unschärfe, ein Kurs per Mail, ein schneller Check der eigenen Website und Vorlagenseiten, die sich auffächern.

4 Variants

Kategorie wechseln

Checklisten-Vorschau

Die ersten Punkte der Liste sind lesbar und haken sich nacheinander ab, der Rest verschwimmt hinter weicher Unschärfe mit Schloss. Das Formular bestätigt an Ort und Stelle.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/lead-magnet

Bringt mit utils, kit, button, icon, motion, reveal, section

Usage

<LeadMagnet variant="checklist-preview" title="…" items={[…]} visible={3} points={[…]} onSubmit={({ email }) => …} />

Source

Kurs per E-Mail

Die Tage eines Kurses per Mail auf einer Schiene, die sich beim Scrollen füllt, jeder Tag steigt auf. Die Anmeldung bleibt auf breiten Bildschirmen stehen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/lead-magnet

Bringt mit utils, kit, button, icon, motion, reveal, section

Usage

<LeadMagnet variant="email-course" title="…" days={[{ title, text }]} points={[…]} />

Source

Website-Check

Besucher geben ihre Adresse ein, die Prüfungen laufen nacheinander mit Kreisel und Haken. Die Wertung füllt einen Ring, drei Befunde stehen da, der ganze Bericht kommt per Mail.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/lead-magnet

Bringt mit utils, kit, button, icon, motion, reveal, section

Usage

<LeadMagnet variant="mini-audit" title="…" checks={[…]} result={{ score, summary, findings: [{ label, ok }] }} onSubmit={({ email, url }) => …} />

Source

Vorlagen-Vorschau

Drei gezeichnete Seiten der Vorlage liegen gestapelt und fächern sich auf, während der Abschnitt ins Bild scrollt. Daneben, was drin ist, das Format und das Formular.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/lead-magnet

Bringt mit utils, kit, button, icon, motion, reveal, section

Usage

<LeadMagnet variant="template-preview" title="…" pages={[…]} contents={[{ label, icon }]} format="PDF, 14 pages" />

Source

Details

Was Lead-Magnet mitbringt, aus Registry und Quellcode gelesen.

Bereich: Marketing
Variants: 4
Version: 1.0.0 · seit 1.1.0
Datei: components/ui/lead-magnet.tsx
Bringt mit: utilskitbutton iconmotionrevealsection
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 21 eigene Texte
Studio: Alle 4 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle LeadMagnetProps aus components/ui/lead-magnet.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
LeadMagnetVariant
checklist-previewemail-coursemini-audittemplate-preview
eyebrowoptional
React.ReactNode
titlePflicht
React.ReactNode
descriptionoptional
React.ReactNode
itemsoptional
string[]
checklist-preview: all points, the first `visible` are readable
visibleoptional
number
totaloptional
number
checklist-preview: points in the full list, default the length of items
daysoptional
{ title: string; text: string }[]
email-course: the days
checksoptional
string[]
mini-audit: the checks shown while it runs, and the result to tease
resultoptional
{ score: number; summary: string; findings: { label: string; ok: boolean }[] }
contentsoptional
{ label: string; icon?: IconName }[]
template-preview: what is inside and the page titles drawn on the sheets
pagesoptional
string[]
formatoptional
string
e.g. PDF, 14 pages
pointsoptional
string[]
Short promises under the form
actionoptional
string
onSubmitoptional
(data: { email: string; url?: string }) => void

Eingebaute Texte

Diese Texte schreibt Lead-Magnet selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 21 Texte anzeigen

Schlüssel	Englisch	Deutsch
email	Englisch Email	Deutsch E-Mail
emailPlaceholder	Englisch you@example.com	Deutsch du@beispiel.de
invalid	Englisch Please enter an email address like name@example.com.	Deutsch Bitte gib eine E-Mail-Adresse wie name@beispiel.de ein.
getList	Englisch Send me the full list	Deutsch Ganze Liste zuschicken
startCourse	Englisch Start the free course	Deutsch Kostenlosen Kurs starten
getTemplate	Englisch Send me the template	Deutsch Vorlage zuschicken
getReport	Englisch Send me the full report	Deutsch Ganzen Bericht zuschicken
sentTitle	Englisch It is on its way	Deutsch Ist unterwegs
sentText	Englisch Check your inbox at {e}. If nothing arrives in five minutes, look in the spam folder.	Deutsch Schau in dein Postfach unter {e}. Kommt in fünf Minuten nichts, sieh im Spam-Ordner nach.
more	Englisch {n} more points in the full list	Deutsch {n} weitere Punkte in der ganzen Liste
day	Englisch Day {n}	Deutsch Tag {n}
url	Englisch Your website	Deutsch Deine Website
urlPlaceholder	Englisch example.com	Deutsch beispiel.de
urlInvalid	Englisch Please enter a web address like example.com.	Deutsch Bitte gib eine Adresse wie beispiel.de ein.
check	Englisch Check my website	Deutsch Meine Website prüfen
checking	Englisch Checking {u}	Deutsch Prüfe {u}
score	Englisch Score	Deutsch Wertung
of	Englisch of 100	Deutsch von 100
unlock	Englisch The full report with {n} findings and how to fix each one	Deutsch Der ganze Bericht mit {n} Befunden und wie du jeden behebst
again	Englisch Check another website	Deutsch Andere Website prüfen
inside	Englisch What is inside	Deutsch Das steckt drin

Aus dem Quellcode der Component abgeleitet.

Setzt aria-describedby, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen alert und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig.

Häufige Fragen

Wie installiere ich Lead-Magnet?

Mit aiw add @ai-website/lead-magnet. Der Befehl legt die Datei components/ui/lead-magnet.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, motion, reveal und section. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Lead-Magnet?

4 Varianten, Checklisten-Vorschau, Kurs per E-Mail, Website-Check und Vorlagen-Vorschau. Du wählst sie mit der Prop variant, zum Beispiel variant="email-course".

Kann ich die Texte von Lead-Magnet übersetzen?

Ja. Lead-Magnet bringt 21 eigene Texte auf Deutsch und Englisch mit, etwa „E-Mail“, „du@beispiel.de“ und „Bitte gib eine E-Mail-Adresse wie name@beispiel.de ein.“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Lead-Magnet einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Lead-Magnet mit aiw_components und installieren sie mit aiw_add @ai-website/lead-magnet. Nenn im Prompt die Variante, etwa variant="checklist-preview", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Lead-Magnet ohne Code anpassen?

Ja, im Studio. Alle 4 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden LeadMagnet-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Lead-Magnet stehen.

Lead-Magnet

Checklisten-Vorschau

Kurs per E-Mail

Website-Check

Vorlagen-Vorschau

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit