Page title

Framer

Połącz Easytools z Framerem, aby dodać produkty i widżety oraz chronić swoje treści za pomocą ściany logowania.

Ostatnia aktualizacja:

2026-02-09

W tej dokumentacji pokażemy, jak połączyć Easytools z Framerem na dwa sposoby:

Framer jako strona główna (landing page) - Twoje produkty są na Easytools, a Framer służy jako główna strona docelowa. Możesz również dodać dodatkowe narzędzia z Easytools, takie jak Buy Me a Coffee, Tickers, sekcje cenowe, opinie klientów i inne.
Chroniona treść na Framerze - Użycie Login Wall, aby mieć treści na Framerze, które są jednocześnie zabezpieczone przed nieautoryzowanym dostępem.

Używanie Framera jako strony głównej z produktami na Easytools to bardzo proste i bezpieczne rozwiązanie. Masz wszystko - wszystkie produkty - na Easytools, więc nieautoryzowany dostęp nie jest możliwy, a jednocześnie masz Framera jako swoją piękną stronę główną.

Dodawanie narzędzi odbywa się w ustandaryzowany sposób:

Jeśli to skrypt - przejdź do Site Settings → Custom Code we Framerze i wklej go tam
Jeśli to iframe/embed - użyj elementu Embed w układzie strony Framer

Część 1: Framer jako strona główna

Obejrzyj film instruktażowy dotyczący linkowania produktów, Storefront, widgetów i embedów:

1. Linkowanie pojedynczych produktów

Gdy masz produkty na Easytools, a Framer jest Twoją stroną główną, możesz linkować przyciski bezpośrednio do stron checkout Twoich produktów.

Przejdź do Easytools i wejdź w Store → Products.
Znajdź produkt, który chcesz udostępnić.
Kliknij przycisk Share i wybierz Copy link to checkout.
W Framerze wybierz element przycisku.
Wklej skopiowany link w pole linku przycisku.

To wszystko! Gdy użytkownicy klikną przycisk, zostaną przeniesieni bezpośrednio do koszyka Easycart dla tego produktu.

2. Linkowanie do Storefront

Jeśli chcesz linkować do całej strony ze wszystkimi produktami (Twoje portfolio), możesz użyć funkcji Storefront.

Przejdź do Easytools i wejdź w Store.
Znajdź sekcję Storefront.
Możesz edytować, które produkty są wyświetlane w Twoim Storefront - dodawać lub usuwać je w zależności od potrzeb.
Skopiuj link do Storefront.
W Framerze stwórz przycisk (np. "Zobacz nasze produkty") i wklej link do Storefront.

Użytkownicy klikający ten przycisk zobaczą całe Twoje portfolio produktów z Easytools.

3. Dodawanie widgetu Buy Me a Coffee

Widget Buy Me a Coffee pozwala Twoim użytkownikom wpłacać drobne kwoty na Twój cel. Oto jak go dodać:

W Easytools najpierw potrzebujesz produktu powiązanego z darowizną. Przejdź do Store → Products i stwórz lub wybierz produkt "Buy me a coffee".
Przejdź do sekcji Websites → Donation.
Wybierz lub stwórz nowy widget darowizn.
Dostosuj styl, kolory, motyw, rozmiary i układ (możesz umieścić go w dowolnym rogu strony).
Kliknij przycisk Copy code - to krótki skrypt.
W Framerze przejdź do Site Settings → Custom Code.
Kliknij, aby dodać nowy custom code.
Nadaj mu nazwę (np. "Coffee"), ustaw umiejscowienie na End of <head>, uruchom Once i zastosuj do All pages.
Wklej kod skryptu i zapisz.

4. Dodawanie Tickers (Social Proof)

Tickers wyświetlają informacje o ostatnich zakupach Twoim odwiedzającym - to social proof, który ma zwiększyć zaangażowanie i przyciągnąć więcej klientów.

W Easytools przejdź do Websites → Social Proof (Tickers).
Skonfiguruj ustawienia tickera.
Kliknij Copy code.
W Framerze przejdź do Site Settings → Custom Code.
Dodaj nowy wpis custom code (możesz połączyć go ze skryptem Coffee w jednym wpisie, np. "Tickers + Coffee").
Wklej skrypt tickera i zapisz.

Możesz łączyć wiele skryptów w jednym wpisie Custom Code. Na przykład nazwij go "Tickers + Coffee" i uwzględnij oba skrypty. Ustaw go na All pages, aby widgety pojawiały się wszędzie na Twojej stronie.

