Framer

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

1. 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 Tickers, opinie klientów i inne.
2. 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, witryny, widżetó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 koszyków Twoich produktów.

1. Przejdź do Easytools i wejdź w Sklep → Produkty.
2. Znajdź produkt, który chcesz udostępnić.
3. Kliknij przycisk Udostępnij i wybierz Kopiuj link do koszyka.
4. W Framerze wybierz element przycisku.
5. 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 witryny (Storefront)

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

1. Przejdź do Easytools i wejdź w Sklep.
2. Znajdź sekcję Witryna.
3. Możesz edytować, które produkty są wyświetlane w Twojej witrynie - dodawać lub usuwać je w zależności od potrzeb.
4. Skopiuj link do witryny.
5. W Framerze stwórz przycisk (np. “Zobacz nasze produkty”) i wklej link do witryny.

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

3. 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.

1. W Easytools przejdź do Strony → Social proof (Tickers).
2. Skonfiguruj ustawienia tickera.
3. Kliknij Kopiuj kod.
4. W Framerze przejdź do Site Settings → Custom Code.
5. Dodaj nowy wpis custom code (np. “Tickers”).
6. Wklej skrypt tickera i zapisz.

Możesz łączyć wiele skryptów w jednym wpisie Custom Code - jeden pod drugim. Ustaw go na All pages, aby widgety pojawiały się wszędzie na Twojej stronie.

4. Osadzanie opinii (Wall of Love)

Opinie to osadzone elementy (iframe), nie skrypty.

1. W Easytools przejdź do Strony → Opinie (Wall of Love).
2. Dostosuj wyświetlanie opinii według własnych potrzeb.
3. Kliknij Kopiuj kod osadzenia.
4. W Framerze przejdź do widoku Layers, gdzie chcesz dodać opinie.
5. Z menu Insert wyszukaj i dodaj element Embed.
6. Wybierz element embed i upewnij się, że wybrałeś HTML (nie URL).
7. Wklej kod embed.

Pamiętaj o różnicy:

• Skrypty (Tickers) - Idą do Site Settings → Custom Code
• Embeddy (opinie) - 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:

5. Konfiguracja Login Wall w Easytools

1. W Easytools przejdź do Sklep → Produkty.
2. Wybierz produkt, który powinien dawać dostęp do chronionej treści (np. “Yoga Fundamentals Video Course”).
3. Kliknij ikonę Chroń treści (mała ikona kłódki u góry przy pozostałych ikonkach).
4. Wybierz Chroń sekcje strony lub Chroń całą stronę (wideo pokazuje blokowanie sekcji).
5. Włącz Utwórz skrypt asynchroniczny (Create asynchronous script) - to ważne ze względu na sposób działania Framera.
6. Skopiuj cały wygenerowany kod.

6. Dodawanie skryptu Login Wall do Framera

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

7. Tworzenie pliku kodu w Framerze

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

1. W Framerze przejdź do Assets.
2. Stwórz New Code File.
3. Nazwij go Easytools_login_wall.tsx.
4. 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.

8. Stosowanie Code Overrides

1. Przejdź do chronionej strony (np. “/class”).
2. 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)
3. Wybierz element dla płacących klientów.
4. W prawym panelu znajdź Code Overrides.
5. Z rozwijanej listy wybierz Easytools_login_wall (plik, który stworzyłeś).
6. Wybierz withIDpaid - to pokaże ten element tylko płacącym klientom.
7. Wybierz element dla darmowych użytkowników.
8. Zastosuj override withIDfree - to pokaże ten element tylko darmowym (niepłacącym) użytkownikom.

9. Testowanie Login Wall

Aby przetestować konfigurację Login Wall:

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