Podłączenie Webflow | justrank.it
Poradnik połączenia

Podłącz swój Webflow

Dziesięć minut w panelu Webflow i Twoje artykuły trafiają prosto do kolekcji CMS, z której zbudowany jest Twój blog.

Webflow nie ma jednego, z góry ustalonego bloga. To, co u Ciebie jest blogiem, to kolekcja CMS, którą ktoś zaprojektował w Designerze, i pola w niej nazywają się tak, jak ta osoba je nazwała. Dlatego nie zgadujemy: po podaniu tokenu odczytujemy Twoją kolekcję i pokazujemy Ci, do którego pola trafi treść artykułu, zanim wyślemy pierwszy tekst.

Wszystkie nazwy przycisków i sekcji podajemy po angielsku, bo panel Webflow nie ma polskiej wersji. Szukaj dokładnie takich napisów, jakie tu widzisz.

Zanim zaczniesz

Potrzebujesz czterech rzeczy, a na darmowym planie Starter jeszcze jednej. Jeśli którejś nie masz, reszta poradnika nie zadziała.

  • Uprawnień administratora tej strony w Webflow. Token API może wygenerować wyłącznie administrator strony. Jeśli nim nie jesteś, poproś osobę, która nim jest.
  • Kolekcji CMS, w której trzymasz wpisy bloga, razem z polem typu Rich text na treść. Bez pola Rich text nie ma gdzie umieścić artykułu, a my nie dorysujemy go za Ciebie.
  • Strony opublikowanej choć raz. Nowy element kolekcji potrzebuje istniejącej strony szablonu, żeby dało się go w ogóle otworzyć. Do tego za każdym razem, gdy zmienisz w Designerze budowę kolekcji bloga, czyli dodasz, usuniesz albo przemianujesz pole, naciśnij Publish jeszcze raz, zanim poprosimy Webflow o kolejny artykuł. Dopóki tego nie zrobisz, Webflow odrzuca każdy wpis komunikatem o zmienionej strukturze kolekcji.
  • Zaprojektowanej strony szablonu tej kolekcji. Każda kolekcja CMS ma własną stronę szablonu: w panelu Pages znajdziesz ją pod nagłówkiem CMS Collection pages, pod nazwą w rodzaju Blog Posts Template. Minimum to nagłówek podpięty do pola z nazwą i element Rich text podpięty do pola z treścią artykułu, a do tego włączona publikacja tej strony w jej Publish settings. Kolekcja założona od zera, ręcznie albo przez API, ma tę stronę pustą, a dopóki taka zostanie, każdy adres artykułu odpowiada błędem 404, choć w panelu CMS artykuł widzisz. Nie zaprojektujemy jej za Ciebie: to zmiana w Twoim projekcie i API na nią nie pozwala.
  • Jeśli jesteś na darmowym planie Starter: najwyżej dwóch stron statycznych. Dopóki strona ma ich więcej, a witryna złożona z szablonu zwykle ma, Webflow w ogóle odmawia publikacji całej witryny, więc artykuły nie mają dokąd trafić. Strony ustawione jako szkic też się liczą. Nadmiarowe usuń w Designerze, w panelu Pages, bo tylko tam się to da: ani my, ani API ich nie usuniemy. Strony szablonów kolekcji do tego limitu nie wchodzą. Płatne plany strony tego ograniczenia nie mają.

Kolekcje CMS wymagają planu, który je obejmuje, i akurat tu łatwo pomylić się w drugą stronę. Darmowy plan Starter ma CMS, tylko mocno ograniczony: 50 elementów CMS, 20 kolekcji i API treści z limitem 60 zapytań na minutę. Publikacja przez API na nim działa, ale strona stoi wyłącznie pod adresem w domenie webflow.io. Planem bez CMS jest Basic: daje własną domenę, ale nie ma ani jednej kolekcji, ani dostępu do API treści, więc na nim podłączenie nie zadziała, niezależnie od tokenu. Żeby mieć jednocześnie własną domenę i bloga, czyli jedyny układ, który ma sens pod SEO, potrzebujesz planu Premium albo Ecommerce.

1. Znajdź kolekcję, w której trzymasz wpisy

