Lektion 11 von 13 · Mitgliedschaft aufbauen

Wie bindest du Steady auf deiner eigenen Website ein?

Du verbindest deine Website einmal mit Steady, entweder mit dem Steady-Code im Kopfbereich jeder Seite oder mit dem WordPress-Plugin. Danach schaltest du ein, was du brauchst: Layer, die sich über die Seite legen, wie Paywall, Newsletter-Hinweis, Ankündigung und Adblock-Erkennung, und Embeds, die fest im Text sitzen, wie die Paywall im Artikel oder deine Pakete auf einer Mitgliederseite. Bevor du alles ankündigst, prüfst du die Paywall im privaten Browserfenster.

Video 5:40Lesezeit 6 Min.Mit Kai WielandStand:

Beim Abspielen lädt das Video von YouTube. Dabei gelten die Datenschutzregeln von Google.Auf YouTube ansehen

Transkript lesenAutomatisch erstellt und bereinigt

0:00Der neue Steady-Code: Layer und Embeds

Hallo zusammen! Falls ihr uns noch nicht kennt: Ich bin Kai von Steady, und ich mache heute ein kleines Video, um euch den neuen Steady-Code zu zeigen, die neue Website-Integration. Wir haben daran jetzt seit ein paar Monaten gearbeitet. Technisch ist das ein kompletter Rewrite, also komplett neu geschrieben, unter anderem, um Third-Party-Cookies loszuwerden, weil die inzwischen in vielen Browsern abgeschaltet werden.

Das heute ist der erste kleine Einblick in das, was wir da gebaut haben. Die neue Integration, der neue Steady-Code, arbeitet mit zwei grundsätzlichen Prinzipien; das wird gleich noch klar. Das eine sind Layer, also Elemente, die sich über eure Webseite legen können. Das andere sind Embeds, also Elemente, die ihr in eure Webseite einbetten könnt: bestimmte Teile von Steady, die ihr direkt in eure Seite einbaut.

Ich zeige euch dazu drei Beispiele. Das eine ist der brandneue Announcement-Layer. Das zweite ist die Paywall, die gibt es als Layer und auch als Embed. Und das dritte ist am Ende noch der Pakete-Embed, das Plans Embed; früher hieß das mal Checkout. Ich zeige euch das am Beispiel von Übermedien.

1:06Der Announcement-Layer

Wenn ich hier auf die Seite gehe – ich habe zum Beispiel unsere Beta aktiviert –, dann gibt es diesen Layer, wir nennen ihn Announcement-Layer. Das ist eine Komponente, die wir hinzugefügt haben. Man kann sie nutzen, um wichtige Ankündigungen, Hinweise, Breaking News oder Sonderangebote zu zeigen. Hier habe ich zum Beispiel eingestellt, dass das Probeabo beworben wird.

Das ist so ein bisschen unser Ersatz für das, oder unsere Verbesserung von dem, was früher der Floating Button war. Den Layer könnt ihr auf eurer Seite anzeigen. Ich zeige ganz kurz das Konfigurationsinterface vom Announcement-Layer: Man kann ein Bild hochladen, und der Layer kann klein und groß angezeigt werden.

Ganz neu ist, dass man eine Ziel-URL hinzufügen kann und auf jede beliebige Seite verlinken kann, auch außerhalb eurer Publikation. Wenn ihr zum Beispiel einen Shop mit einem Sonderangebot habt, könnt ihr auch darauf verlinken. Und auch das ist neu: Man kann jetzt einstellen, auf welcher Seite dieser Announcement-Layer angezeigt wird. Wenn man ihn zum Beispiel nur auf den Artikelseiten zeigen will, kann man hier diesen Platzhalter verwenden. Dann würde er nur auf den Seiten angezeigt, die Artikel enthalten.

2:39Die neue Paywall: Pakete, Small-Modus und Tracking

