Jak odciążyliśmy zakład stolarski — konfigurator schodów 3D + xCMS 4

2. Kontekst: dlaczego schody potrzebują konfiguratora

Sprzedaż schodów na wymiar ma kilka cech, które sprawiają, że zwykły formularz kontaktowy jest niewystarczający.

2.1. Produkt jest geometryczny, a nie katalogowy

Schody nie mają jednego rozmiaru. Ten sam model może mieć 15, 16 albo 17 podniesień, inny spocznik, inny kierunek skrętu i inną szerokość biegu. Klient nie kupuje „schodów”, tylko konkretną bryłę, która musi zmieścić się w jego domu. Jeśli handlowiec nie zna geometrii, pierwsza rozmowa zamienia się w serię pytań: „Jaka jest wysokość kondygnacji? A jaki otwór w stropie? A gdzie jest ściana? A w którą stronę ma być skręt?”.

2.2. Cena zależy od wielu zmiennych naraz

Na cenę wpływa jednocześnie gatunek drewna, grubość stopnia, powierzchnia stopni, obecność podstopnic, długość policzków, typ balustrady, liczba stron balustrady, wykończenie, dodatki i montaż. Klient nie jest w stanie sam tego oszacować, a handlowiec nie powinien liczyć tego ręcznie przy każdym zapytaniu. Ręczna wycena jest wolna, podatna na pomyłki i trudna do powtórzenia.

2.3. Klient nie potrafi wyobrazić sobie efektu

Rysunek techniczny jest precyzyjny, ale dla większości klientów nieczytelny. Zdjęcie z katalogu pokazuje piękne schody, ale nie te schody — w innym wnętrzu, o innym kolorze i innym otworze w stropie. Bez wizualizacji klient podejmuje decyzję „na wyczucie”, a potem dziwi się, że efekt różni się od wyobrażenia. Wizualizacja 3D nie zastępuje pomiaru, ale potrafi zatrzymać większość nieporozumień na etapie wyboru.

2.4. Zapytania przychodzą bez danych

Typowy formularz kontaktowy daje imię, e-mail i tekst „Proszę o wycenę schodów”. Handlowiec musi oddzwonić, dopytać, zrobić notatki i dopiero potem zacząć liczyć. To kilka cennych minut przy każdym zapytaniu, a przy większym wolumenie — godziny tygodniowo. Konfigurator odwraca tę kolejność: klient najpierw podaje dane w ustrukturyzowanej formie, a handlowiec dostaje gotową kartę konfiguracji.

2.5. Rynek nie kończy się na jednym języku

Warsztaty przygraniczne i firmy z ambicjami eksportowymi obsługują klientów w kilku językach. Tłumaczenie formularza to za mało — nazwy materiałów, wykończeń, balustrad i dodatków też muszą być zrozumiałe. Konfigurator ma wbudowane słowniki polskie, angielskie i niemieckie, a treści zgody RODO i komunikatu po wysłaniu można edytować osobno dla każdego języka.

Konfigurator nie jest więc „ładnym dodatkiem do strony”. Jest narzędziem, które przenosi ciężar pierwszej rozmowy z handlowca na interfejs — ale robi to w sposób, który klientowi daje korzyść, a nie tylko firmie.

3. Cele i zasady projektowe

Projekt nie powstał jako „formularz z suwakami”. Od początku był budowany wokół konkretnych celów biznesowych i doświadczeniowych.

3.1. Osiem celów, które przyświecały projektowi

1. Skrócić drogę do wyceny. Klient ma zobaczyć sensowną kwotę w kilka minut, bez czekania na telefon.
2. Zebrać kompletne dane. Każde zapytanie ma zawierać kształt, wymiary, materiały, balustradę, dodatki i wycenę — nie tylko adres e-mail.
3. Uczynić cenę zrozumiałą. Klient ma widzieć, z czego wynika kwota, a nie tylko jedną tajemniczą sumę.
4. Zadbać o ergonomię. Konfigurator ma edukować i ostrzegać, zanim schody trafią do produkcji.
5. Nie blokować sprzedaży. Ostrzeżenie o normie ma pomagać, a nie uniemożliwiać wysłanie zapytania.
6. Dać warsztatowi kontrolę. Ceny, materiały, normy, presety i treści mają być edytowalne bez programisty.
7. Działać na telefonie. Większość klientów przegląda oferty na urządzeniach mobilnych, więc konfigurator nie może być „desktopowy”.
8. Być wiarygodnym. Żadna cena z formularza nie może być przyjęta od klienta; system zawsze liczy ją ponownie po swojej stronie.

3.2. Zasady projektowe, które widać w interfejsie

• Prawda o cenie. Wycena jest orientacyjna i tak jest nazwana. Nie udajemy, że znamy cenę końcową przed pomiarem.
• Minimum tarcia. W trybie szybkim klient podaje wysokość kondygnacji i szerokość biegu — resztę system dobiera rozsądnie. Szczegóły techniczne są schowane w trybie zaawansowanym.
• Edukacja zamiast karania. Checklista norm pokazuje, co jest nie tak i jak to poprawić. Nie blokuje wyceny ani wysłania zapytania.
• Jedna decyzja na raz. Sześć kroków zamiast jednego długiego formularza. Każdy krok ma nagłówek, krótkie wyjaśnienie i czytelne kafelki wyboru.
• Natychmiastowa reakcja. Cena, normy, podsumowanie kroków i scena 3D reagują na zmianę. Klient nie musi klikać „przelicz”.
• Wizualizacja jako argument sprzedażowy. 3D nie jest ozdobą; pokazuje materiał, balustradę, szkło, LED i zabudowę w kontekście.
• Panel dla handlowca, nie dla informatyka. Nazwy pól, podpowiedzi i podglądy są zrozumiałe bez znajomości kodu.
• Bezpieczeństwo od początku. Token sesji, honeypot, limit zapytań i walidacja są częścią standardu, a nie dodatkiem po fakcie.

3.3. Czego świadomie nie zrobiono

• Nie zrobiono sklepu z koszykiem. Schody na wymiar nie są produktem, który można kupić jednym kliknięciem bez pomiaru. Checkout pozostaje systemowym procesem zamówienia po akceptacji oferty.
• Nie zrobiono fotorealistycznego renderu. Scena jest czysta, czytelna i szybka. Chodzi o zrozumienie bryły i materiałów, nie o reklamową fotografię.
• Nie zablokowano niezgodnych konfiguracji. Czasem klient ma nietypowe warunki i chce porozmawiać. Ostrzeżenie jest lepsze niż ściana.
• Nie ukryto ceny za „poproś o ofertę”. Kwota orientacyjna jest widoczna od razu, bo to jedna z głównych wartości narzędzia.
• Nie uzależniono działania od zewnętrznych serwerów. three.js jest dołączony lokalnie, więc wizualizacja nie zależy od CDN.

4. Ścieżka klienta od pierwszej wizyty do zapytania

Wyobraźmy sobie typowego klienta: remontuje dom, ma projekt wnętrza lub właśnie go tworzy, wie, że chce schody drewniane, ale nie zna się na technice. Trafia na stronę warsztatu, widzi duży model 3D i przycisk „Konfigurator schodów”. Co się dzieje dalej?

4.1. Pierwsze 60 sekund

Klient nie musi nic wiedzieć. Startowa konfiguracja jest już sensowna: domyślne wymiary, domyślne drewno, domyślna balustrada i od razu policzona wycena. To ważne, bo pusty formularz paraliżuje. Zamiast pytać „od czego zacząć?”, klient widzi gotowe schody i może je zmieniać. Każda zmiana natychmiast pokazuje efekt — to właśnie zamienia przeglądanie w zabawę, a zabawę w decyzję.

4.2. Moment, w którym pojawia się zaufanie

Zaufanie nie rodzi się z logo ani z opinii. Rodzi się w momencie, gdy klient zmienia balustradę z drewnianej na szklaną i widzi, że cena rośnie, a scena 3D pokazuje prawdziwe tafle szkła, a nie „pudełka”. Albo gdy przesuwa wysokość kondygnacji i checklista mówi: „prześwit nad głową 207 cm (min. 205)” — czyli wszystko gra. Albo gdy widzi, że cena składa się z pozycji, które potrafi nazwać: stopnie, policzki, balustrada, montaż. Wtedy konfigurator przestaje być formularzem, a staje się doradcą.

4.3. Moment, w którym klient jest gotowy