Najczęściej znajdujemy ją sami i nie musisz robić nic. Ten krok jest po to, żebyś wiedział, co potwierdzić, gdy zapytamy, oraz co odpowiedzieć, jeśli kolekcji wyglądających na blog jest u Ciebie kilka.

  1. Otwórz stronę w Designerze i przejdź do panelu CMS na pasku po lewej stronie.
  2. Na liście Collections znajdź tę, w której są Twoje wpisy. Zwykle nazywa się Blog posts, ale równie dobrze może to być Aktualności albo Wpisy.
  3. Otwórz jej ustawienia i przepisz wartość pola Collection URL. To jest ten krótki tekst z myślnikami, na przykład blog-posts. To właśnie on nam wystarczy.
  4. Przy okazji spójrz na listę pól tej kolekcji. Zapamiętaj, które z nich jest typu Rich text, i czy któreś pole ma przy sobie oznaczenie, że jest wymagane.
Co ma być widoczne: Panel CMS w Designerze z rozwiniętą listą Collections, tak żeby było widać, gdzie na pasku po lewej jest ikona CMS i jak wygląda lista kolekcji.
Co ma być widoczne: Ustawienia jednej kolekcji z widocznym polem Collection URL i jego wartością, oraz listą pól kolekcji z widocznym typem każdego pola.

Pola wymagane są tu istotne. Jeśli Twoja kolekcja wymaga pola, którego nie umiemy wypełnić, na przykład Autor albo Kategoria, Webflow odrzuci każdy artykuł. Powiemy Ci wtedy dokładnie, o które pole chodzi. Masz wtedy dwa wyjścia: odznaczyć wymagalność w Designerze albo podać nam jedną stałą wartość, którą będziemy w to pole wpisywać.

2. Wygeneruj token API

Token to długi ciąg znaków, który zastępuje Twoje hasło. Nie daje dostępu do Twojego konta Webflow, tylko do tej jednej strony i tylko w takim zakresie, jaki mu wyznaczysz.

  1. W swoim workspace znajdź stronę, którą chcesz podłączyć, i kliknij ikonę koła zębatego, żeby otworzyć ustawienia strony.
  2. W lewym menu ustawień strony wybierz Apps & integrations.
  3. Przewiń stronę na sam dół, do sekcji API access.
  4. Kliknij Generate API token.
  5. Wpisz nazwę tokenu. Wpisz coś, po czym poznasz go za rok, na przykład nazwę naszej usługi.
  6. Ustaw uprawnienia. Dla każdego API Webflow wybierasz jedną z trzech opcji: brak dostępu, tylko odczyt, albo odczyt i zapis. Ustaw je tak, jak w tabeli poniżej.
  7. Kliknij Generate token i skopiuj token do schowka.
Co ma być widoczne: Lewe menu ustawień strony z zaznaczoną pozycją Apps & integrations, żeby było widać, gdzie dokładnie jest na liście.
Co ma być widoczne: Sekcja API access na dole strony z widocznym przyciskiem Generate API token.

Jakie uprawnienia ustawić

API w Webflow Ustaw na Po co
CMS Odczyt i zapis Odczytujemy pola Twojej kolekcji i dodajemy do niej artykuły. Bez zapisu nie dodamy nic.
Sites Tylko odczyt Sprawdzamy, do której strony należy token i pod jakim adresem ona działa.
Ecommerce Tylko odczyt, jeśli masz sklep Czytamy listę produktów, żeby artykuły mogły się do nich odwoływać. Jeśli nie masz sklepu, zostaw brak dostępu.
Wszystkie pozostałe Brak dostępu Nie potrzebujemy ich, a token, który może mniej, mniej może zepsuć.
Co ma być widoczne: Okno generowania tokenu z polem na nazwę i listą uprawnień, na której widać trzy możliwe ustawienia przy każdym API.

Uprawnienie Sites ustaw na odczyt i zapis tylko wtedy, gdy chcesz, żebyśmy po każdym artykule uruchamiali publikację całej strony. Przeczytaj najpierw sekcję o dwóch etapach niżej, bo to publikuje także wszystkie inne niezapisane zmiany, które masz w Designerze.

Trzy rzeczy, o których warto wiedzieć

  • Token widzisz tylko raz, w chwili wygenerowania. Jeśli go zgubisz, nie da się go podejrzeć, trzeba wygenerować nowy.
  • Jedna strona może mieć maksymalnie pięć tokenów. Jeśli przycisk nie działa, usuń token, którego już nie używasz.
  • Token wygasa po 365 dniach bez użycia. Dopóki publikujemy artykuły, licznik startuje od nowa przy każdym wywołaniu, więc w praktyce nie wygaśnie.