Dann lasst uns als Nächstes die neue Paywall anschauen. Die ist kompatibel, man muss also keine Änderungen an bestehenden Paywalls vornehmen. In diesem Fall ist es das Paywall-Embed, das in den Artikel eingebunden wird. Neu ist die Funktion, dass hier direkt auch die Pakete angezeigt werden können.

Ich kann im Artikel direkt die Pakete ausklappen und sehe dann: Okay, hier habe ich drei Standardpakete eingestellt. Und ich kann mir anschauen, wie die Preise monatlich und jährlich aussehen. Das kann man hier ein- und ausklappen.

Dann haben wir bei der Paywall noch einen weiteren Modus hinzugefügt, den Small-Modus. Der sieht so aus: Das ist eine Mini-Variante der Paywall, bei der der Hintergrund unscharf ausgeblendet wird.

Ebenfalls neu bei der Paywall ist die Möglichkeit, einen Tracking-Parameter zu übergeben. Damit könnt ihr auswerten, welche Marketingkampagnen oder welche Artikel besonders erfolgreich darin sind, bezahlte Mitgliedschaften zu verkaufen.

3:46Der Pakete-Embed und die Projektfarbe

Als Letztes zeige ich euch noch das, was früher der Checkout war und jetzt der Pakete-Embed ist. Wenn man wie Übermedien eine Unterseite hat, auf der man noch einmal die Geschichte und die Vorteile der Mitgliedschaft erklärt, ist das eine gute Möglichkeit, dort direkt die Pakete einzubinden, die im Angebot sind.

Alle diese neuen Integrationen, also die Layer und die Embeds, reagieren auch auf die Projektfarbe, die ihr eingestellt habt, hier in dem Fall das Übermedien-Blau. Wenn ihr für euer Projekt eine andere Farbe einstellt, verwenden all diese Integrationen diese Farbe.

4:34Was als Nächstes kommt

Das ist so ein bisschen der erste Einblick. Ich bin sehr gespannt auf euer Feedback, was ihr dazu denkt. Gleichzeitig haben wir natürlich auch den Adblock-Detector neu designt.

In naher Zukunft, wahrscheinlich nächsten oder übernächsten Monat, also in wenigen Wochen, kommen dann der Newsletter-Subscribe-Layer und das Embed dazu, also die Möglichkeit, direkt auf eurer Seite auch Newsletter-Subscriber zu gewinnen. Die nächste Iteration ist dann die Smart Paywall, eine Paywall, die auf gewisse Datenpunkte über eure Besucher:innen reagieren kann und dann das bestmögliche Angebot zum bestmöglichen Zeitpunkt macht. Das ist, was wir vorhaben.

Lasst uns gern wissen, was ihr davon haltet. Die neue Integration, der neue Steady-Code, rollt jetzt über die nächsten Wochen aus. Wir haben eine Beta-Gruppe; falls ihr Interesse habt, meldet euch gern in unserer Slack-Community. Wir sehen uns, wir hören uns.

Das Wichtigste in Kürze

  1. Verbinde deine Website einmal mit Steady: Steady-Code in den Kopfbereich jeder Seite oder, bei WordPress, das Steady-Plugin, nie beides zugleich.
  2. Layer legen sich über deine Seite, Embeds sitzen fest im Inhalt; welcher Layer wem erscheint, entscheiden die Smart Layers, auf deiner Website kannst du es pro Seite festlegen.
  3. Die Paywall ist auf Steady und auf deiner Website dieselbe: eine Überschrift, deine Pakete und auf Wunsch die kostenlose Freischaltung über die Registration Wall.
  4. Deine Pakete bindest du auf einer eigenen Unterseite ein, nicht auf der Startseite und nicht auf einer Seite mit Paywall.
  5. Prüf die Paywall im privaten Browserfenster und kläre vorher, ob Cache-Plugins, AMP oder endloses Nachladen sie stören.