Przycisk „Podsumowanie i zapytanie” jest widoczny przez cały czas, ale nie krzyczy. Klient klika go wtedy, gdy uzna, że konfiguracja jest wystarczająco bliska. Na podsumowaniu widzi jeszcze raz swoją konfigurację i wycenę, obok formularza kontaktowego. To ostatni moment na korektę — i jednocześnie pierwszy moment, w którym firma dostaje pełne dane.

5. Sześć kroków konfiguracji — szczegółowo

Panel konfiguracji jest podzielony na sześć rozwijanych kroków. Każdy krok ma numer, tytuł, aktualną wartość w nagłówku i krótkie zdanie wyjaśniające. Dzięki temu klient zawsze wie, gdzie jest i co jeszcze może ustawić.

5.1. Krok 01 — kształt schodów

Co widzi klient: cztery duże kafelki z ikonami i opisami:

• Proste — jednobiegowe, najprostsze i najtańsze;
• L ze spocznikiem — skręt 90° z podestem, wygodny i przestronny;
• L z winderami — skręt 90° na stopniach trapezowych, oszczędza miejsce;
• U ze spocznikiem — zawrót 180°, idealny przy wąskiej klatce.

Dla kształtów ze skrętem pojawia się wybór kierunku: lewo albo prawo. Dla schodów prostych ten wybór nie ma sensu, więc jest ukryty.

Co dzieje się pod spodem: zmiana kształtu uruchamia generator geometrii. System buduje nowe biegi, spocznik lub windery, otwór w stropie i obrys stropu, a następnie przelicza ilości materiałów i cenę. Scena 3D dostaje nową bryłę. To nie jest podmiana obrazka — to nowy model.

Dlaczego tak: kształt jest najważniejszą decyzją, bo determinuje geometrię, cenę i dopasowanie do domu. Dlatego jest pierwszy, ma największe kafelki i najprostsze opisy. Klient nie musi znać słowa „winder” — wystarczy, że widzi, iż to wariant oszczędzający miejsce.

5.2. Krok 02 — wymiary

Co widzi klient: przede wszystkim dwa podstawowe pola: wysokość kondygnacji (od posadzki do posadzki) i szerokość biegu. Dodatkowo, dla schodów ze skrętem, liczbę stopni przed zakrętem. W trybie zaawansowanym pojawiają się pozostałe parametry techniczne: liczba podniesień, głębokość stopnia, grubość stropu, długość i szerokość otworu oraz grubość stopnia.

Co dzieje się pod spodem: każdy parametr ma zdefiniowany zakres: minimum, maksimum, krok i wartość domyślną. System przycina wartość do zakresu, więc klient nie wpisze przypadkowo 500 cm wysokości, jeśli produkcja obsługuje 200–400 cm. Po każdej zmianie przelicza wysokość podniesienia, liczbę stopni, głębokość, powierzchnie, długości i cenę.

Dlaczego tak: klient nie powinien zaczynać od dziewięciu pól technicznych. Wysokość i szerokość wystarczą, żeby zobaczyć sensowny model. Reszta jest dobierana automatycznie albo dostępna dla tych, którzy chcą mieć kontrolę. To realizuje zasadę „minimum tarcia”.

Dobór stopni w tym kroku: nad wymiarami pojawiają się trzy presety: komfortowy, optymalny i oszczędny. Klient może kliknąć jeden z nich i system sam ustawi liczbę podniesień oraz głębokość stopnia. To ogromne uproszczenie dla osób, które nie znają relacji między wysokością a głębokością.

Inteligentne zachowanie: dopóki klient nie zmienił ręcznie liczby podniesień ani głębokości, zmiana wysokości kondygnacji automatycznie przelicza preset. Jeśli jednak klient świadomie ustawił własne wartości, system nie nadpisuje jego decyzji. To drobiazg, który ma duże znaczenie dla poczucia kontroli.

5.3. Krok 03 — konstrukcja

Co widzi klient: przełącznik „Podstopnie pełne” oraz — w trybie zaawansowanym — przełączniki otoczenia 3D i stropu. Domyślnie schody są otwarte, nowoczesne, bez pełnych podstopnic; włączenie przełącznika zamyka stopnie.

Co dzieje się pod spodem: włączenie podstopnic dodaje do sceny 3D pionowe elementy i dolicza osobną pozycję do wyceny. Wyłączenie otoczenia upraszcza scenę; wyłączenie stropu chowa płytę i otwór, co bywa wygodne przy oglądaniu samej konstrukcji.

Dlaczego tak: „otwarte czy zamknięte” to jedna z najczęstszych decyzji estetycznych, a jednocześnie realna różnica w cenie i wizualizacji. Klient powinien móc ją podjąć jednym kliknięciem, bez wchodzenia w techniczne szczegóły.

5.4. Krok 04 — materiał i kolor

Co widzi klient: trzy grupy wyboru:

• Gatunek drewna — domyślnie dąb, buk, jesion, sosna, orzech; każdy z próbką koloru, krótkim opisem i ceną za metr sześcienny;
• Wykończenie — naturalne, olej, lakier, ciemna bejca z lakierem; każdy z opisem i ceną za metr kwadratowy;
• Kolor — opcjonalna grupa z próbkami; domyślnie jedna opcja „Standard (bez dopłaty)”, ale można dodać kolejne kolory.

Co dzieje się pod spodem: gatunek drewna wpływa na cenę stopni, policzków i podstopnic przez cenę za metr sześcienny oraz zapas materiału. Wykończenie wpływa na cenę przez powierzchnię do wykończenia. Kolor może być doliczany kwotowo albo za metr kwadratowy. Scena 3D zmienia odcień, fakturę, połysk i przezroczystość wybranych materiałów.

Dlaczego tak: materiał to decyzja emocjonalna i finansowa jednocześnie. Klient chce wiedzieć, jak wygląda orzech, ile kosztuje dąb i czym różni się olej od lakieru. Kafelki z próbkami i opisami odpowiadają na te pytania bez potrzeby kontaktu ze sprzedawcą.

Ważny szczegół: mnożnik koloru w podglądzie 3D służy tylko do wizualizacji — nie wpływa na cenę. Cena koloru wynika z jego własnej stawki (kwotowej lub za metr kwadratowy). To rozdzielenie jest ważne, żeby podgląd nie sugerował nieistniejących dopłat.

5.5. Krok 05 — balustrada

Co widzi klient: cztery warianty: brak balustrady, tralki drewniane, tralki metalowe, szkło hartowane. Do tego wybór stron: jedna albo obie. Każdy wariant ma krótki opis, próbkę materiału i cenę za metr bieżący.

Co dzieje się pod spodem: system liczy długość balustrady z rzeczywistych krawędzi stopni i dodaje odcinek do wysokości piętra. Jeśli wybrano obie strony, długość jest mnożona przez współczynnik (domyślnie 2). Balustrada jest budowana w 3D z prawdziwych elementów: tralek, poręczy, słupków, a w przypadku szkła — z tafli geometrii, nie z „pudełek”.

Dlaczego tak: balustrada jest często najdroższą pozycją wyceny i jednocześnie najbardziej widoczną. Klient musi zobaczyć różnicę między metalem, drewnem i szkłem, a nie tylko przeczytać nazwę. Wybór „obie strony” jest równie ważny, bo potrafi podwoić długość i koszt.

5.6. Krok 06 — dodatki

Co widzi klient: listę dodatków z checkboxami:

• Oświetlenie LED w stopniach — taśma pod krawędzią stopnia, cena za stopień;
• Listwy antypoślizgowe — wkładki na stopniach, cena za stopień;
• Zabudowa pod schodami — zamknięta szafa lub schowek, cena stała;
• Dodatkowa poręcz (dzieci/seniorzy) — druga poręcz na dopasowanej wysokości, cena za metr bieżący.

Co dzieje się pod spodem: każdy dodatek ma własny typ rozliczenia: kwota stała, za stopień albo za metr bieżący. System dolicza go do wyceny i — w przypadku LED oraz zabudowy — zmienia scenę 3D.

Dlaczego tak: dodatki są miejscem, w którym sprzedaż rośnie bez zmiany podstawowego produktu. Jednocześnie klient musi rozumieć, za co płaci. Dlatego przy każdym dodatku widzi jednostkę i orientacyjną kwotę.

Sprytne zachowanie: zaznaczenie dodatkowej poręczy dla dzieci lub seniorów automatycznie ustawia balustradę po obu stronach i przełącza dobór stopni na komfortowy. To drobna inteligencja interfejsu, która wynika z realnej potrzeby: dodatkowa poręcz zwykle ma sens przy niższych stopniach i po obu stronach.