3. Wpisz token w naszym panelu

Token wpisujesz u nas jeden raz, sam, w formularzu połączenia. Trafia prosto do naszego silnika publikującego, który trzyma go zaszyfrowany i nigdy nie pokazuje go z powrotem, także nam.

Formularz jest w dwóch miejscach i w obu jest ten sam. We wdrożeniu, w kroku Publikacja, klikasz kafelek Webflow, a pola rozwijają się pod siatką kafelków. To samo zrobisz później w Witrynach: otwierasz witrynę, wybierasz Podłącz: Publikowanie, a na liście platform wskazujesz Webflow. Przycisk Sprawdź i połącz testuje połączenie od razu, a wynik, razem z ewentualnym komunikatem o błędzie, pokazuje się w tym samym panelu, pod polami.

  • Wklej cały token, od pierwszego do ostatniego znaku. Nie dopisuj spacji ani cudzysłowów. Jeśli kopiowałeś go przez notatnik, sprawdź, czy nie dokleił się znak nowej linii.
  • Pole na kolekcję zostaw puste, jeśli nie wiesz, co wpisać. Spróbujemy znaleźć ją sami i zapytamy tylko wtedy, gdy nie będziemy pewni.

4. Sprawdź, że połączenie działa

Osobnego testu nie musisz uruchamiać: połączenie sprawdzamy w tej samej chwili, w której naciśniesz Sprawdź i połącz. To jedno zapytanie do Webflow, które nic nie zmienia i nic nie publikuje.

Gdy się uda, zobaczysz nazwę swojej strony, nazwę kolekcji i konkretne pole, do którego trafi treść artykułu. Przeczytaj tę nazwę pola. To jest moment, w którym wyłapiesz pomyłkę, zanim zobaczy ją Twój czytelnik.

Połączono ze stroną Kawiarnia Nowa. Kolekcja „Wpisy bloga”: treść artykułu trafia do „tresc-artykulu”, zapowiedź trafia do „zajawka”, zdjęcie główne trafia do „obrazek”.
Co ma być widoczne: Nasz ekran po udanym teście połączenia, z widoczną nazwą strony, nazwą kolekcji i nazwami pól.

Po pierwszym artykule sprawdź go w dwóch miejscach: w panelu CMS w Designerze, gdzie pojawi się nowy element kolekcji, oraz na samej stronie, pod adresem złożonym z Collection URL i adresu artykułu. Jeśli w panelu CMS artykuł jest, a na stronie go nie widać, to znaczy, że czeka na najbliższą publikację witryny: naciśnij w Webflow przycisk Publish i sprawdź ponownie.

Kiedy połączenie działa, na stronie witryny pojawia się przycisk Wyślij artykuł testowy. Publikujemy wtedy jeden krótki, wyraźnie oznaczony artykuł tym samym połączeniem, którym pójdą wszystkie następne, więc w kilka minut widzisz u siebie, że cała droga działa. Chwilę później sami go usuwamy, więc nie zostaje u Ciebie nic do sprzątania. Jeśli utkniesz, napisz na hello@justrank.it.

Szkic czy publikacja: w Webflow to dwa różne etapy

To jest jedyna rzecz w Webflow, która zaskakuje prawie wszystkich, więc warto ją przeczytać do końca. Utworzenie elementu kolekcji i pokazanie go czytelnikowi to w Webflow dwie osobne rzeczy.

  1. Etap pierwszy: element istnieje
    Artykuł jest w kolekcji i widzisz go w panelu CMS. Nikt z zewnątrz go nie widzi. W Webflow nazywa się to szkicem.
  2. Etap drugi: element jest opublikowany
    Artykuł jest oznaczony jako opublikowany i jego treść jest na żywej stronie. Tak działamy domyślnie, bo płacisz za teksty, które mają być widoczne.
  3. Etap trzeci: publikacja całej strony
    Zupełnie nowy element kolekcji potrzebuje jednej publikacji strony, żeby jego podstrona w ogóle powstała. Naciskasz wtedy Publish w Designerze, raz.

Trzeciego etapu domyślnie nie robimy za Ciebie i to jest decyzja, nie przeoczenie. Publikacja strony w Webflow wypycha na żywo wszystkie niezapisane zmiany, które masz w Designerze, łącznie z przebudową, której jeszcze nie skończyłeś. Nie chcemy tego zrobić Twojej stronie bez pytania.

