Wyczesane Łapy — groomer z własną rezerwacją
Salon na krakowskich Klinach miał stronę na WordPressie, która padała i w końcu została zhakowana. Powstała od zera: lekka strona pisana ręcznie i rezerwacja online, która zapisuje wizyty prosto w Kalendarzu Google groomerki — bez Booksy, bez abonamentu i bez prowizji od wizyty.
01 — Wyzwanie
Telefon, który dzwonił w trakcie strzyżenia
Wyczesane Łapy to salon groomerski na Klinach: kąpiel, strzyżenie, trymowanie, higiena, bezinwazyjne czyszczenie zębów — dla psów, kotów i królików. Stara strona stała na WordPressie z trzema wtyczkami do rezerwacji i formularzy. Padała, a w końcu ktoś ją zhakował.
A rezerwacja przez telefon ma swój problem: groomerka z mokrym psem na stole nie odbierze. Klient, który nie dodzwoni się raz, często dzwoni już do następnego salonu z mapy.
Cel: rezerwacja online, która niczego nie zmienia w pracy salonu. Groomerka nadal patrzy w Kalendarz Google w telefonie, a wizyty z internetu pojawiają się w nim same — obok tych z telefonu, urlopów i wizyt u lekarza. Bez nowego systemu do nauki, bez miesięcznego abonamentu i bez prowizji od każdej wizyty.
Materiał
Różowy szyld i kokardki na pożegnanie
Paleta strony wzięła się z prawdziwego salonu: różowy szyld „Fryzjer dla psów i kotów”, czarny kontuar, marmur. Zdjęcia z dawnej strony przeszły do nowej, a kadry, których brakowało (kąpiel, etapy wizyty), uzupełniłem fotografiami z Pexels z licencją komercyjną. Żadna z nich nie udaje „naszego salonu”.
02 — Proces
Od zhakowanego WordPressa do kalendarza, który sam się wypełnia
Najpierw trzeba było uratować treść i adresy ze starej strony, dopiero potem projektować.
-
01
Ratunek
Treść wyciągnięta z archiwum, kod WordPressa do kosza
Serwer z zainfekowanymi plikami już nie istniał, więc treść i zdjęcia przyszły z zapisu strony w Wayback Machine. Każdy plik przeszedł skan na złośliwy kod. Został tylko tekst i obrazki, a stare adresy z WordPressa przekierowują (301) na nowe podstrony, żeby salon nie stracił pozycji w Google.
- skan bezpieczeństwa
- przekierowania 301
- zero kodu z WP
-
02
Kierunek
Gest marki: groomerka czesze
W hero dziewięć falujących linii sierści przeczesuje grzebień, który jedzie razem z przewijaniem — za nim sierść jest gładka, przed nim jeszcze skołtuniona. Ten sam grzebień zszywa sekcje strony, a wyróżnione słowo w nagłówku dostaje odcisk łapki. Kroje Bricolage Grotesque i Figtree, kolor z szyldu salonu.
- sierść przeczesywana scrollem
- szew z zębów grzebienia
- akcent z łapką
-
03
Wybór z klientką
Dwa style na tym samym kodzie
Nowy wygląd mocno odbiegał od starej strony, więc zbudowałem obok niego wierną replikę dawnego motywu. Panel w rogu ekranu przełączał style, kroje, kolor akcentu, grzebień i sierść niezależnie — salon mógł porównać wszystko na prawdziwych podstronach, zamiast na makiecie.
- nowy vs klasyczny
- przełączniki na żywo
-
04
Rezerwacja
Backend na koncie Google salonu
Zamiast płatnej platformy — Google Apps Script. Kalendarz groomerki jest jedynym źródłem prawdy o zajętości, usługi, godziny i ustawienia leżą w zwykłym Arkuszu Google, a maile wychodzą z konta salonu. Wszystko, co wpisane w kalendarzu, blokuje czas w formularzu.
- Kalendarz Google
- Arkusz jako panel
- maile z konta salonu
-
05
Testy
54 testy, zanim pierwszy klient kliknął „Zarezerwuj”
32 testy logiki (sloty, strefa czasowa ze zmianą czasu, walidacja, podpisy linków) i 22 testy przepływów backendu na atrapie usług Google. Przeglądarka w trybie demo liczy terminy tym samym plikiem co serwer, a test pilnuje, żeby kopie się nie rozjechały. Pełna rezerwacja, zmiana i odwołanie przeklikane w WebKicie, Chromium i Firefoksie na dziesięciu urządzeniach.
- jedna logika dla serwera i strony
- atrapa Google
- 3 silniki przeglądarek
-
06
RODO i bezpieczeństwo
Polityka prywatności opisuje to, co robi kod
Zdjęcia, kroje i skrypty z własnego serwera, a nagłówek CSP pozwala łączyć się wyłącznie z backendem rezerwacji. Mapa Google ładuje się dopiero po zgodzie. Wizyty starsze niż 12 miesięcy co noc znikają z kalendarza, bo tyle obiecuje polityka. Podstawą rezerwacji jest umowa, a nie wymuszona „zgoda”.
- CSP
- retencja 12 mies.
- mapa po zgodzie
03 — Rezerwacja od strony klienta
Cztery kroki i żadnego zakładania konta
Klient wybiera pupila i usługę, dzień i godzinę, wpisuje kilka słów o sobie i psie — i ma wizytę. Obok przez cały czas wypełnia się podsumowanie z orientacyjną ceną. Zrzuty z formularza w trybie demo, na prawdziwych usługach i cenach salonu.
Pupil, potem usługa
Cena i czas zależą od wielkości psa, więc najpierw kafelek: od szczeniaka (z muszką) po dużego psa, kot i królik. Pod kafelkiem przykładowe rasy, potem usługi z ceną i czasem trwania. Link „Umów” z cennika przeskakuje ten krok — przychodzi z wybraną usługą.
Tylko godziny, które się zmieszczą
Kropka przy dniu znaczy „są wolne godziny”. Formularz sam otwiera pierwszy taki dzień. Godzina to początek wizyty — a pokazują się wyłącznie te, po których cała usługa zmieści się przed zamknięciem i nie wejdzie na nic w kalendarzu.
Formularz, który łapie literówki
„anna@gmial.com”? Formularz podpowie „czy chodziło o gmail.com?” i poprawi jednym kliknięciem — bo potwierdzenie z literówką w adresie nigdy nie dojdzie. Uwagi o psie dopisują się klikiem: kołtuny, boi się suszarki, pierwszy raz u groomera.
Podsumowanie z „Zmień” przy każdym punkcie
Usługa, termin, pupil, kontakt i uwagi w jednym miejscu. Każdy punkt wraca do swojego kroku bez gubienia reszty. Płatność na miejscu — strona nie zbiera żadnych danych płatniczych.
Mail z linkiem do wizyty
Ekran sukcesu dodaje wizytę do kalendarza Google klienta jednym przyciskiem. W mailu jest link do strony wizyty: bez logowania i bez konta, ale z podpisem kryptograficznym — nikt nie zgadnie adresu cudzej wizyty.
Sam przesuwa, do 24 h przed
Z linku klient zmienia termin (ten sam kalendarz, tylko wolne godziny) albo odwołuje wizytę. Gdy do wizyty zostało mniej niż 24 godziny, zamiast przycisków widzi numer salonu — ostatnią chwilę lepiej omówić przez telefon.
04 — Zobacz, jak to działa
Dopisz wpis w kalendarzu i patrz, co zostaje
Po lewej dzień groomerki w Kalendarzu Google, po prawej godziny, które formularz pokaże klientowi. Zmień usługę albo dopisz wizytę u lekarza — tak samo liczy serwer salonu.
Reguła z serwera salonu: start co 30 minut, wizyta musi skończyć się do zamknięcia i nie może nachodzić na żaden wpis — także prywatny, bo kalendarz nie rozróżnia „lekarza” od „wizyty”. Usługi i czasy trwania z arkusza salonu, wizyty w kalendarzu są przykładowe.
05 — Szczegóły
Krok „Kiedy?” pod lupą
- Kroki, które można odhaczać
Usługa → Termin → Twoje dane → Podsumowanie. Zrobiony krok dostaje ptaszek i da się do niego wrócić kliknięciem.
- Kropka = są wolne godziny
Dni bez kropki nie są klikalne. Kalendarz obsługuje się też samą klawiaturą — strzałkami po dniach, jak w aplikacjach systemowych.
- Przed i po południu
Godziny pogrupowane w dwie kolumny pór dnia. Dzięki temu klient szybciej trafia w swoją, zamiast przewijać listę od 9:00 do 16:00.
- Pasek „Dalej” zawsze pod ręką
Przyklejony u dołu na każdej szerokości ekranu, z jednym zdaniem o tym, co już wybrano: „Kompleksowa usługa ze strzyżeniem · czw 12.11, 10:30”.
- Podsumowanie wypełnia się na żywo
Pupil, usługa, groomerka, termin, czas i cena orientacyjna — z uczciwym dopiskiem, że dokładną kwotę ustala się na miejscu, zależnie od stanu sierści.
- Wolisz porozmawiać?
Pod podsumowaniem stoi numer salonu i godziny, o których ktoś odbierze. Formularz nie udaje, że jest jedyną drogą.
06 — Rezerwacja od strony salonu
Salon nie uczy się żadnego nowego programu
Całą obsługę rezerwacji robi się w zwykłej aplikacji Kalendarz Google — w telefonie albo na komputerze. Co 15 minut skrypt sprawdza, co się w nim zmieniło, i sam pisze do klientów.
Urlop? Wpis w kalendarzu
Groomerka dodaje „Urlop” albo „Lekarz” — ten czas od razu znika z rezerwacji online. Wpis całodniowy zdejmuje cały dzień. Żadnych maili do nikogo.
Przesunięcie przeciągnięciem
Wizytę przeciąga się na inną godzinę jak każde wydarzenie. W ciągu 15 minut klient dostaje jednego maila z nowym terminem i nowym linkiem.
Odwołanie jednym dopiskiem
„ODWOŁANA – ” na początku tytułu: wizyta robi się czerwona, termin wraca do puli online, a klient i salon dostają maila. Ślad zostaje w kalendarzu.
Wizyty z telefonu też w systemie
Wizyta umówiona przez telefon to zwykły wpis w kalendarzu. Wystarczy dopisać w opisie linię z e-mailem klienta — dostanie przypomnienie i link do zmiany, jak każdy z internetu.
Przypomnienie dzień przed
Codziennie o ustalonej godzinie skrypt wysyła przypomnienia o jutrzejszych wizytach, z linkiem do zmiany. Mniej pustych okienek po psach, które „wypadły z głowy”.
Arkusz zamiast panelu admina
Usługi, ceny, czasy trwania, godziny otwarcia, groomerki i ustawienia to zakładki zwykłego Arkusza Google. Zmiana działa od razu, bez programisty. Druga groomerka? Jeden wiersz — w formularzu pojawi się krok „Do kogo?”.
Dwie osoby, jeden termin
Dwie klientki widzą tę samą wolną 10:30 i obie klikają „Zarezerwuj”. Serwer przyjmuje zapisy po kolei, pod blokadą, i przed wpisaniem wizyty sprawdza kalendarz jeszcze raz — już bez pamięci podręcznej. Jedna rezerwacja przechodzi, druga dostaje „Ten termin właśnie został zajęty” i wraca do wyboru godziny.
Przed spamem chronią ukryte pole, którego człowiek nie widzi, a bot wypełnia, i limit trzech rezerwacji na godzinę z jednego maila albo telefonu. Do tego walidacja, która odróżnia imię od „aaa” i prawdziwy numer od „123456789”.
Link w mailu zamiast konta klienta
Nikt nie chce zakładać konta u groomera. Każda wizyta ma swój adres z podpisem, który zna tylko serwer salonu. Z niego klient widzi status, zmienia termin albo odwołuje wizytę — a gdy zostało mniej niż 24 godziny, dostaje numer telefonu zamiast przycisków.
Galeria sekcji
Siedem podstron, jeden grzebień
Zrzuty z działającej strony wyczesanelapy.pl — najedź, żeby przybliżyć.
Cała strona
Od pierwszego ekranu do stopki
Strona główna salonu: hero z sierścią, usługi, cennik na teksturze dzianiny, zalety, pasmo kąpieli, salon „widziany z kanapy”, wolny termin w minutę i opinie. Bez GSAP-a i bibliotek — cały ruch to CSS i jedna pętla w JavaScripcie. Przewijaj — ramka przesuwa się razem z Tobą.
07 — Cennik i opinie
„Umów” przy każdej pozycji cennika
Cennik ma zakładki dla każdego rodzaju pupila, a przy każdej usłudze stoi link „Umów”. Prowadzi on prosto do rezerwacji z wybranym już psem i usługą — klient od razu ląduje w kalendarzu, bez klikania tego samego drugi raz.
Ceny są też w kodzie strony, a nie tylko w formularzu, więc Google widzi je jako katalog usług salonu.
Opinie, w których pierwszy jest pupil
Dwadzieścia wybranych opinii z Google na torze kart. Na każdej karcie najpierw pupil: jego imię i medalion z ikoną gatunku, który wisi na kółku nad krawędzią karty i kołysze się, gdy tor wjeżdża w kadr. Opiekun jest dopiero na dole. Filtr Psy / Koty pokazuje liczniki, a postęp przewijania to ślad łapek.
Nazwiska są skrócone do inicjału, a karty siedzą w kodzie strony, więc liczą się dla Google także bez JavaScriptu.
08 — Na telefonie
Rezerwacja jedną ręką
Psa umawia się zwykle z telefonu, nieraz ze smyczą w drugiej ręce. Kafelki pupili układają się w trzy kolumny, kalendarz zajmuje całą szerokość, a „Dalej” i „Wstecz” są zawsze u dołu ekranu, w zasięgu kciuka.
Pole telefonu otwiera klawiaturę numeryczną, a na reszcie strony przyklejony pasek ma dwa przyciski: „Zadzwoń” i „Umów wizytę”. Płynność zmierzona na symulowanym słabszym telefonie: 60 klatek na sekundę.
09 — Co dostał salon
Kalendarz, który sam się wypełnia
Rezerwacje przez całą dobę
Klient umawia psa wieczorem z kanapy, a rano wizyta czeka w Kalendarzu Google groomerki — z rasą, uwagami i telefonem.
Bez abonamentu i prowizji
System działa na koncie Google salonu. Nie ma platformy pośredniczącej, która co miesiąc wystawia fakturę albo bierze procent od wizyty.
Nic nowego do nauki
Urlopy, przesunięcia i odwołania robi się w zwykłym kalendarzu, a ceny i godziny w arkuszu. Maile do klientów wychodzą same.
Strona, która nie padnie
Zamiast WordPressa z wtyczkami — statyczne pliki na Cloudflare, nagłówki bezpieczeństwa i polityka prywatności zgodna z tym, co robi kod.
Pytania
Rezerwacja online na stronie — najczęstsze pytania
Czy do rezerwacji online potrzebuję Booksy albo innej platformy?
Nie. W Wyczesanych Łapach rezerwacja działa na Kalendarzu, Arkuszu i Apps Script z konta Google salonu. Jeśli już korzystasz z Booksy i jest Ci z nim dobrze, strona może do niego prowadzić — tak jak u Hair & Beauty Concept.
Co z wizytami, które klienci umawiają przez telefon?
Wpisujesz je do kalendarza jak dotąd i od razu blokują ten czas w formularzu online. Jeśli w opisie dopiszesz e-mail klienta, dostanie on przypomnienie i link do zmiany terminu, tak samo jak przy rezerwacji z internetu.
Czy klient może sam przesunąć albo odwołać wizytę?
Tak, z linku w mailu, bez zakładania konta. Granicę ustalasz sama w arkuszu — w Wyczesanych Łapach to 24 godziny przed wizytą. Po niej strona pokazuje numer telefonu salonu zamiast przycisków.
Ile kosztuje strona z własnym systemem rezerwacji?
Strony zaczynają się od 1 500 zł netto. System rezerwacji z kalendarzem, mailami i stroną wizyty to większy zakres niż wizytówka z linkiem do Booksy — dlatego każdy projekt wyceniam indywidualnie. Zobacz cennik albo poproś o darmową wycenę.
Masz salon albo gabinet? Niech wizyty same wpadają do kalendarza.
Strona, cennik i rezerwacja online na Twoim kalendarzu — bez abonamentu za system. Spotkamy się w Krakowie albo online, jak wolisz.