6. Silnik geometrii: schody policzone, nie tylko narysowane

Największą różnicą między „ładnym widgetem 3D” a prawdziwym konfiguratorem jest geometria. Tutaj scena 3D nie jest dekoracją dodaną do formularza — jest generowana z tych samych danych, z których liczona jest cena. Jeśli klient zmieni kształt, wymiary albo liczbę stopni, zmienia się zarówno model, jak i ilości materiałów.

6.1. Co dokładnie liczy geometria

Silnik buduje listę stopni, spocznik lub windery, otwór w stropie i obrys stropu. Dla każdego stopnia zna jego cztery narożniki, wysokość, krawędź przednią i krawędzie boczne. Z tego powstają:

6.2. Parametr „stopnie przed zakrętem”

To jeden z najciekawszych parametrów. Dla schodów L i U decyduje, ile stopni znajduje się przed spocznikiem lub winderami. Domyślnie 6 z 15 stopni, co daje spocznik mniej więcej na 44% wysokości — a nie tuż pod stropem. To ma znaczenie praktyczne: spocznik umieszczony zbyt wysoko może pogorszyć prześwit nad głową i wygodę. Dla winderów ten udział wynosi około 44–56%, bo stopnie trapezowe zajmują mniej miejsca niż pełny podest.

Klient nie musi rozumieć tego wzoru. Widzi suwak „Stopnie przed zakrętem”, a scena 3D pokazuje, gdzie pojawia się podest. System pilnuje, żeby wartość mieściła się w bezpiecznym zakresie i żeby po zakręcie zostały stopnie.

6.3. Otwór w stropie i obrys stropu

Geometria nie kończy się na stopniach. System wyznacza również otwór w stropie oraz obrys płyty stropu wokół niego. Dzięki temu scena 3D pokazuje schody przechodzące przez strop, a nie „lewitujące” w pustce. To ważne dla klienta, który musi ocenić, czy schody zmieszczą się w jego domu i czy otwór będzie miał sensowny kształt.

Długość otworu ma bezpośredni związek z normą prześwitu nad głową. Domyślna długość 390 cm została dobrana tak, aby startowa konfiguracja oraz wszystkie trzy presety doboru stopni spełniały minimum 205 cm prześwitu. To przykład decyzji projektowej, która łączy wygodę, normę i domyślne dane.

6.4. Ta sama geometria w przeglądarce i na serwerze

Jednym z najważniejszych wymagań technicznych było to, aby cena widoczna w przeglądarce była zgodna z ceną zapisaną w bazie i wysłaną w mailu. Dlatego geometria istnieje w dwóch bliźniaczych implementacjach: jednej działającej w przeglądarce (podgląd na żywo) i jednej działającej na serwerze (cena autorytatywna). Obie są testowane na tych samych zestawach danych: sześć geometrii i cztery konfiguracje dają identyczne ilości i kwoty co do groszy.

Dla klienta oznacza to prostą rzecz: kwota, którą widzi, jest tą samą kwotą, którą dostaje handlowiec. Nie ma sytuacji, w której „na stronie było taniej”. Dla firmy oznacza to, że nikt nie może podmienić ceny w formularzu.

6.5. Co to daje w praktyce

• koniec z ręcznym liczeniem powierzchni i długości;
• spójność między wizualizacją, wyceną i zapytaniem;
• możliwość porównania wariantów bez pracy handlowca;
• mniej pomyłek przy nietypowych kształtach i skrętach;
• podstawa do dalszych rozszerzeń, np. eksportu rysunku lub wyceny PDF.

7. Dobór stopni: komfort, optymalność, oszczędność

Schody mogą być piękne i jednocześnie nieergonomiczne. Najczęstszy problem to zbyt wysoki stopień albo zbyt płytki. Dlatego konfigurator nie zostawia tego klientowi bez podpowiedzi — oferuje trzy presety doboru stopni.

7.1. Co to jest wysokość podniesienia i głębokość stopnia

Wysokość podniesienia to różnica poziomów między jednym stopniem a następnym. Im wyższa, tym bardziej męczące wchodzenie. Głębokość stopnia to ile miejsca ma stopa na stopniu. Im mniejsza, tym łatwiej o poślizg lub niepewne stąpnięcie. Optimum to kompromis: stopień na tyle niski, by wejście było wygodne, i na tyle głęboki, by stopa czuła się bezpiecznie.

7.2. Wzór Blondela w praktyce

Klasyczna reguła ergonomii schodów mówi, że 2h + s powinno mieścić się w przedziale 60–65 cm, gdzie h to wysokość podniesienia, a s to głębokość stopnia. Konfigurator liczy ten wskaźnik na żywo i pokazuje go w checkliście norm. Presety doboru stopni dążą do wartości około 63 cm, a głębokość stopnia nigdy nie schodzi poniżej 25 cm.

7.3. Trzy presety — i co oznaczają

Powyższe wartości są przykładem dla H = 280 cm. W rzeczywistości system zaokrągla liczbę podniesień do całkowitej i przelicza rzeczywistą wysokość. Dzięki temu preset nigdy nie prowadzi do niecałkowitej liczby stopni.

7.4. Kiedy który preset

• Komfortowy — dla domów rodzinnych, osób starszych, dzieci, często używanych schodów. Więcej stopni oznacza więcej materiału i wyższą cenę, ale lepszy komfort.
• Optymalny — domyślny wybór dla większości sytuacji. Rozsądny kompromis między wygodą, zajętością miejsca i ceną.
• Oszczędny — gdy miejsca jest mało albo budżet jest napięty. Warto wtedy zwrócić uwagę na checklistę norm i prześwit.

7.5. Preset nie jest pułapką

Klient zawsze może ręcznie zmienić liczbę podniesień albo głębokość stopnia. Preset jest podpowiedzią, nie więzieniem. System przestaje automatycznie nadpisywać wartości, gdy klient sam je zmieni. To ważne, bo niektórzy klienci mają konkretne wymagania projektowe i nie chcą, żeby interfejs „wiedział lepiej”.

8. Checklista norm: bezpieczeństwo bez blokowania

Konfigurator nie jest programem do projektowania konstrukcji, ale może wyłapać najczęstsze błędy ergonomiczne. Dlatego po lewej stronie ekranu pojawia się checklista norm, która aktualizuje się razem z konfiguracją.

8.1. Co jest sprawdzane

8.2. Prześwit nad głową — najbardziej praktyczna kontrola

Prześwit to odległość od stopnia do dolnej krawędzi stropu. Jeśli jest zbyt mały, klient uderzy głową przy wchodzeniu. System liczy go z wysokości kondygnacji, grubości stropu, liczby stopni, głębokości stopnia i długości otworu. Gdy wynik jest zbyt niski, checklista pokazuje nie tylko ostrzeżenie, ale też konkretną podpowiedź: „Wydłuż otwór do ok. 420 cm”. To przykład tego, jak konfigurator edukuje zamiast tylko oceniać.

8.3. Ostrzeżenie nie blokuje wyceny

To bardzo ważna decyzja projektowa. Niezgodność z normą nie powoduje, że przycisk „Podsumowanie i zapytanie” znika. Klient może wysłać zapytanie nawet wtedy, gdy schody są na granicy lub poza normą — bo może mieć nietypowe warunki, świadomą decyzję albo potrzebę konsultacji. Handlowiec widzi wtedy konfigurację i może doradzić. Sztywne blokowanie częściej psuje sprzedaż, niż chroni.

8.4. Progi edytowalne w panelu

Wartości norm nie są wpisane na stałe w kod. Panel pozwala zmienić dolną i górną granicę Blondela, maksymalną wysokość stopnia, minimalną głębokość, minimalną szerokość biegu, minimalny prześwit oraz włączyć lub wyłączyć kontrolę szerokości otworu. Dzięki temu warsztat może dostosować narzędzie do własnych standardów i rynku.

9. Wycena na żywo: z czego wynika cena

Klient nie kupuje „schodów za 7 000”. Kupuje stopnie z buka, podstopnice, policzki i konstrukcję, balustradę metalową po obu stronach, wykończenie, dodatkową poręcz, zabudowę pod schodami i montaż. Konfigurator pokazuje właśnie takie pozycje — dzięki temu cena jest zrozumiała, a klient widzi, co dokładnie kupuje.

9.1. Model ceny w jednym akapicie