Mitglieder gewinnst du am leichtesten dort, wo deine Leser:innen ohnehin sind, also auf deiner Website. Im Video vom Juni 2024 zeigt Kai Wieland von Steady die damals neue Website-Integration am Beispiel von Übermedien. Seitdem ist einiges dazugekommen, manches heißt anders. Diese Lektion beschreibt den Stand vom Oktober 2026: was du entscheidest und in welcher Reihenfolge. Die Handgriffe stehen im Hilfe-Center von Steady, den Überblick gibt So integrierst du Steady auf deiner Website.

Zwei Bausteine: Layer und Embeds

Kai beschreibt die Integration mit zwei Begriffen. Layer legen sich über deine Website, etwa als Hinweis am unteren Bildschirmrand. Embeds bettest du an einer bestimmten Stelle in deine Seite ein, zum Beispiel mitten in einen Artikel. Den Code dafür hat Steady 2024 neu geschrieben, auch weil viele Browser Cookies von Drittanbietern inzwischen abschalten.

Heute gibt es vier Layer:

Layer Wofür
Paywall verdeckt Inhalte für alle, die noch nicht zahlen, und zeigt deine Pakete
Newsletter lädt Besucher:innen ein, deinen Newsletter zu abonnieren
Announcement zeigt eine Ankündigung und führt zu einer Adresse deiner Wahl
Adblock-Erkennung bittet Leute mit Werbeblocker, Werbung zuzulassen oder Mitglied zu werden

Als Embeds gibt es die Paywall im Artikel, ein festes Anmeldeformular für den Newsletter, etwa für die Fußzeile, und die Pakete für eine eigene Mitgliederseite.

Schritt 1: Die Website einmal verbinden

Alles Weitere hängt an dieser einen Verbindung. Dafür gibt es zwei Wege.

  • Steady-Code. Ein Schnipsel HTML, den du in den Kopfbereich deiner Seite setzt, vor das schließende </head>-Tag. Das geht mit jedem CMS und den meisten Baukästen; bei Squarespace und Wix brauchst du dafür ein bezahltes Konto. Er gehört genau einmal auf jede Seite, am besten über die Vorlage, die alle Seiten nutzen.
  • WordPress-Plugin. Läuft deine Seite mit WordPress, installierst du „Steady for WordPress“ und verbindest es mit einem Key aus dem Steady-Backend. Im Editor erscheint dann ein Steady-Button, mit dem du die Paywall setzt.

Nimm nur einen der beiden Wege, beide zugleich führen zu Fehlern. Den Unterschied merkst du bei der Paywall. Die Variante mit dem Steady-Code lässt sich aushebeln, wenn jemand JavaScript abschaltet, ändert aber nichts daran, wie Suchmaschinen deine Texte finden. Das Plugin lädt den geschützten Teil erst, wenn sich ein Mitglied angemeldet hat; dafür sehen Suchmaschinen diesen Teil kaum.

Danach trägst du in den Einstellungen die Adresse deiner Website ein. Leite alle Varianten deiner Adresse, etwa mit und ohne „www“, auf eine einzige um, sonst funktioniert manches nur auf einer davon. Pro Domain lässt sich genau ein Steady-Projekt einbinden. Die Anleitungen: So baust du den Steady-Code in deine Website ein und Wie du das Steady WordPress-Plugin nutzen kannst.

Schritt 2: Farbe und Bilder festlegen

Im Video übernehmen alle Layer und Embeds das Blau von Übermedien. Diese Einstellung heißt im Hilfe-Center Publikationsfarbe. Sie färbt Knöpfe und Hervorhebungen auf Steady und in allen Layern auf deiner Website, unter anderem auf der Paywall, im Checkout und im Hinweis der Adblock-Erkennung. Steady empfiehlt die Farbe deines Logos in einem etwas dunkleren Ton.

Für Logo, Paywall- und Announcement-Bild gibt es Vorlagen in der passenden Größe. Lade zumindest ein Logo hoch, sonst zeigt Steady ein Standardlogo.

Schritt 3: Die Paywall einrichten