Jeśli wolisz, żebyśmy publikowali stronę po każdym artykule, powiedz nam, a token musi mieć wtedy Sites ustawione na odczyt i zapis. Webflow przyjmuje jedną publikację na minutę, więc przy serii artykułów część publikacji trafi w limit i po prostu poczeka na następną.

Możesz też poprosić o odwrotność: żebyśmy zostawiali każdy artykuł jako szkic, a Ty publikujesz go ręcznie po przeczytaniu. Wtedy nic nie pojawi się na stronie samo.

Produkty, jeśli prowadzisz sklep

Jeśli Twoja strona ma Webflow Ecommerce, możemy dodatkowo czytać listę produktów, żeby artykuły mogły się do nich odwoływać nazwą, ceną i linkiem. To jest osobna, opcjonalna rzecz.

Jeśli sklepu nie masz, nic się nie psuje. Test połączenia napisze wtedy wprost, że synchronizacja produktów jest niedostępna, i pokaże połączenie jako sprawne. Strona bez sklepu jest zupełnie normalnym przypadkiem.

Do czytania produktów token musi mieć Ecommerce ustawione co najmniej na odczyt. Jeśli tego nie zaznaczysz, powiemy, że synchronizacja produktów jest niedostępna, i to też nie jest błąd.

Adresy produktów składamy z adresu Twojej strony i adresu produktu. Jeśli zmieniałeś domyślny adres strony produktu w Webflow, powiedz nam, jaki jest teraz, bo inaczej linki w artykułach będą prowadzić w puste miejsce.

Czego dotykamy, a czego nie

Co robimy

  • Odczytujemy listę Twoich kolekcji i nazwy pól w tej jednej, którą wskazałeś.
  • Dodajemy nowe elementy do tej jednej kolekcji.
  • Aktualizujemy te elementy, które sami dodaliśmy, gdy odświeżamy artykuł.
  • Czytamy produkty, jeśli masz sklep i pozwoliłeś na to w uprawnieniach tokenu.

Czego nie robimy

  • Nie dotykamy projektu strony, stron, komponentów ani stylów.
  • Nie usuwamy niczego. Ani elementów kolekcji, ani pól, ani kolekcji.
  • Nie ruszamy innych kolekcji niż ta jedna wskazana.
  • Nie publikujemy całej strony, dopóki wyraźnie o to nie poprosisz.

Gdy coś nie działa

Poniżej są realne komunikaty, które zobaczysz, i to, co za każdym z nich stoi.