Cena opcji to jej stawka pomnożona przez jednostkę rozliczenia. Drewno liczone jest za metr sześcienny i przeliczane przez objętość stopni (powierzchnia × grubość) z zapasem materiału. Wykończenie liczone jest za metr kwadratowy powierzchni. Balustrada za metr bieżący, z możliwością mnożenia przez liczbę stron. Dodatki mogą być kwotowe, za stopień albo za metr bieżący. Do tego dochodzi konstrukcja (długość policzków × przekrój × cena drewna + stawka za stopień) oraz montaż (stawka za stopień + kwota stała). Na końcu system zaokrągla kwotę, stosuje cenę minimalną, VAT i walutę.

9.2. Przykładowa wycena z prezentowanej konfiguracji

W przykładowej konfiguracji (U ze spocznikiem, 280 cm wysokości, 90 cm szerokości, 16 stopni, buk, ciemna bejca z lakierem, balustrada metalowa po obu stronach, dodatkowa poręcz i zabudowa pod schodami) wycena wyglądała następująco:

Ten przykład pokazuje dwie ważne rzeczy. Po pierwsze, balustrada może być największą pozycją — tutaj ponad 2 675 €, czyli więcej niż same stopnie. Po drugie, cena nie jest „czarną skrzynką”: klient widzi, że zabudowa pod schodami kosztuje ponad 1 100 €, a dodatkowa poręcz około 280 €. Może świadomie zrezygnować z jednego elementu, jeśli budżet jest napięty.

9.3. Netto, brutto, VAT i zaokrąglanie

Panel pozwala zdecydować, czy ceny są netto czy brutto, jaki jest VAT i czy kwota ma być zaokrąglana. Domyślnie wycena pokazuje wartość netto i brutto, żeby klient od razu widział pełny koszt. Zaokrąglenie do np. 10 jednostek upraszcza komunikację, ale nie ukrywa szczegółów, bo pozycje są widoczne osobno.

9.4. Cena minimalna i ważność wyceny

Jeśli suma jest niższa niż ustalone minimum zamówienia, system dolicza wyrównanie do ceny minimalnej i pokazuje je jako osobną pozycję. Dzięki temu klient nie dostaje nierealistycznie niskiej kwoty, a firma nie musi tłumaczyć różnicy po fakcie. Wycena ma też określoną ważność w dniach — to uczciwa informacja, że ceny materiałów mogą się zmieniać.

9.5. Waluta

Waluta wycen pochodzi z centralnego komponentu walut systemu. W panelu konfiguratora wybiera się kod ISO, a front pokazuje symbol wybranej waluty. Zmiana symbolu w komponencie walut działa od razu na froncie. Co ważne, zmiana waluty nie przelicza automatycznie zapisanych cen — do tego służy osobna sekcja „Przelicz zapisane kwoty”, która korzysta z kursów i może przeliczyć cennik oraz kwotowe ustawienia. Zapytania historyczne zachowują własną walutę, więc historia pozostaje wiarygodna.

9.6. Cena nigdy nie jest przyjmowana od klienta

To jedna z najważniejszych zasad bezpieczeństwa i wiarygodności. Przeglądarka pokazuje podgląd, ale po wysłaniu zapytania system normalizuje stan i liczy cenę ponownie po stronie serwera. Nawet jeśli ktoś zmieni dane w formularzu, w bazie i mailu znajdzie się cena policzona przez system. Dla klienta to gwarancja spójności, dla firmy — ochrona przed oszustwem i pomyłką.

10. Wizualizacja 3D: pewność zamiast wyobraźni

Wizualizacja jest sercem doświadczenia. To ona sprawia, że konfigurator jest przyjemny, a nie tylko funkcjonalny. Ale scena 3D nie jest „obrazkiem do ozdoby” — jest zbudowana z tej samej geometrii co wycena.

10.1. Co klient widzi w scenie

• Cztery bryły schodów — proste, L ze spocznikiem, L z winderami, U ze spocznikiem, z prawdziwymi stopniami, spocznikiem i winderami trapezowymi;
• Policzki i konstrukcję — skośne belki na biegach, płaskie elementy na spocznikach i słup w narożniku;
• Zabudowę pod schodami — pełne boki zamykające biegi, jeśli dodatek jest wybrany;
• Balustradę — drewnianą, metalową albo szklaną; szkło to prawdziwe tafle z geometrii, nie „pudełka”;
• Podstopnice — opcjonalne pionowe elementy, jeśli klient je włączy;
• Oświetlenie LED — taśmę pod krawędzią stopnia, jeśli dodatek jest wybrany;
• Otoczenie — podłogę z kafli, ściany, listwy, okno i miękki cień;
• Strop z otworem — płytę stropu z widocznym otworem i teksturą piętra;
• Siatkę i HUD — pomocnicze linie i informacje o wymiarach, jeśli są włączone.

10.2. Jak to działa technicznie — bez żargonu

Scena działa w przeglądarce dzięki technologii WebGL i bibliotece three.js. Model jest budowany lokalnie z danych konfiguracji, a nie pobierany jako gotowy plik. Oznacza to, że każda zmiana kształtu i wymiarów generuje nową bryłę. three.js jest dołączony do projektu lokalnie, więc wizualizacja nie zależy od zewnętrznego CDN ani od dostępności innej firmy.

Render jest odświeżany z krótkim opóźnieniem (około 70 ms), żeby przeciąganie suwaków nie blokowało sceny. Wycena i checklista norm aktualizują się natychmiast, a scena nadąża za nimi w tle. To detal, który decyduje o płynności.

10.3. Kamera, obrót i kadr

Klient może obracać model przeciągnięciem, przybliżać kółkiem lub gestem, wyśrodkować widok i powiększyć podgląd na cały ekran. Jest też wskaźnik kamery pokazujący kąt obrotu, pochylenie, dystans i punkt patrzenia. Dla zwykłego klienta to ciekawostka; dla wdrożenia — narzędzie do skalibrowania domyślnego kadru. Domyślny dystans jest liczony względnie do największego wymiaru schodów, więc działa dla każdego kształtu i rozmiaru, a nie tylko dla jednego modelu.

10.4. Wydajność i dostępność

Scena jest zoptymalizowana: ogranicza gęstość pikseli, używa miękkiego cienia i nie odświeża się przy każdym zdarzeniu. Na urządzeniach mobilnych działa w tej samej technologii, ale interfejs jest inaczej ułożony. Jeśli przeglądarka nie obsługuje WebGL, klient widzi komunikat, że podgląd 3D jest niedostępny, ale konfiguracja i wycena nadal działają. To ważne, bo narzędzie sprzedażowe nie może się „wysypać” bez 3D.

10.5. Czego 3D nie jest

To nie jest fotorealistyczny render ani VR. To czytelna wizualizacja bryły i materiałów. Nie zastępuje pomiaru, nie gwarantuje, że kolor na ekranie będzie identyczny jak w rzeczywistości, i nie pokazuje każdego detalu wykonania. Ale potrafi odpowiedzieć na pytania, które klient zadaje najczęściej: „Jak to będzie wyglądać?”, „Czy balustrada szklana będzie pasować?”, „Czy podest jest we właściwym miejscu?”, „Czy schody nie będą zbyt masywne?”.

10.6. Dlaczego to sprzedaje

Wizualizacja skraca dystans między wyobrażeniem a produktem. Klient rzadziej mówi „myślałem, że to będzie inaczej”, bo widział efekt przed decyzją. Łatwiej też sprzedać dodatki: LED, szkło, zabudowę czy drugą poręcz — bo klient widzi je w kontekście, a nie tylko w cenniku. To właśnie różnica między listą opcji a doświadczeniem.

11. UX, dostępność i urządzenia

Konfigurator jest rozbudowany, ale nie może tak wyglądać. Dlatego interfejs jest podzielony, stopniowany i dostosowany do różnych sposobów pracy.

11.1. Tryb szybki i zaawansowany

Tryb jest przełączany jednym przyciskiem, a wybór jest pamiętany w przeglądarce. Dzięki temu klient, który wróci do konfiguratora, nie musi ustawiać go od nowa.

11.2. Sticky scena i mobilny pasek ceny

Na desktopie scena 3D pozostaje widoczna podczas przewijania panelu, więc klient cały czas widzi efekt zmian. Na telefonie, gdzie wszystko jest w jednej kolumnie, pojawia się przyklejony pasek z ceną i przyciskiem przejścia do podsumowania. To rozwiązanie typowe dla dobrych sklepów: najważniejsza informacja i akcja są zawsze pod ręką.

11.3. Pełnoekranowy podgląd