Die Paywall ist auf Steady und auf deiner Website dieselbe. Du legst sie einmal in den Paywall-Einstellungen fest: eine Überschrift mit höchstens 60 Zeichen, deine Pakete, die Leser:innen direkt in der Paywall auswählen, und auf Wunsch die Registration Wall.

Die Registration Wall ist eine kostenlose Option unter den Paketen. Wer noch nicht zahlen will, schaltet den Artikel einmalig frei, indem er oder sie kostenloses Mitglied wird. Du bekommst dafür eine E-Mail-Adresse. Bietest du eine Probemitgliedschaft an, steht sie in der Paywall ganz oben. Kostenlose Mitglieder sehen die Paywall bei bezahlten Texten weiterhin. Eine Paywall, die sich wegklicken lässt, gibt es seit September 2026 nicht mehr; warum, erklärt die Lektion Paywall-Modelle.

Dann markierst du im Artikel, wo die Paywall beginnt: mit dem Wort ___STEADY_PAYWALL___ in einem eigenen Absatz, mit einem unsichtbaren HTML-Element oder mit dem Steady-Button im WordPress-Editor. Setz die Markierung möglichst weit oben, damit viele Leser:innen die Paywall überhaupt sehen. Zwei Neuerungen stellt Kai im Video vor:

  • Small-Modus. Eine Paywall von einer Zeile, die einzelne Elemente wie ein Bild, ein Video oder einen Download unscharf verdeckt. Eine kostenlose Freischaltung bietet sie nicht.
  • Tracking-Parameter. Gibst du der Markierung einen Kampagnennamen mit, siehst du im CSV-Export deiner Mitglieder, welche Kampagne oder welcher Artikel bezahlte Mitgliedschaften gebracht hat.

Die Einzelheiten stehen in Die Paywall und Registration Wall und Paywall auf deiner Website einrichten.

Schritt 4: Layer und Pakete einschalten

Welcher Layer wem erscheint, entscheiden die Smart Layers. Steady ordnet Besucher:innen nach Häufigkeit der Besuche, Lesezeit und Herkunft ein, etwa als Erstbesucher:innen oder treue Leser:innen, und zeigt den passenden Layer. Eine Paywall geht immer vor. Auf deiner Website kannst du die Automatik überstimmen und einer Seite einen bestimmten Layer zuweisen. Kai kündigt im Video eine „Smart Paywall“ an, die auf Daten über die Besucher:innen reagiert. Unter diesem Namen gibt es sie nicht, die Idee steckt heute in den Smart Layers.

  • Newsletter-Layer. Im Video noch angekündigt, heute als Overlay über die ganze oder die halbe Seite oder als schmale Leiste am unteren Rand. Wer sich anmeldet, wird kostenloses Mitglied. Für ein festes Formular gibt es das Newsletter-Embed.
  • Announcement-Layer. Er ersetzt laut Kai den früheren Floating Button. Er führt zu einer beliebigen Adresse, auch außerhalb deiner Publikation, etwa zu einer Umfrage oder einem Sonderangebot im eigenen Shop.
  • Adblock-Erkennung. Sie lohnt sich, wenn du Werbung verkaufst. Du wählst, ob der Hinweis die Seite verdeckt oder sich schließen lässt.

Für eine eigene Mitgliederseite, wie Übermedien sie hat, bindest du deine Pakete ein. Im Video heißt das Pakete-Embed, im Backend unter „Layers“ und im Hilfe-Center heißt es Checkout. Du brauchst dafür eine eigene Unterseite; die Startseite geht nicht, und auf derselben Seite darf keine Paywall stehen. Erkläre dort, wofür deine Publikation steht und was die Mitgliedschaft bringt, darunter stehen die Pakete. Wie du sie zusammenstellst, steht in Pakete gestalten.

Schritt 5: Testen und die Grenzen kennen