5. Osadzanie sekcji cenowych

Sekcje cenowe to osadzone elementy (iframe), nie skrypty. Oto jak je dodać:

W Easytools przejdź do Websites → Pricing Sections.
Wybierz lub stwórz swoją sekcję cenową (możesz mieć opcje miesięczne/roczne, dostosować style do swojej strony, zmienić nagłówki itp.).
Kliknij Copy embed code.
W Framerze przejdź do widoku Layers, gdzie chcesz dodać cennik.
Z menu Insert wyszukaj i dodaj element Embed.
Wybierz element embed i upewnij się, że wybrałeś HTML (nie URL).
Wklej kod embed.

Sekcja cenowa załaduje się i wyświetli na Twojej stronie Framer.

6. Osadzanie opinii (Wall of Love)

Opinie działają tak samo jak sekcje cenowe - to osadzone elementy.

W Easytools przejdź do Websites → Testimonials (Wall of Love).
Dostosuj wyświetlanie opinii według własnych potrzeb.
Kliknij Copy embed code.
W Framerze dodaj element Embed z menu Insert.
Wybierz tryb HTML i wklej kod embed.

Pamiętaj o różnicy:

Skrypty (Buy Me a Coffee, Tickers) - Idą do Site Settings → Custom Code
Embeddy (Pricing, Testimonials) - Używają elementu Embed w układzie strony

Część 2: Login Wall (chroniona treść)

Login Wall pozwala mieć treści na Framerze, które są chronione - tylko osoby, które kupiły dostęp na Easytools, mogą je zobaczyć.

Obejrzyj film instruktażowy dotyczący konfiguracji Login Wall:

7. Konfiguracja Login Wall w Easytools

W Easytools przejdź do Store → Products.
Wybierz produkt, który powinien dawać dostęp do chronionej treści (np. "Yoga Fundamentals Video Course").
Kliknij ikonę Gate content (mała ikona kłódki u góry przy pozostałych ikonkach).
Wybierz Secure page sections lub secure entire page (video tutorial tłumaczy blokowanie sekcji).
Włącz Create asynchronous script - to ważne ze względu na sposób działania Framera.
Skopiuj cały wygenerowany kod.

8. Dodawanie skryptu Login Wall do Framera

W Framerze przejdź do Site Settings → Custom Code.
Dodaj nowy wpis custom code.
Nazwij go (np. "Login Wall").
Ustaw umiejscowienie na End of <head>.
W ustawieniu strony wybierz tylko konkretną stronę, która ma być chroniona (np. "/class").
Wklej kod z Easytools.
Zapisz ustawienia.

9. Tworzenie pliku kodu w Framerze

Musisz także stworzyć plik z kodem w Framer Assets, aby włączyć code overrides:

W Framerze przejdź do Assets.
Stwórz New Code File.
Nazwij go Easytools_login_wall.tsx.
Wklej następujący kod:

import type { ComponentType } from "react"

// Function marking element as FREE (visible for everyone)
export function withIDfree(Component: ComponentType): ComponentType {
    return (props) => {
        return <Component {...props} data-free="true" />
    }
}

// Function marking element as PAID (visible only after purchase)
export function withIDpaid(Component: ComponentType): ComponentType {
    return (props) => {
        return <Component {...props} data-paid="true" />
    }
}

Zapisz plik.

10. Stosowanie Code Overrides

Przejdź do chronionej strony (np. "/class").
Stwórz dwie sekcje/elementy:
- Jeden dla darmowych użytkowników (np. "Member only area" - pokazywany gdy NIE jest zalogowany)
- Jeden dla płacących klientów (np. "Congrats, you have access" - pokazywany gdy zalogowany)
Wybierz element dla płacących klientów.
W prawym panelu znajdź Code Overrides.
Z rozwijanej listy wybierz Easytools_login_wall (plik, który stworzyłeś).
Wybierz withIDpaid - to pokaże ten element tylko płacącym klientom.
Wybierz element dla darmowych użytkowników.
Zastosuj override withIDfree - to pokaże ten element tylko darmowym (niepłacącym) użytkownikom.

11. Testowanie Login Wall

Aby przetestować konfigurację Login Wall:

Opublikuj swoją stronę Framer.
Jako zalogowany płacący klient powinieneś widzieć treść "Congrats, you have access".
Otwórz okno Incognito/Prywatne, aby przetestować jako niezalogowany użytkownik.
W trybie incognito powinieneś widzieć treść "Member only area".

Spis treści