Przycisk „Powiększ podgląd” pozwala obejrzeć model na całym ekranie. W tym trybie klawisz Escape zamyka podgląd. Jest też układ pełnoekranowy całej strony, wybierany w panelu: scena zajmuje całą szerokość, a panel opcji wysuwa się z boku. W układzie pełnoekranowym strona zajmuje dokładnie wysokość okna, więc stopka motywu jest pomijana; w układzie klasycznym stopka zostaje.

11.4. Dostępność

• wybory są opakowane w etykiety, więc działają także bez myszy;
• cena i checklista norm mają regiony „aria-live”, więc czytniki ekranu informują o zmianach;
• przyciski mają widoczne stany focusu;
• animacje respektują ustawienie „prefers-reduced-motion”;
• interfejs nie polega wyłącznie na kolorze — statusy mają ikony i tekst;
• gdy JavaScript lub WebGL nie działa, klient widzi informację, że konfiguracja i wycena nadal są dostępne.

11.5. HUD i informacje zwrotne

HUD pokazuje na żywo wysokość podniesienia, głębokość stopnia, kąt nachylenia, rzut i liczbę stopni. Dla klienta to skrót techniczny, który pomaga zrozumieć, co się zmienia. Podsumowania kroków w nagłówkach pokazują aktualny wybór, więc klient nie musi rozwijać wszystkich sekcji, żeby sprawdzić, co już ustawił.

11.6. Kopiowanie podsumowania

Jednym kliknięciem klient może skopiować zwięzłe podsumowanie konfiguracji i wyceny — przydatne, gdy chce zachować wariant, wysłać go partnerowi albo wrócić do niego później. To mała funkcja, ale bardzo praktyczna.

11.7. Linki do konkretnych konfiguracji

Narzędzie obsługuje adresy, które otwierają konkretny kształt, liczbę stopni przed zakrętem, stan podstopnic, tryb zaawansowany, powiększony podgląd albo panel kamery. Dla klienta to nieistotne; dla marketingu i handlu — możliwość przygotowania kampanii „schody U” albo „schody L z winderami” z linkiem, który od razu pokazuje właściwy wariant.

11.8. Zasada „nie psuj wrażenia”

Wszystkie te funkcje mają jeden cel: klient ma się czuć prowadzony, a nie przeciążony. Dlatego tryb szybki jest domyślny, szczegóły są schowane, a informacje pojawiają się wtedy, gdy są potrzebne. Rozbudowane narzędzie nie musi wyglądać skomplikowanie.

12. Podsumowanie konfiguracji i zapytanie ofertowe

Po kliknięciu „Podsumowanie i zapytanie” klient przechodzi na osobną stronę. To ważny moment: z trybu zabawy zmienia się w tryb decyzji. Dlatego strona jest spokojna, czytelna i skupiona na dwóch rzeczach: konfiguracji oraz kontakcie.

12.1. Co widzi klient na podsumowaniu

• kartę konfiguracji — kształt, kierunek skrętu, wymiary, konstrukcja, materiał i kolor, balustrada, dodatki, parametry stropu;
• tabelę wyceny — pozycje, ilości, suma netto i brutto;
• formularz kontaktowy — imię i nazwisko, e-mail, telefon, dodatkowe informacje;
• zgodę RODO — pełny tekst z linkiem do polityki prywatności, osobny dla języka;
• przycisk „Wyślij zapytanie” i informację, że kontakt jest niezobowiązujący, a cenę potwierdzamy po pomiarze.

12.2. Co dzieje się po kliknięciu „Wyślij”

1. System sprawdza token sesji, poprawność danych i limit zapytań.
2. Normalizuje konfigurację: przycina wymiary do zakresów i weryfikuje kody opcji wobec opublikowanych danych.
3. Przelicza wycenę po stronie serwera — cena z przeglądarki nie jest przyjmowana.
4. Zapisuje zapytanie w bazie wraz z konfiguracją, wyceną, kontaktem, językiem i bezpiecznym skrótem adresu IP.
5. Buduje czytelny e-mail HTML z nagłówkiem, kwotą, danymi kontaktowymi, konfiguracją, wyceną i wiadomością klienta.
6. Wysyła e-mail na adres z panelu; jeśli adres jest pusty lub niepoprawny, powiadomienie trafia do administratora systemu.
7. Przekierowuje klienta na stronę „Dziękujemy!”.

Nawet jeśli wysyłka e-maila się nie powiedzie, zapytanie zostaje zapisane w bazie i jest widoczne w panelu. Błąd maila trafia do logu, ale nie blokuje obsługi klienta. To zasada „najpierw dane, potem powiadomienie”.

12.3. Strona potwierdzenia

Po wysłaniu klient widzi zielony znacznik, podziękowanie i jasny opis, co dalej: kontakt telefoniczny i doprecyzowanie konfiguracji, bezpłatny pomiar, ostateczna wycena i umowa. To redukuje niepewność i odpowiada na pytanie „co teraz będzie się działo?”.

12.4. E-mail do handlowca

E-mail nie jest technicznym dumpem danych. Jest czytelną kartą zapytania: nagłówek z nazwą firmy i numerem zapytania, wyróżniona kwota, dane kontaktowe jako klikalne linki, konfiguracja, tabela wyceny, wiadomość klienta i stopka. Dzięki temu handlowiec może działać od razu, bez otwierania panelu — choć panel też ma pełne dane.

12.5. Co zawiera zapytanie

12.6. Formularz, który nie męczy

Formularz jest krótki, bo większość danych już zebrano w konfiguratorze. Klient nie musi wpisywać kształtu ani wymiarów po raz drugi. Wymagane pola można skonfigurować w panelu: e-mail, telefon i zgoda RODO są opcjonalne lub wymagane w zależności od polityki firmy. Domyślnie wymagane są imię, e-mail i zgoda, a telefon jest opcjonalny.

12.7. Checkout jest systemowy

Konfigurator nie udaje sklepu i nie prowadzi płatności. Po akceptacji oferty zamówienie i płatność realizowane są w systemowym procesie zamówienia. To świadome rozdzielenie: konfigurator zbiera konfigurację i zapytanie, a nie zastępuje procesu sprzedaży.

13. Panel administracyjny: codzienna praca handlowca

Panel jest zaprojektowany tak, żeby osoba bez wiedzy technicznej mogła samodzielnie zmienić cennik, materiały, normy, presety, wygląd interfejsu i treści zapytań. Nie trzeba programisty do dodania nowego gatunku drewna ani do zmiany stawki montażu.

13.1. Kokpit: czy konfigurator jest gotowy do pracy

Po wejściu do panelu widać kafle z licznikami: opcje, grupy, parametry wymiarów, ustawienia, zapytania. Widoczny jest też pasek gotowości — w przykładowym wdrożeniu 11/11. Lista gotowości sprawdza, czy każda grupa ma opublikowaną opcję, czy grupa jednokrotnego wyboru ma opcję domyślną, czy zakresy wymiarów są poprawne i czy normy oraz stawki są zapisane.

Kokpit pokazuje także publiczne adresy konfiguratora i podsumowania oraz przycisk „Otwórz konfigurator”. To wygodne: administrator od razu widzi, co klient dostanie, i może sprawdzić efekt zmiany.

13.2. Opcje i ceny: serce cennika

Lista opcji pokazuje wszystkie materiały, wykończenia, kolory, balustrady i dodatki. Filtr grup działa jak chipy z licznikami, jest wyszukiwarka, a cena i jednostka są widoczne od razu. Kolor jest pokazany jako próbka, więc administrator widzi, jak będzie wyglądał w kafelku.

Przeciąganie wierszy zmienia kolejność opcji w grupie; działa przy wybranej grupie i bez aktywnej frazy wyszukiwarki. Akcje masowe są ograniczone do sensownych: publikuj, ukryj, kopiuj, usuń. Kopiowanie tworzy nowy kod z dopiskiem „kopia” i nie przejmuje flagi domyślnej. Usunięcie opcji domyślnej automatycznie promuje kolejną pozycję z grupy — dzięki temu grupa nie zostaje bez domyślnego wyboru.

Formularz opcji pozwala ustawić nazwę, kod techniczny, opis, cenę, jednostkę rozliczenia, próbkę koloru, mnożnik wizualny, krycie, metaliczność, obrazek, publikację i domyślność. Jednostki są ograniczone do tych, które dana grupa obsługuje, więc nie da się zapisać ceny „za metr sześcienny” dla balustrady, jeśli wycena tego nie liczy. Kod techniczny generuje się z nazwy tylko dopóki administrator go nie zmieni.