Bevor du loslegst, prüfst du die Paywall. Öffne einen Artikel im privaten Fenster deines Browsers, dann siehst du ihn wie Besucher:innen ohne Mitgliedschaft. Meldest du dich in der Paywall unter „Schon Mitglied?“ an, erkennt Steady dich als Inhaber:in und lässt dich weiterlesen, so beschreibt es der Artikel Wie teste ich die Paywall?.

Nicht jede Website verträgt sich mit Steady. Die vollständige Liste bekannter Probleme steht unter Kompatibilität von Steady-Integrationen, die wichtigsten sind diese:

  • Auf Accelerated Mobile Pages (AMP) und auf Seiten, die beim Scrollen endlos weitere Artikel nachladen (Infinite Scrolling), funktioniert die Paywall unter Umständen nicht.
  • Cache-Plugins und Dienste wie Cloudflare können das WordPress-Plugin stören, mit Cachify funktioniert es gar nicht. Dann hilft die Paywall per Steady-Code, weil sie vom Cache unabhängig ist.
  • WordPress-Versionen vor 5.8.2 bauen die gesicherte Verbindung zu Steady unter Umständen nicht auf.

In älteren Anleitungen begegnet dir vielleicht der Steady-Switch. Er blendet Inhalte je nach Mitgliedschaft ein oder aus, etwa Werbung. Steady empfiehlt ihn seit November 2022 nicht mehr und leistet dafür keinen technischen Support. Er schützt auch nichts, denn beide Varianten stehen im Quelltext der Seite. Wer Werbung für Mitglieder ausblenden oder Inhalte sicher schützen will, nutzt die Steady-API und prüft auf dem eigenen Server, ob jemand Mitglied ist.

Läuft alles, kündigst du deine Mitgliedschaft an. Wie das gelingt, steht in Starte deine Mitgliedschaft.

Häufige Fragen

Wo füge ich den Steady-Code ein?

In den Kopfbereich deiner Website, also vor das schließende </head>-Tag. Du findest den Code in deinen Steady-Einstellungen unter „Website Setup“; dort trägst du auch die Adresse deiner Website ein. Der Code wird für deine Publikation erzeugt, gilt für alle Steady-Funktionen und gehört genau einmal auf jede Seite.

Brauche ich bei WordPress den Steady-Code?

Nein. Mit dem Plugin „Steady for WordPress“ verbindest du deine Seite über einen Key aus dem Steady-Backend und setzt die Paywall mit einem Button im Editor. Nutze entweder das Plugin oder den Code, beides zusammen führt zu Fehlern. Die Paywall des Plugins funktioniert nur in Beiträgen, nicht auf WordPress-Seiten.

Kann ich Steady auf mehreren Websites einbinden?

Du kannst beliebig viele Steady-Projekte anlegen, pro Domain lässt sich aber nur eines einbinden. Wechselst du die Domain, behältst du dein Projekt und baust den Steady-Code neu ein.

Wie teste ich meine Paywall, ohne selbst zu zahlen?

Öffne einen Artikel mit Paywall im privaten Fenster deines Browsers, dann siehst du ihn wie Besucher:innen ohne Mitgliedschaft. Meldest du dich in der Paywall unter „Schon Mitglied?“ mit deinem Steady-Konto an, erkennt Steady dich als Inhaber:in und lässt dich weiterlesen.

Lässt sich die Steady-Paywall auf meiner Website umgehen?

Die Paywall per Steady-Code lässt sich aushebeln, wenn jemand JavaScript abschaltet. Das WordPress-Plugin lädt den geschützten Teil erst, wenn sich ein Mitglied angemeldet hat; dafür sehen Suchmaschinen diesen Teil kaum. Steady rät, sich über einzelne Umgehungen keine Sorgen zu machen, weil die meisten Mitglieder vor allem unterstützen wollen.

Passt dazu

Coach

Kai Wieland

Product Engineer bei Steady

Kai arbeitet als Product Engineer bei Steady und hat die Website-Integration mit Layern und Embeds mitentwickelt. Im College erklärt Kai, wie du Steady mit Paywall und Layern auf deine eigene Website bringst.