Webflow
Połącz Easytools z Webflow, aby sprzedawać swoje produkty i chronić zawartość za pomocą ściany logowania.
W tej dokumentacji pokażemy, jak połączyć Easytools z Webflow na dwa sposoby:
- Webflow jako strona główna (landing page) — Twoje produkty są na Easytools, a Webflow służy jako główna strona docelowa. Możesz podlinkować dowolny przycisk lub element na Webflow bezpośrednio do checkoutu produktu na Easytools.
- Chroniona treść na Webflow — Użycie Login Wall do kontrolowania, kto widzi jaką treść. Możesz zablokować dostęp do całej podstrony lub pokazywać i ukrywać konkretne sekcje w zależności od tego, czy odwiedzający jest płacącym klientem.
W odróżnieniu od niektórych innych platform, Webflow umożliwia nie tylko ochronę całych stron, ale również blokowanie na poziomie sekcji - pokazywanie różnych treści płacącym klientom i darmowym użytkownikom na tej samej stronie. Opisujemy to w Części 2.
Obejrzyj wideo, które obejmuje wszystkie tematy:
Część 1: Linkowanie produktów
Gdy masz produkty na Easytools, a Webflow jest Twoją stroną główną, możesz podlinkować dowolny przycisk lub element na Webflow bezpośrednio do checkoutu produktu na Easytools.
1. Skopiuj link do produktu z Easytools
- W Easytools przejdź do Store → Products.
- Otwórz produkt, do którego chcesz linkować.
- Kliknij ikonę Share na górze strony produktu.
- W oknie Share kliknij Copy link. Opcjonalnie możesz włączyć Shorten link, aby uzyskać krótszy adres URL.
2. Dodaj link do przycisku w Webflow
- Otwórz swoją stronę w edytorze Webflow.
- Kliknij na przycisk lub element, który chcesz podlinkować.
- W prawym panelu otwórz zakładkę Settings.
- Znajdź sekcję Link settings i wklej skopiowany link w pole URL.
- Włącz Open in new tab, jeśli chcesz, aby link otwierał się w nowej karcie.
- Kliknij Publish w prawym górnym rogu, aby zmiany były widoczne na żywo.
Gdy użytkownicy klikną przycisk, zostaną przeniesieni bezpośrednio do checkoutu Easycart dla tego produktu.
Część 2: Login Wall (chroniona treść)
Login Wall pozwala kontrolować dostęp do treści na Twojej stronie Webflow. Dostępne są dwa tryby:
- Secure entire page — Blokuje dostęp do całej strony. Odwiedzający bez wykupionego dostępu są przekierowywani na stronę logowania/zakupu Easytools.
- Secure page sections — Pokazuje lub ukrywa konkretne sekcje na stronie w zależności od statusu subskrypcji odwiedzającego. Zarówno płacący klienci, jak i darmowi użytkownicy widzą stronę, ale widzą różne treści.
Oba tryby wymagają umieszczenia skryptu w polu Custom code w ustawieniach strony Webflow oraz produktu w Easytools, który pełni rolę bramki dostępu.
3. Zabezpieczenie całej strony
Krok 1 — Pobierz skrypt z Easytools:
- W Easytools przejdź do Store → Products.
- Otwórz produkt, który ma dawać dostęp do chronionej strony.
- Kliknij ikonę kłódki (Gate content) na górze strony produktu.
- Kliknij Secure entire page.
- Kliknij Copy code.
Krok 2 — Dodaj skrypt do ustawień strony Webflow:
- W edytorze Webflow otwórz panel Pages w lewym panelu bocznym.
- Najedź na stronę, którą chcesz chronić, i kliknij Edit page settings (ikona koła zębatego, która się pojawi).
- Przewiń w dół do sekcji Custom code.
- Wklej skrypt w pole Inside <head> tag.
- Kliknij Save.
- Opublikuj stronę, aby zmiana weszła w życie.
Odwiedzający bez wykupionego dostępu, którzy spróbują wejść na stronę, zostaną natychmiast przekierowani do Easytools, gdzie będą mogli się zalogować lub kupić dostęp. Płacący klienci zobaczą stronę bez żadnych przeszkód.
4. Zabezpieczenie sekcji strony
Blokowanie na poziomie sekcji pozwala pokazywać różne treści różnym odwiedzającym na tej samej stronie — bez blokowania dostępu do samej strony. Wymaga to dwóch rzeczy: dodania skryptu do strony, a następnie oznaczenia każdej sekcji odpowiednim atrybutem.
Krok 1 — Pobierz skrypt z Easytools:
- W Easytools przejdź do Store → Products.
- Otwórz produkt, który ma pełnić rolę bramki dostępu.
- Kliknij ikonę kłódki (Gate content) na górze strony produktu.
- Kliknij Secure page sections.
- Kliknij Copy code.
Krok 2 — Dodaj skrypt do ustawień strony Webflow:
- W edytorze Webflow otwórz panel Pages.
- Najedź na stronę i kliknij Edit page settings.
- Przejdź do Custom code i wklej skrypt w pole Inside <head> tag.
- Kliknij Save.
Krok 3 — Dodaj atrybuty do sekcji:
Dla każdej sekcji na stronie zdecyduj, czy ma być widoczna dla płacących klientów, darmowych użytkowników, czy dla wszystkich. Następnie dodaj odpowiedni atrybut niestandardowy w Webflow:
- W edytorze Webflow kliknij na sekcję, którą chcesz oznaczyć.
- W prawym panelu otwórz zakładkę Settings.
- Znajdź sekcję Custom attributes i dodaj nowy atrybut:
- Dla treści widocznej tylko dla płacących klientów: Nazwa = data-paid, Wartość = true
- Dla treści widocznej tylko dla darmowych użytkowników: Nazwa = data-free, Wartość = true
- Powtórz dla każdej sekcji, która ma być oznaczona.
- Opublikuj stronę, aby zmiany weszły w życie.
Tylko sekcje oznaczone atrybutem data-paid lub data-free są kontrolowane przez skrypt. Każda sekcja bez jednego z tych atrybutów będzie widoczna dla wszystkich odwiedzających, niezależnie od ich statusu subskrypcji.
5. Testowanie Login Wall
Aby przetestować konfigurację Login Wall:
- Upewnij się, że Twoja strona Webflow jest opublikowana — Login Wall działa tylko na opublikowanej stronie, nie w podglądzie edytora Webflow.
- Aby przetestować widok bez dostępu: otwórz chronioną stronę w oknie Incognito / Prywatnym. W przypadku ochrony całej strony powinieneś zostać przekierowany; w przypadku blokowania sekcji powinieneś widzieć tylko sekcje oznaczone data-free.
- Aby przetestować dostęp jako płacący klient: otwórz stronę w przeglądarce, gdzie jesteś zalogowany do Easytools z kupionym produktem. Ochrona całej strony powinna przyznać dostęp; blokowanie sekcji powinno pokazać sekcje oznaczone data-paid.