13.3. Grupy opcji: stałe sloty konfiguratora

Grupy to stałe sloty: gatunek drewna, wykończenie, kolor, balustrada i dodatki. Nie można ich dodawać ani usuwać, bo konfigurator jest zbudowany wokół tych pięciu decyzji. Można natomiast zmienić nazwę grupy, typ wyboru (lista rozwijana, jedna opcja, wiele checkboxów), widoczność i kolejność. To zabezpiecza spójność: administrator nie może przypadkowo zepsuć struktury, ale może dostosować etykiety i sposób wyboru.

13.4. Wymiary i zakresy: granice, w których klient może się poruszać

Panel wymiarów pozwala ustawić dla każdego parametru minimum, maksimum, krok, wartość domyślną, widoczność oraz informację, czy parametr dotyczy tylko schodów ze skrętem. Każdy parametr steruje jednym suwakiem w konfiguratorze, a zakres i krok decydują, jakie wartości może wybrać klient.

Walidacja działa na żywo: wartość domyślna musi mieścić się między minimum a maksimum, a krok musi być dodatni. Jest też przycisk przywrócenia wartości ze skryptu referencyjnego, więc eksperymenty można łatwo cofnąć. Dodatkowo panel pokazuje mini-podgląd suwaka, żeby administrator rozumiał, jak będzie wyglądać interakcja.

13.5. Ustawienia: pięć zakładek, które zmieniają zachowanie całego narzędzia

Ustawienia są podzielone na pięć zakładek: normy i walidacja, wycena, dobór stopni, interfejs i zapytania. Każda zmiana działa od razu w konfiguratorze — nie trzeba nic wdrażać ani restartować.

Normy i walidacja

Dolna i górna granica Blondela, maksymalna wysokość stopnia, minimalna głębokość stopnia, minimalna szerokość biegu, minimalny prześwit nad głową oraz włącznik kontroli szerokości otworu. To tutaj warsztat decyduje, jakie schody uznaje za ergonomiczne.

Wycena

Współczynnik zapasu materiału, grubość podstopnicy, przekrój policzka, stawka konstrukcji za stopień, stawka montażu za stopień, kwota stała montażu, zaokrąglenie, waluta, VAT, mnożnik balustrady po obu stronach, cena minimalna, ważność wyceny i informacja, czy ceny są netto. To tutaj powstaje „matematyka” wyceny. Sekcja przeliczania zapisanych kwot pozwala zmienić walutę cennika z zachowaniem kursów i bez ruszania historii zapytań.

Dobór stopni

Włącznik presetów i trzy wartości: komfortowy 16,5 cm, optymalny 17,5 cm, oszczędny 18,8 cm. To wartości sugerowanej wysokości stopnia. Panel pozwala je zmienić, jeśli warsztat ma inne standardy.

Interfejs

Szablon widoku (pełnoekranowy albo klasyczny), domyślny tryb (szybki albo zaawansowany), widoczność HUD, siatki, checklisty norm, tabeli wyceny i możliwości kopiowania podsumowania. Dzięki temu warsztat może zdecydować, czy chce pokazać klientowi wszystkie informacje, czy tylko najważniejsze.

Zapytania

Adres e-mail odbiorcy, temat i treść wiadomości z placeholderami, wymagalność e-maila, telefonu i zgody RODO, zapis zapytania w panelu, adres polityki prywatności, treść zgody RODO osobno dla każdego języka oraz komunikat po wysłaniu osobno dla każdego języka. Puste pole oznacza „użyj wbudowanego tekstu”, więc domyślne tłumaczenia można poprawiać bez migracji bazy.

13.6. Zapytania: od „nowe” do „zrealizowane”

Lista zapytań pokazuje datę, kontakt, wycenę, język, status i przycisk szczegółów. Statusy to „nowe”, „przeczytane” i „zrealizowane”. Widok szczegółów zawiera kontakt, pełną konfigurację, wycenę i możliwość zmiany statusu. Dzięki temu handlowiec prowadzi historię i nie traci wątków, nawet gdy zapytań jest wiele.

13.7. Narzędzia kontrolne

Komponent ma dwa narzędzia uruchamiane z linii poleceń: jedno sprawdza schemat bazy, dane startowe, zakresy i rejestrację komponentu; drugie renderuje wszystkie widoki panelu na danych z bazy, bez sesji i bez zapisywania danych. Nie są potrzebne w codziennej pracy, ale pomagają przy wdrożeniu i aktualizacjach.

13.8. Panel jest samowystarczalny

Komponent nie modyfikuje plików rdzenia systemu. Cały kod, widoki, style i narzędzia znajdują się w jego katalogu. Jedyny zewnętrzny krok to dane w bazie: rejestracja komponentu i uprawnienie użytkownika. Dla firmy oznacza to łatwiejsze aktualizacje i mniejsze ryzyko konfliktów.

14. Trzy języki i waluta transgraniczna

Konfigurator jest przygotowany do pracy w trzech językach: polskim, angielskim i niemieckim. To nie jest tylko tłumaczenie przycisków. Słowniki obejmują także nazwy grup i opcji oraz ich opisy, więc klient niemieckojęzyczny widzi „Holzart”, „Oberfläche”, „Geländer” i „Extras”, a nie polskie nazwy z bazy.

14.1. Co jest tłumaczone

• cały interfejs: nagłówki, opisy kroków, przyciski, komunikaty błędów i potwierdzenia;
• nazwy grup i opcji oraz ich opisy;
• etykiety norm i jednostek;
• treść zgody RODO — osobno dla każdego języka;
• komunikat po wysłaniu zapytania — osobno dla każdego języka;
• adresy stron konfiguratora i podsumowania — osobne aliasy dla każdego języka.

14.2. Fallback, który nie psuje doświadczenia

Jeśli w słowniku brakuje klucza dla jakiejś opcji, system używa nazwy z bazy (zwykle polskiej). Dzięki temu nowa opcja dodana w panelu od razu działa, nawet zanim ktoś przetłumaczy jej nazwę. To praktyczne: ekspansja cennika nie wymaga natychmiastowej pracy tłumacza.

14.3. RODO i komunikaty per język

Zgoda RODO i komunikat po wysłaniu są przechowywane osobno dla każdego języka. Puste pole oznacza użycie wbudowanego tekstu ze słownika. Dzięki temu można mieć pełną, poprawną informację RODO po polsku i niemiecku, a jednocześnie nie duplikować tekstu, jeśli nie chce się go zmieniać.

14.4. Waluta i historia

Waluta wycen pochodzi z centralnego komponentu walut. Konfigurator zapisuje kod ISO, a wyświetla symbol. Zapytania historyczne zachowują walutę, w której zostały złożone — widać to na liście zapytań, gdzie obok siebie mogą występować euro i złote. To ważne dla firm sprzedających na kilku rynkach: historia nie jest „przeliczana wstecz” i nie traci wiarygodności.

14.5. Dlaczego to ma znaczenie biznesowe

Dla warsztatu przygranicznego lub eksportowego jeden konfigurator obsługuje kilka rynków. Klient nie musi szukać „niemieckiej wersji formularza”, a handlowiec nie musi tłumaczyć nazw materiałów w każdej rozmowie. To obniża barierę wejścia i pozwala pokazać profesjonalizm jeszcze przed pierwszym kontaktem.

15. Bezpieczeństwo, RODO i jakość danych

Konfigurator zbiera dane osobowe i wpływa na wycenę, więc bezpieczeństwo nie może być dodatkiem. Projekt zakłada kilka warstw ochrony — od tokenu sesji po ponowne przeliczenie ceny.

15.1. RODO bez ściemy

Zgoda RODO nie jest jednym zdaniem „wyrażam zgodę”. To pełna informacja: kto jest administratorem danych, jakie dane są zbierane, na jakiej podstawie prawnej, w jakim celu, komu mogą być przekazane, jak długo są przechowywane i jakie prawa ma klient. Tekst jest osobny dla każdego języka i zawiera link do polityki prywatności. Puste pole w panelu oznacza użycie pełnego tekstu wbudowanego — więc nawet bez konfiguracji administrator nie zostawia klienta bez informacji.

15.2. Dane, które naprawdę są potrzebne

Konfigurator zbiera tylko to, co jest niezbędne do obsługi zapytania: kontakt, konfigurację i wycenę. Adres IP jest zapisywany jako skrót, a nie pełny adres. Wiadomość klienta jest ograniczona długością. To minimalizacja danych w praktyce, a nie tylko w polityce.

15.3. Cena jako element zaufania