Co widzisz Co się dzieje i co zrobić
Webflow nie przyjął tego tokenu API. Najczęściej token jest niekompletny, bo przy kopiowaniu ucięło mu koniec, albo dokleiła się spacja. Rzadziej: token pochodzi z innej strony niż ta, którą chcesz podłączyć, albo ktoś go w Webflow usunął. Wygeneruj nowy i wklej całość jeszcze raz.
Ten token nie ma uprawnień, których potrzebujemy. Przy generowaniu tokenu CMS zostało na tylko odczyt albo na brak dostępu. Nie da się tego zmienić w istniejącym tokenie. Wygeneruj nowy z CMS ustawionym na odczyt i zapis.
Nie umiemy rozpoznać, która kolekcja jest blogiem. Albo żadna kolekcja nie wygląda na blog, albo wygląda ich kilka i wybranie na chybił trafił skończyłoby się artykułem w kolekcji z zespołem. Wypiszemy wszystkie, które znaleźliśmy. Podaj nam Collection URL tej właściwej.
Kolekcja nie ma pola typu Rich text. Nie ma gdzie umieścić treści artykułu. Dodaj w Designerze pole typu Rich text do tej kolekcji, albo wskaż nam kolekcję, która je ma. Nie dodamy pola za Ciebie, bo to zmiana w Twoim projekcie.
Kolekcja ma kilka pól Rich text i żadne nie wygląda na treść wpisu. Nie zgadujemy, bo artykuł mógłby wylądować w ramce bocznej zamiast w treści. Podaj nam nazwę tego pola, do którego ma trafiać tekst.
Kolekcja ma wymagane pola, których nie umiemy wypełnić. Wypiszemy je z nazwy. Typowo jest to Autor, Kategoria albo Data. Odznacz wymagalność w Designerze, albo podaj nam jedną stałą wartość dla każdego z nich, a będziemy ją wpisywać.
Webflow odrzucił artykuł. Zwykle jedno z pól nie zgadza się z tym, czego kolekcja oczekuje: adres artykułu jest już zajęty przez inny element, pole ma ograniczoną długość, albo pole wyboru przyjmuje tylko z góry ustaloną listę wartości. Napisz do nas, mamy w logu dokładną odpowiedź Webflow.
Artykuł widać w panelu CMS, ale nie ma go na stronie. To ten trzeci etap. Artykuł czeka na najbliższą publikację witryny: zupełnie nowy element potrzebuje jednej publikacji całej strony, żeby jego podstrona powstała. Naciśnij Publish w Webflow i sprawdź ponownie.
Artykuł jest opublikowany, ale jego adres odpowiada błędem 404. To nie jest przypadek z wiersza wyżej: tam wystarczy jedna publikacja, tu sama publikacja nic nie da, bo nie ma czego pokazać. Otwórz w Designerze, w panelu Pages, pod nagłówkiem CMS Collection pages, stronę szablonu tej kolekcji i sprawdź dwie rzeczy. Po pierwsze, czy ta strona ma treść podpiętą do pól kolekcji: co najmniej nagłówek z polem nazwy i element Rich text z polem treści. Kolekcja założona od zera ma tę stronę pustą. Po drugie, otwórz jej ustawienia i w Publish settings sprawdź, czy publikacja tej strony jest włączona, bo przy wyłączonej Webflow w ogóle nie tworzy podstron dla elementów tej kolekcji. Potem naciśnij Publish. Nie zrobimy tego za Ciebie: to zmiana w Twoim projekcie i API na nią nie pozwala.
Webflow nie chce opublikować witryny i pisze o limicie stron. Darmowy plan Starter daje najwyżej dwie strony statyczne, a witryna złożona z szablonu ma ich zwykle więcej. Dopóki tak jest, Webflow odmawia publikacji całej witryny: przez API kodem STATIC_PAGE_LIMIT_EXCEEDED, a w Designerze komunikatem o limicie stron. Strony ustawione jako szkic też się liczą, strony szablonów kolekcji nie. Usuń nadmiarowe w Designerze, w panelu Pages, bo ani my, ani API ich nie usuniemy, albo przejdź na płatny plan strony, który tego limitu nie ma. Bez jednej udanej publikacji artykuły nie pojawią się na stronie w ogóle.
Webflow odpowiada, że struktura kolekcji zmieniła się od ostatniej publikacji. Pełna odpowiedź brzmi „Conflict: The collection structure changed since the last publish”, a kod odpowiedzi to 409. Ktoś zmienił budowę kolekcji w Designerze i nie opublikował po tym witryny, a Webflow do czasu publikacji odrzuca wszystko, co przychodzi przez API. Naciśnij Publish w Webflow i daj nam znać, a powtórzymy wysyłkę.
Webflow nas w tej chwili ogranicza. Webflow przyjmuje 60 zapytań na minutę na planie Starter i 120 na planach Premium oraz Ecommerce. Plan Basic nie ma API treści w ogóle. Odczekamy i spróbujemy jeszcze raz, nic nie ginie. Jeśli zdarza się to stale, to znak, że plan jest ciasny na tempo publikacji.
Połączenie działało, a po długiej przerwie przestało. Token wygasa po 365 dniach bez ani jednego użycia. Wygeneruj nowy tą samą drogą i wklej go u nas.
Synchronizacja produktów jest niedostępna. Albo strona nie ma Webflow Ecommerce, albo token nie ma uprawnienia Ecommerce. To nie jest awaria połączenia: artykuły publikują się normalnie, po prostu nie mają skąd wziąć listy produktów.

Jak nas odłączyć

Odcięcie nas od strony zajmuje kilkanaście sekund i nie wymaga kontaktu z nami.

  1. Otwórz ustawienia strony ikoną koła zębatego.
  2. Wybierz Apps & integrations w lewym menu.
  3. Zjedź do sekcji API access i usuń token, który nam dałeś.

Od tej chwili nie mamy do strony żadnego dostępu. Artykuły, które już opublikowaliśmy, zostają u Ciebie, bo są Twoje. Daj nam potem znać, żebyśmy przestali próbować i nie zasypywali Cię komunikatami o zerwanym połączeniu.