Überblick
In dieser Anleitung sehen wir uns zwei Wege an, Easytools mit Framer zu verbinden:
- Framer als Landingpage - Deine Produkte liegen in Easytools, Framer ist deine zentrale Landingpage. Du kannst außerdem weitere Easytools-Werkzeuge einbinden, etwa Ticker und Kundenstimmen.
- Geschützte Inhalte in Framer - Mit der Login Wall liegen deine Inhalte in Framer und sind trotzdem vor unbefugtem Zugriff geschützt.
Framer als Landingpage bei Produkten in Easytools ist eine sehr einfache und sichere Lösung. Alles - also sämtliche Produkte - liegt in Easytools, unbefugter Zugriff ist damit ausgeschlossen, und du behältst Framer als deine schöne zentrale Landingpage.
Diese Anleitung deckt nur ausgewählte Easytools-Werkzeuge ab. In deinem Easytools-Konto findest du weitere - schau dafür in dein Dashboard.
Werkzeuge werden immer nach demselben Muster eingebunden:
- Handelt es sich um ein Skript - gehe in Framer zu Site Settings → Custom Code und füge es dort ein
- Handelt es sich um ein iframe bzw. Embed - nutze das Element Embed in deinem Framer-Seitenlayout
Teil 1: Framer als Landingpage
Sieh dir das Video-Tutorial zu Produktlinks, Storefront, Widgets und Embeds an:
1. Einzelne Produkte verlinken
Wenn deine Produkte in Easytools liegen und Framer deine Landingpage ist, verlinkst du Buttons direkt mit deinen Checkout-Seiten.
- Gehe in Easytools zu Store → Products (Shop → Produkte).
- Suche das Produkt, das du teilen willst.
- Klicke auf Share (Teilen) und wähle Copy link to checkout (Checkout-Link kopieren).
- Wähle in Framer dein Button-Element aus.
- Füge den kopierten Link in das Link-Feld des Buttons ein.
Das war’s! Beim Klick auf den Button landen deine Besucher direkt im Easycart-Checkout dieses Produkts.
2. Zur Storefront verlinken
Wenn du auf eine Seite mit all deinen Produkten (dein Portfolio) verlinken willst, nutzt du die Storefront.
- Gehe in Easytools zum Bereich Store (Shop).
- Suche den Abschnitt Storefront.
- Lege fest, welche Produkte in deiner Storefront erscheinen - füge sie hinzu oder entferne sie nach Bedarf.
- Kopiere den Storefront-Link.
- Lege in Framer einen Button an (zum Beispiel “Unsere Produkte ansehen”) und füge den Storefront-Link ein.
Wer diesen Button klickt, sieht dein gesamtes Produktportfolio aus Easytools.
3. Ticker einbinden (Social Proof)
Ticker zeigen deinen Besuchern aktuelle Käufe - dieser Social Proof steigert das Vertrauen und bringt dir mehr Kunden.
- Gehe in Easytools zu Websites → Social Proof (Ticker).
- Richte deinen Ticker ein.
- Klicke auf Copy code (Code kopieren).
- Gehe in Framer zu Site Settings → Custom Code.
- Lege einen neuen Custom-Code-Eintrag an (zum Beispiel “Tickers”).
- Füge das Ticker-Skript ein und speichere.
Du kannst mehrere Skripte in einem Custom-Code-Eintrag kombinieren, einfach nacheinander. Stelle die Ausführung auf All pages (Alle Seiten), damit die Widgets überall erscheinen.
4. Kundenstimmen einbetten (Wall of Love)
Kundenstimmen sind eingebettete Elemente (iframes), keine Skripte.
- Gehe in Easytools zu Websites → Testimonials (Wall of Love).
- Passe die Darstellung nach deinen Wünschen an.
- Klicke auf Copy embed code (Embed-Code kopieren).
- Öffne in Framer die Layers-Ansicht an der Stelle, an der die Kundenstimmen erscheinen sollen.
- Suche im Menü Insert das Element Embed und füge es hinzu.
- Wähle das Embed-Element aus und achte darauf, HTML zu wählen (nicht URL).
- Füge den Embed-Code ein.
Merke dir den Unterschied:
- Skripte (Ticker) - gehören nach Site Settings → Custom Code
- Embeds (Kundenstimmen) - nutzen das Element Embed im Seitenlayout
Teil 2: Login Wall (geschützte Inhalte)
Mit der Login Wall liegen deine Inhalte in Framer und sind geschützt - nur wer den Zugang in Easytools gekauft hat, sieht sie.
Sieh dir das Video-Tutorial zur Einrichtung an:
5. Login Wall in Easytools einrichten
- Gehe in Easytools zu Store → Products (Shop → Produkte).
- Wähle das Produkt, das Zugang zu den geschützten Inhalten geben soll (zum Beispiel “Yoga-Grundlagen Videokurs”).
- Klicke oben rechts neben den anderen Symbolen auf das Schloss-Symbol Gate content.
- Wähle Secure page sections or secure entire page (Abschnitte oder ganze Seite schützen; im Video zeigen wir den Schutz einzelner Abschnitte).
- Aktiviere Create asynchronous script (Asynchrones Skript erzeugen) - das ist wichtig, weil Framer so arbeitet.
- Kopiere den gesamten erzeugten Code.
6. Login-Wall-Skript in Framer einfügen
- Gehe in Framer zu Site Settings → Custom Code.
- Lege einen neuen Custom-Code-Eintrag an.
- Benenne ihn, zum Beispiel “Login Wall”.
- Setze die Platzierung auf End of .
- Wähle als Seiteneinstellung nur die Seite aus, die geschützt sein soll (zum Beispiel “/class”).
- Füge den Code aus Easytools ein.
- Speichere die Einstellungen.
7. Code-Datei in Framer anlegen
Damit die Code Overrides funktionieren, brauchst du außerdem eine eigene Code-Datei in den Framer-Assets:
- Gehe in Framer zu Assets.
- Lege eine New Code File an.
- Nenne sie Easytools_login_wall.tsx.
- Füge folgenden Code ein:
Speichere die Datei.
8. Code Overrides anwenden
- Gehe zu deiner geschützten Seite (zum Beispiel “/class”).
- Lege zwei Abschnitte bzw. Elemente an:
- eines für kostenlose Besucher (zum Beispiel “Nur für Mitglieder” - sichtbar, wenn NICHT angemeldet)
- eines für zahlende Kunden (zum Beispiel “Glückwunsch, du hast Zugang” - sichtbar, wenn angemeldet)
- Wähle das Element für zahlende Kunden aus.
- Suche im rechten Bereich die Code Overrides.
- Wähle im Dropdown Easytools_login_wall (die Datei, die du angelegt hast).
- Wähle withIDpaid - damit sehen nur zahlende Kunden dieses Element.
- Wähle das Element für kostenlose Besucher aus.
- Wende darauf withIDfree an - damit sehen nur nicht zahlende Besucher dieses Element.
9. Login Wall testen
So prüfst du dein Setup:
- Veröffentliche deine Framer-Seite.
- Als angemeldeter zahlender Kunde solltest du den Inhalt “Glückwunsch, du hast Zugang” sehen.
- Öffne ein Inkognito- bzw. privates Fenster, um als nicht angemeldeter Besucher zu testen.
- Dort solltest du stattdessen den Inhalt “Nur für Mitglieder” sehen.