Webflow

In diesem Artikel sehen wir uns zwei Wege an, Easytools mit Webflow zu verbinden:

1. Webflow als Landingpage - Deine Produkte liegen in Easytools, Webflow ist deine zentrale Landingpage. Jeden Button und jedes Element in Webflow kannst du direkt mit dem Easytools-Checkout eines Produkts verlinken.
2. Geschützte Inhalte in Webflow - Mit der Login Wall steuerst du, wer was sieht. Du sperrst eine ganze Seite oder blendest einzelne Abschnitte je nachdem ein oder aus, ob der Besucher zahlender Kunde ist.

Anders als manche Plattformen unterstützt Webflow nicht nur den Schutz ganzer Seiten, sondern auch Gating einzelner Abschnitte - zahlende Kunden und kostenlose Besucher sehen auf derselben Seite unterschiedliche Inhalte. Dazu mehr in Teil 2.

Sieh dir das Video-Tutorial zu allen Themen an:

Teil 1: Produkte verlinken

Wenn deine Produkte in Easytools liegen und Webflow deine Landingpage ist, verlinkst du jeden Button und jedes Element deiner Webflow-Seite direkt mit dem Easytools-Checkout des Produkts.

1. Produktlink aus Easytools kopieren

1. Gehe in Easytools zu Store → Products (Shop → Produkte).
2. Öffne das Produkt, das du verlinken willst.
3. Klicke oben auf der Produktseite auf das Symbol Share (Teilen).
4. Klicke im Teilen-Dialog auf Copy link (Link kopieren). Optional aktivierst du Shorten link (Link kürzen) für eine kürzere URL.

2. Link zu einem Webflow-Button hinzufügen

1. Öffne deine Seite im Webflow Editor.
2. Klicke auf den Button oder das Element, das du verlinken willst.
3. Öffne im rechten Bereich den Tab Settings (Einstellungen).
4. Suche den Bereich Link settings und füge den kopierten Link in das Feld URL ein.
5. Aktiviere bei Bedarf Open in new tab (In neuem Tab öffnen).
6. Klicke oben rechts auf Publish (Veröffentlichen), damit die Änderung live geht.

Beim Klick auf den Button landen deine Besucher direkt im Easycart-Checkout dieses Produkts.

Teil 2: Login Wall (geschützte Inhalte)

Mit der Login Wall steuerst du den Zugang zu Inhalten auf deiner Webflow-Seite. Es gibt zwei Modi:

• Secure entire page (Ganze Seite schützen) - Sperrt die komplette Seite. Besucher ohne Kauf werden zur Login- bzw. Kaufseite von Easytools weitergeleitet.
• Secure page sections (Seitenabschnitte schützen) - Blendet einzelne Abschnitte je nach Abo-Status ein oder aus. Sowohl zahlende als auch nicht zahlende Besucher sehen die Seite, aber unterschiedliche Inhalte.

Beide Modi nutzen ein Skript im Feld Custom code der Webflow-Seiteneinstellungen sowie ein Produkt in Easytools, das als Zugangsschlüssel dient.

3. Ganze Seite schützen

Schritt 1 - Skript aus Easytools holen:

1. Gehe in Easytools zu Store → Products (Shop → Produkte).
2. Öffne das Produkt, das Zugang zur geschützten Seite geben soll.
3. Klicke oben auf der Produktseite auf das Schloss-Symbol (Gate content).
4. Klicke auf Secure entire page.
5. Klicke auf Copy code (Code kopieren).

Schritt 2 - Skript in die Webflow-Seiteneinstellungen einfügen:

1. Öffne im Webflow Editor in der linken Seitenleiste den Bereich Pages (Seiten).
2. Fahre über die Seite, die du schützen willst, und klicke auf Edit page settings (Zahnrad-Symbol).
3. Scrolle zum Bereich Custom code.
4. Füge das Skript in das Feld Inside tag ein.
5. Klicke auf Save (Speichern).
6. Veröffentliche deine Seite, damit die Änderung greift.

Besucher ohne Kauf werden beim Aufruf sofort zu Easytools weitergeleitet, wo sie sich anmelden oder den Zugang kaufen können. Zahlende Kunden sehen die Seite ohne Unterbrechung.

4. Einzelne Abschnitte schützen

Mit dem Gating einzelner Abschnitte zeigst du verschiedenen Besuchern auf derselben Seite unterschiedliche Inhalte, ohne die Seite komplett zu sperren. Dafür sind zwei Schritte nötig: das Skript einfügen und danach jeden Abschnitt mit dem passenden Attribut markieren.

Schritt 1 - Skript aus Easytools holen:

1. Gehe in Easytools zu Store → Products (Shop → Produkte).
2. Öffne das Produkt, das als Zugangsschlüssel dienen soll.
3. Klicke oben auf der Produktseite auf das Schloss-Symbol (Gate content).
4. Klicke auf Secure page sections.
5. Klicke auf Copy code (Code kopieren).

Schritt 2 - Skript in die Webflow-Seiteneinstellungen einfügen:

1. Öffne im Webflow Editor den Bereich Pages (Seiten).
2. Fahre über die Seite und klicke auf Edit page settings.
3. Scrolle zu Custom code und füge das Skript in das Feld Inside tag ein.
4. Klicke auf Save (Speichern).

Schritt 3 - Attribute zu deinen Abschnitten hinzufügen:

Entscheide für jeden Abschnitt, ob er für zahlende Kunden, für nicht zahlende Besucher oder für alle sichtbar sein soll. Ergänze dann in Webflow das passende Attribut:

1. Klicke im Webflow Editor auf den Abschnitt, den du schützen willst.
2. Öffne im rechten Bereich den Tab Settings (Einstellungen).
3. Suche den Bereich Custom attributes und füge ein neues Attribut hinzu:
   • Für Inhalte nur für zahlende Kunden: Name = data-paid, Wert = true
   • Für Inhalte nur für nicht zahlende Besucher: Name = data-free, Wert = true
4. Wiederhole das für jeden Abschnitt, den du schützen willst.
5. Veröffentliche deine Seite, damit die Änderungen greifen.

Das Skript wirkt nur auf Abschnitte, die ausdrücklich mit data-paid oder data-free markiert sind. Jeder Abschnitt ohne eines dieser Attribute bleibt für alle Besucher sichtbar, unabhängig vom Abo-Status.

5. Login Wall testen

So prüfst du dein Setup:

1. Stelle sicher, dass deine Webflow-Seite veröffentlicht ist - die Login Wall funktioniert nur auf der Live-Seite, nicht in der Vorschau des Webflow Editors.
2. Für den Test ohne Zugang bzw. als kostenloser Besucher: Öffne die geschützte Seite in einem Inkognito- bzw. privaten Fenster. Beim Schutz ganzer Seiten solltest du weitergeleitet werden; beim Gating einzelner Abschnitte siehst du nur die mit data-free markierten Bereiche.
3. Für den Test als zahlender Kunde: Öffne die Seite in einem Browser, in dem du bei Easytools angemeldet bist und das Produkt gekauft hast. Beim Schutz ganzer Seiten bekommst du Zugang; beim Gating siehst du die mit data-paid markierten Abschnitte.