Squarespace

Squarespace-Integration

In dieser Anleitung sehen wir uns zwei Wege an, Easytools mit Squarespace zu verbinden:

1. Squarespace als Landingpage - Deine Produkte liegen in Easytools, Squarespace ist deine zentrale Landingpage. Du kannst außerdem weitere Easytools-Werkzeuge einbinden, etwa Buy Me a Coffee, Ticker, Preisbereiche, Kundenstimmen und mehr.
2. Geschützte Inhalte auf Squarespace - Mit der Login Wall sperrst du einzelne Seiten, sodass nur zahlende Kunden sie sehen.

Warum dieser Weg? Squarespace als Landingpage bei Produkten in Easytools ist eine einfache und sichere Lösung. Alles - also sämtliche Produkte - liegt in Easytools, unbefugter Zugriff ist damit ausgeschlossen, und du behältst Squarespace als deine zentrale Landingpage.

Voraussetzung beim Squarespace-Tarif Eigener Code (Skripte und Code Injection) setzt in Squarespace mindestens den Core-Tarif voraus (Tarife: Basic, Core, Advanced). Prüfe das, bevor du den Schritten unten folgst.

Werkzeuge werden immer nach demselben Muster eingebunden

• Handelt es sich um ein Skript - nutze die Squarespace Code Injection (seitenweit oder pro Seite) und füge es in das Feld Header ein
• Handelt es sich um ein iframe bzw. Embed - füge einen Code Block direkt in dein Seitenlayout ein und setze den Embed-Code dort ein

Teil 1: Squarespace als Landingpage

Sieh dir das Video-Tutorial zu Produktlinks, Skripten und Embeds an:

1. Einzelne Produkte verlinken

Wenn deine Produkte in Easytools liegen und Squarespace deine Landingpage ist, verlinkst du Buttons direkt mit deinen Checkout-Seiten.

1. Gehe in Easytools zu Store → Products (Shop → Produkte).
2. Suche das Produkt, das du teilen willst.
3. Klicke auf Share (Teilen) und wähle Copy link to checkout (Checkout-Link kopieren).
4. Bearbeite in Squarespace das Button-Element auf deiner Seite.
5. Klicke auf das Link-Symbol, wähle External (Extern) und füge den kopierten Link ein.
6. Klicke auf Apply (Übernehmen) und speichere.

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 verlinken willst, nutzt du die Storefront.

1. Gehe in Easytools zum Bereich Store (Shop).
2. Suche den Abschnitt Storefront.
3. Lege fest, welche Produkte erscheinen - füge sie hinzu oder entferne sie.
4. Kopiere den Storefront-Link.
5. Lege in Squarespace einen Button an (zum Beispiel “Unsere Produkte ansehen”) und füge den Storefront-Link als externen Link ein.

Wer diesen Button klickt, sieht dein gesamtes Produktportfolio aus Easytools.

3. Skript-basierte Werkzeuge einbinden

Jedes Easytools-Werkzeug, das ein <script>-Tag liefert, bindest du über die Squarespace Code Injection ein. Das gilt zum Beispiel für Social-Proof-Ticker - der Ablauf ist bei allen gleich.

1. Öffne in Easytools das Werkzeug, das du einbinden willst.
2. Richte es nach deinen Wünschen ein und klicke auf Copy code (Code kopieren).
3. Entscheide in Squarespace, wo es erscheinen soll:
   • Seitenweit (auf jeder Seite): Scrolle im Bereich Pages nach unten, klicke auf Custom Code → Code Injection und füge den Code in das Feld Header ein.
   • Nur auf einer Seite: Fahre im Bereich Pages über die Seite, klicke auf das Zahnrad-Symbol → Advanced und füge den Code in das Feld Page Header Code Injection ein.
4. Klicke auf Save (Speichern).

Du kannst mehrere Skripte stapeln - Füge sie einfach nacheinander in dasselbe Header-Feld ein. Getrennte Einträge sind nicht nötig.

4. Inhalte einbetten (iframes)

Jedes Easytools-Werkzeug, das einen Embed-Code (iframe) liefert, setzt du direkt als Block in den Seiteneditor. Das gilt für Kundenstimmen (Easylove), Rechtstexte (Easylegal) und den Footer - der Ablauf ist bei allen gleich.