Najważniejszym zabezpieczeniem biznesowym jest to, że cena nigdy nie jest przyjmowana z przeglądarki. Klient może zmienić wszystko w formularzu, ale system i tak policzy kwotę po swojemu. To chroni firmę przed stratą i klienta przed dezinformacją. W połączeniu z testami zgodności ceny w przeglądarce i na serwerze daje pewność, że „na stronie było tyle samo, co w mailu”.

15.4. Aktualizacje bez strachu

Komponent nie modyfikuje rdzenia systemu, więc aktualizacja innych części CMS nie powinna go psuć. Jego dane są w wydzielonych tabelach, a schemat i dane startowe są zakładane idempotentnie — czyli bezpiecznie można je wołać wielokrotnie. To ważne dla firmy, która nie chce, żeby wdrożenie stało się ciężarem utrzymaniowym.

16. Ekosystem: konfigurator w większym systemie

Konfigurator nie jest wyspą. Działa w ramach systemu, który obsługuje stronę, treści, użytkowników, waluty, maile i inne moduły biznesowe. To dobra wiadomość dla firmy: nie trzeba utrzymywać osobnego narzędzia ani osobnej bazy klientów.

16.1. Wspólne fundamenty

• waluty — jedna lista walut i kursów dla całego systemu;
• ustawienia ogólne — nazwa firmy, dane kontaktowe, szablony maili;
• użytkownicy i uprawnienia — dostęp do panelu konfiguratora zależny od uprawnień;
• wielojęzyczność — wspólna lista języków i aliasów;
• mail — wspólna warstwa wysyłki, z wersją HTML i tekstową;
• moduły i komponenty — strona, blog, portfolio, kontakt, galerie, oferty, faktury i inne.

16.2. Oferty i faktury

System obok konfiguratora ma moduły ofert i faktur. W obecnym zakresie zapytanie z konfiguratora nie tworzy automatycznie oferty ani faktury — jest zapisywane jako zapytanie i widoczne w panelu. To świadome rozdzielenie: konfigurator zbiera dane, a proces ofertowania i rozliczeń pozostaje w rękach firmy. Integracja z ofertami lub fakturami jest możliwym kierunkiem rozwoju, ale nie należy jej obiecywać bez wdrożenia.

16.3. Funkcje AI w systemie

System ma również warstwę funkcji AI: wektoryzację treści, ocenę E-E-A-T, tłumaczenie treści, generowanie treści ze zdjęć, asystenta AI i generowanie nazw zadań. To narzędzia redakcyjne i contentowe, działające w panelu. Nie należy ich mylić z tłumaczeniami samego konfiguratora — te są wbudowane w słowniki trzech języków. AI może natomiast pomagać w tworzeniu opisów, tłumaczeniu treści strony i pracy redakcyjnej wokół konfiguratora.

16.4. Panel systemu

Panel systemu zbiera różne obszary w jednym miejscu: treści, użytkowników, kontakt, galerie, blog, portfolio, komentarze, komponenty, moduły i wtyczki. Konfigurator jest jednym z komponentów, więc nie wymaga osobnego logowania ani osobnego wdrożenia.

16.5. Granice, które warto znać

Konfigurator jest komponentem systemu, a nie wtyczką do dowolnej strony. Nie jest też samodzielnym widgetem do osadzenia na WordPressie bez integracji. To rozwiązanie dla firm, które chcą mieć spójny system: stronę, panel, konfigurator i zapytania w jednym środowisku. Jeśli firma ma już inny CMS, wdrożenie wymaga adaptacji, a nie „wklejenia kodu”.

17. Korzyści biznesowe i jak je mierzyć

Nie obiecujemy konkretnych liczb, bo zależą one od ruchu, oferty, rynku i jakości obsługi. Możemy natomiast wskazać korzyści, które wynikają wprost z konstrukcji narzędzia, oraz sposób ich pomiaru.

17.1. Dla klienta

• zrozumienie produktu bez wizyty w salonie;
• możliwość porównania wariantów i zobaczenia ich w 3D;
• orientacyjna cena od razu, bez czekania na telefon;
• sygnał, czy konfiguracja jest ergonomiczna;
• pewność, że zapytanie zawiera wszystkie potrzebne dane;
• jasna informacja, co stanie się po wysłaniu.

17.2. Dla handlowca

• mniej czasu na dopytywanie o podstawowe wymiary;
• kompletna karta konfiguracji zamiast notatek;
• spójna metodyka wyceny dla całego zespołu;
• możliwość szybkiego sprawdzenia wariantu bez liczenia ręcznie;
• lista zapytań ze statusami, więc nic nie ginie;
• czytelny e-mail, który można przeczytać na telefonie.

17.3. Dla firmy

• nowoczesny wizerunek i przewaga nad konkurencją z prostym formularzem;
• obsługa klientów poza godzinami pracy;
• wejście na rynki niemieckojęzyczne i angielskojęzyczne;
• możliwość sprzedaży dodatków w kontekście wizualizacji;
• mniej nieporozumień na etapie wyboru i produkcji;
• dane, które można analizować i rozwijać.

17.4. Co warto mierzyć

17.5. Kiedy to się szczególnie opłaca

• produkt jest drogi i konfigurowalny, a klient potrzebuje zrozumienia przed decyzją;
• handlowcy spędzają dużo czasu na powtarzalnych pytaniach o wymiary i materiały;
• firma sprzedaje w kilku językach lub na kilku rynkach;
• część zapytań przychodzi po godzinach lub z urządzeń mobilnych;
• chce się zwiększyć sprzedaż dodatków i materiałów premium;
• zależy na spójności wycen i mniejszej liczbie pomyłek.

17.6. Czego nie obiecujemy

Konfigurator nie zastąpi pomiaru, nie zagwarantuje ceny końcowej i nie naprawi słabej oferty ani złej obsługi. Nie sprawi też, że klient kupi schody bez rozmowy. Jego zadaniem jest skrócić drogę do dobrej rozmowy i dostarczyć komplet danych — a to już bardzo dużo.

18. Wyzwania i rozwiązania

Za prostym interfejsem stoi kilka trudnych decyzji. Warto je pokazać, bo tłumaczą, dlaczego narzędzie jest wiarygodne.

18.1. Czego nauczyło to wdrożenie

• Klient chce widzieć efekt, nie tabelę parametrów. 3D jest argumentem sprzedażowym, nie dodatkiem.
• Mniej pól na start oznacza więcej ukończonych konfiguracji. Tryb szybki jest kluczowy.
• Ostrzeżenie działa lepiej niż blokada. Klient akceptuje podpowiedź, ale nie lubi ściany.
• Cena musi być rozbita na pozycje. Sama suma budzi nieufność.
• Panel musi być prosty. Jeśli handlowiec boi się zmienić cenę, narzędzie nie żyje.
• Spójność techniczna to część doświadczenia. Klient nie widzi, że cena jest liczona dwa razy, ale odczuwa różnicę, gdy jest zgodna.

19. Jak wygląda wdrożenie

Wdrożenie nie polega na „włączeniu konfiguratora”. Polega na przeniesieniu wiedzy warsztatu do danych i ustawień, a potem na sprawdzeniu, czy narzędzie mówi tym samym językiem co firma.

19.1. Etapy

1. Warsztat konfiguracyjny. Ustalenie, jakie kształty, materiały, wykończenia, balustrady i dodatki firma chce sprzedawać.
2. Cennik. Wprowadzenie opcji, stawek i jednostek rozliczenia. Sprawdzenie, czy każda grupa ma opcję domyślną.
3. Wymiary i normy. Ustawienie realnych zakresów produkcji i progów ergonomicznych.
4. Wycena. Ustalenie zapasu materiału, stawek konstrukcji i montażu, zaokrąglenia, VAT, waluty i ceny minimalnej.
5. Branding i interfejs. Wybór układu, trybu startowego, widoczności HUD, siatki, norm i wyceny.
6. Języki i RODO. Uzupełnienie słowników, zgody per język, polityki prywatności i komunikatów.
7. Zapytania i mail. Adres odbiorcy, temat, treść, wymagane pola, test wysyłki i fallback administratora.
8. Testy. Sprawdzenie geometrii, zgodności ceny, widoków panelu, responsywności i scenariuszy błędów.
9. Szkolenie. Pokazanie handlowcom, gdzie zmienić cenę, jak dodać opcję i jak obsłużyć zapytanie.
10. Start i iteracja. Uruchomienie, obserwacja zachowań klientów i korekta cennika lub interfejsu.

19.2. Co musi przygotować firma

• listę materiałów i ich ceny;
• listę wykończeń, balustrad i dodatków;
• realne zakresy wymiarów, które firma obsługuje;
• standardy ergonomiczne i montażowe;
• dane firmy, politykę prywatności i treść zgody RODO;
• adres odbiorcy zapytań i sposób obsługi;
• decyzję, czy ceny są netto czy brutto i jaki jest VAT;
• tłumaczenia lub akceptację tłumaczeń dla języków obcych.

19.3. Co dostaje firma

• działający konfigurator na stronie;
• panel do zarządzania cennikiem i ustawieniami;
• listę zapytań ze statusami;
• e-maile z konfiguracją i wyceną;
• narzędzia kontrolne do sprawdzenia danych;
• dokumentację funkcji i zachowań;
• możliwość rozwijania narzędzia wraz z ofertą.

19.4. Po wdrożeniu

Konfigurator nie jest „ustaw i zapomnij”. Ceny materiałów się zmieniają, oferta się rozwija, a klienci zachowują się różnie. Panel pozwala reagować bez programisty: dodać gatunek drewna, zmienić stawkę, ukryć opcję, poprawić komunikat, przeliczyć walutę. To właśnie ta elastyczność decyduje o tym, czy narzędzie żyje dłużej niż pierwszy sezon.

20. FAQ — pytania klientów i handlowców

Czy cena z konfiguratora jest wiążąca?

Nie. To wycena orientacyjna, wyraźnie tak nazwana. Ostateczną cenę potwierdzamy po bezpłatnym pomiarze i uwzględnieniu rzeczywistych warunków w domu. Dzięki temu klient nie jest zaskoczony, a firma nie obiecuje czegoś, czego nie może dowieźć.

Czy klient musi znać wszystkie wymiary?

Nie. W trybie szybkim wystarczy wysokość kondygnacji i szerokość biegu. Reszta jest dobierana automatycznie lub dostępna w trybie zaawansowanym. Klient zawsze może poprosić o pomoc, ale nie musi znać się na technice, żeby zobaczyć sensowny wariant.

Czy konfigurator działa bez 3D?

Tak. Jeśli przeglądarka nie obsługuje WebGL, klient widzi komunikat, ale konfiguracja, normy i wycena nadal działają. 3D jest ważnym elementem doświadczenia, ale nie jedynym.

Czy działa na telefonie?

Tak. Interfejs jest responsywny, a na mobile pojawia się przyklejony pasek z ceną i przyciskiem podsumowania. Scena 3D działa w tej samej technologii, ale układ jest dostosowany do węższego ekranu.

Czy można zmienić ceny bez programisty?

Tak. Panel opcji i ustawień pozwala zmienić stawki, jednostki, VAT, zaokrąglenie, cenę minimalną i walutę. Zmiany działają od razu w konfiguratorze.

Czy można dodać nowy gatunek drewna?

Tak. W grupie „Gatunek drewna” można dodać opcję, ustawić nazwę, kod, cenę, próbkę i opis. Jeśli opcja ma być domyślna, wystarczy ją oznaczyć.

Czy można dodać nową grupę opcji?

Nie. Grupy są stałymi slotami konfiguratora: drewno, wykończenie, kolor, balustrada, dodatki. Można zmieniać ich nazwy, typ wyboru, widoczność i kolejność, ale nie tworzyć nowych. To zabezpiecza spójność wyceny i interfejsu.

Czy można dodać nowy kształt schodów?

Cztery kształty są częścią silnika geometrii. Dodanie nowego, np. schodów spiralnych, wymaga rozbudowy geometrii i wyceny, a nie kliknięcia w panelu. To ważne, żeby nie obiecywać czegoś, czego panel nie potrafi.

Czy można wyłączyć checklistę norm?

Tak. W ustawieniach interfejsu można ukryć checklistę, a progi norm można zmienić. Można też wyłączyć kontrolę szerokości otworu. Normy są narzędziem, nie więzieniem.

Czy można wyłączyć wycenę?

Tak. W ustawieniach interfejsu można ukryć tabelę wyceny. Konfigurator nadal będzie zbierał dane i prowadził do zapytania, ale klient nie zobaczy kwoty.

Czy można zmienić walutę?

Tak. Sama zmiana waluty zmienia etykietę i symbol. Do przeliczenia zapisanych kwot służy osobna sekcja, która korzysta z kursów i nie rusza historii zapytań. Dzięki temu zmiana jest kontrolowana.

Czy zapytania trafiają na e-mail?

Tak. Po zapisaniu zapytania system wysyła czytelny e-mail HTML. Jeśli adres odbiorcy jest pusty lub niepoprawny, powiadomienie trafia do administratora systemu. Nawet jeśli mail się nie wyśle, zapytanie zostaje w bazie.

Czy jest zgodność z RODO?

Tak. Konfigurator zbiera zgodę, pokazuje pełną informację RODO i link do polityki prywatności. Treść zgody jest osobna dla każdego języka. Adres IP jest zapisywany jako skrót, a dane są ograniczone do niezbędnych.

Czy klient może wysłać wiele zapytań?

W jednej sesji obowiązuje limit 3 zapytań na 10 minut. To zabezpieczenie przed spamem i przypadkowym zalaniem skrzynki.

Czy można podpiąć CRM?

Obecnie zapytania są zapisywane w bazie i wysyłane mailem. Integracja z CRM jest możliwym kierunkiem rozwoju, ale wymaga wdrożenia i nie jest częścią obecnego zakresu. Warto o tym rozmawiać osobno.

Czy jest checkout?

Nie w konfiguratorze. Zamówienie i płatność realizowane są w systemowym procesie zamówienia po akceptacji oferty. Konfigurator kończy się zapytaniem, nie koszykiem.

Czy można zobaczyć, co wybrał klient?

Tak. Panel zapytań pokazuje kontakt, pełną konfigurację, wycenę, język i status. Handlowiec widzi dokładnie te same dane, które klient wysłał — plus cenę przeliczoną po stronie serwera.

Czy to działa na WordPressie?

Konfigurator jest komponentem systemu xCMS, a nie wtyczką WordPress. Jeśli firma ma inny CMS, wdrożenie wymaga adaptacji. To ważne, żeby ocenić projekt pod kątem istniejącej infrastruktury.

Czy jest wielojęzyczny?

Tak. Interfejs, nazwy grup i opcji, zgoda RODO, komunikat po wysłaniu i adresy stron są przygotowane dla polskiego, angielskiego i niemieckiego. Brak tłumaczenia opcji nie psuje działania — system użyje nazwy z bazy.

21. Słowniczek dla nietechnicznych

22. Podsumowanie

Konfigurator schodów robi coś, co trudno osiągnąć zwykłym formularzem: zamienia skomplikowany produkt w zrozumiałą decyzję. Klient widzi schody, rozumie cenę, dostaje sygnał o ergonomii i wychodzi z kompletnym zapytaniem. Firma dostaje dane, których wcześniej musiała szukać w kilku telefonach — i robi to w sposób spójny, bezpieczny i wielojęzyczny.

Największa wartość nie tkwi w pojedynczej funkcji. Nie w samym 3D, nie w suwakach, nie w checkliście norm i nie w tabeli wyceny. Tkwi w połączeniu: geometria zasila wizualizację, wizualizacja buduje zaufanie, wycena odpowiada na pytanie o budżet, normy chronią ergonomię, a podsumowanie zamienia wszystko w kompletne zapytanie. To jedna, spójna ścieżka — od „nie wiem” do „wiem, co chcę i ile to kosztuje” — a potem do rozmowy, pomiaru i realizacji.

Dla warsztatu oznacza to mniej powtarzalnej pracy, więcej kompletnych zapytań i lepsze pierwsze wrażenie. Dla klienta — poczucie kontroli i zaufanie, że nie rozmawia z formularzem, tylko z dobrze zaprojektowanym doradcą.

Co dalej?

Jeśli rozważasz konfigurator dla własnych schodów lub innego produktu na wymiar, zacznij od trzech pytań:

1. Jakie decyzje klient musi podjąć, żeby wycena była wiarygodna?
2. Które z tych decyzji można uprościć, a które muszą pozostać techniczne?
3. Jakie dane musi dostać handlowiec, żeby nie musiał dopytywać?

Odpowiedzi na te pytania są ważniejsze niż wybór technologii. Konfigurator jest dobry wtedy, gdy najpierw porządkuje proces sprzedaży, a dopiero potem rysuje 3D.