1. Öffne in Easytools das Werkzeug, das du einbetten willst.
2. Richte es ein und klicke auf Copy embed code (Embed-Code kopieren).
3. Öffne in Squarespace den Seiteneditor und klicke auf +, um einen neuen Block hinzuzufügen.
4. Wähle Code, füge den Embed-Code ein und klicke auf Apply (Übernehmen).
5. Speichere die Seite.

Alternative: Embed-Block

Statt eines Code-Blocks kannst du auch einen Embed-Block nutzen (praktisch zum Beispiel im Footer). Klicke dort auf Edit, wähle Code snippet (nicht “Link”) und füge den Code ein.

Denk daran, Änderungen in Easytools zu veröffentlichen

Alle Änderungen, die du in Easytools vornimmst, musst du veröffentlichen, bevor sie auf deiner Squarespace-Seite erscheinen. Ohne Veröffentlichung sehen deine Besucher die Aktualisierungen nicht.

Teil 2: Login Wall (geschützte Inhalte)

Mit der Login Wall schützt du einzelne Seiten in Squarespace - nur wer den Zugang in Easytools gekauft hat, sieht sie. Besucher ohne Zugang werden automatisch zur Login-Seite von Easytools weitergeleitet, wo sie sich anmelden oder das Produkt kaufen können.

Sieh dir das Video-Tutorial zur Einrichtung der Login Wall an:

5. Login Wall in Easytools einrichten

Um eine bestimmte Seite zu schützen, kopierst du zuerst das Login-Wall-Skript aus deinem Easytools-Produkt.

1. Gehe in Easytools zu Store → Products (Shop → Produkte).
2. Wähle das Produkt, das Zugang zur geschützten Seite geben soll.
3. Klicke oben auf der Produktseite auf das Schloss-Symbol (Gate content).
4. Wähle Secure entire page (Ganze Seite schützen).
5. Kopiere das erzeugte Skript.

6. Login-Wall-Skript in Squarespace einfügen

Das Skript gehört auf genau die Seite, die du schützen willst - nicht seitenweit.

1. Gehe in Squarespace zum Bereich Pages (Seiten).
2. Fahre über die Seite, die du schützen willst, und klicke auf das Zahnrad-Symbol.
3. Wechsle zum Tab Advanced (Erweitert).
4. Füge das Skript aus Easytools in das Feld Page Header Code Injection ein.
5. Klicke auf Save (Speichern).

Wiederhole das für jede Seite, die du schützen willst. Jede Seite kann bei Bedarf mit einem anderen Produkt verknüpft sein.

Wichtig: Eine geschützte Seite bearbeiten

Sobald das Login-Wall-Skript auf einer Seite aktiv ist, sperrt Squarespace den Seiteneditor - du siehst eine Warnung EMBEDDED SCRIPTS und kannst den Inhalt nicht mehr direkt bearbeiten.

Workaround: Gehe in die Seiteneinstellungen (Zahnrad-Symbol → Advanced → Page Header Code Injection), entferne das Skript, speichere und bearbeite die Seite. Füge das Skript danach wieder ein. Beachte: Solange das Skript entfernt ist, ist die Seite öffentlich zugänglich - arbeite also zügig.

7. Login Wall testen

So prüfst du dein Setup:

1. Stelle sicher, dass deine Squarespace-Seite veröffentlicht ist (im Vorschaumodus funktioniert die Login Wall nicht).
2. Für den Test ohne Zugang: Öffne die geschützte Seite in einem Inkognito- bzw. privaten Fenster - du solltest zur Login- bzw. Kaufseite von Easytools weitergeleitet werden.
3. Für den Test mit gültigem Kauf: Melde dich in deinem normalen Browser vorübergehend von Squarespace ab (dort, wo du bei Easytools/Easycart angemeldet bist und das Produkt gekauft hast). Rufe die geschützte Seite auf - der Zugang sollte funktionieren.
4. Melde dich danach wieder bei Squarespace an.

Warum reicht die Squarespace-Vorschau nicht?

Wenn du als Seiteninhaber bei Squarespace angemeldet bist und die Live-URL aufrufst, leitet Squarespace dich automatisch in den Editor - du siehst die veröffentlichte Seite also nicht wie ein normaler Besucher. Das ist eine Einschränkung von Squarespace. Sich abzumelden oder ein Inkognito-Fenster zu nutzen ist der einzige verlässliche Weg, die Seite so zu sehen wie deine Besucher.