Problem: każda zmiana frontendowa to projekt
Chcesz dodać tabelę rozmiarów na stronie produktu? Ukryć sekcję newsletter w stopce? Pokazać slider z polecanymi produktami pod banerem? Każda taka zmiana to ten sam schemat:
- Briefing dla programisty lub agencji
- Wycena i oczekiwanie na termin
- Realizacja, poprawki, testy
- Faktura — nawet za 15 minut pracy
W efekcie drobne modyfikacje wizualne czekają tygodniami albo nie powstają wcale, bo koszt jest niewspółmierny do zmiany.
Co to jest Witly Code?
Witly Code to mini-aplikacje JavaScript i CSS generowane przez agentów AI, które modyfikują frontend Twojego sklepu. Zamiast pisać kod ręcznie lub zlecać go programiście — opisujesz czego potrzebujesz w czacie, a agent analizuje stronę i generuje gotowy kod.
Przykłady zastosowań
- Popup z rabatem -20% wyświetlany po 5 sekundach na stronie
- Przycisk "Tabela rozmiarów" obok selektora rozmiaru na stronie produktu
- Slider z polecanymi produktami pod banerem głównym
- Przycisk "Wróć na górę" w prawym dolnym rogu strony
- Ukrycie sekcji newsletter w stopce sklepu
Jak zlecić zadanie?
Cały proces odbywa się w panelu Witly. Oto jak to wygląda krok po kroku:
Opisz zmianę w czacie
Wpisz polecenie po polsku, np. "Dodaj przycisk Tabela rozmiarów obok selektora rozmiaru na stronie produktu". Im dokładniejszy opis, tym lepszy efekt.
Agenci AI generują kod
Witly przekazuje Twoje polecenie do agentów AI. Agent otwiera Twój sklep w izolowanym środowisku (podobnym do narzędzi developerskich), analizuje strukturę strony, identyfikuje selektory i układ elementów. Na tej podstawie generuje kod JS lub CSS dopasowany do Twojego szablonu.
Podgląd na screenshotach
Agent wysyła Ci screenshoty: stan strony przed i po wstrzyknięciu kodu. Widzisz dokładnie co się zmieniło i możesz ocenić efekt bez ryzyka — Twoi klienci nadal widzą oryginalną stronę.
Akceptacja lub poprawki
Jeśli zmiana wygląda dobrze — klikasz "Zaakceptuj". Dopiero wtedy kod jest zapisywany na Twoim koncie. Jeśli coś wymaga poprawek — opisz co zmienić w czacie, a agent wygeneruje poprawioną wersję.
Domyślnie w trybie preview
Zaakceptowany kod pojawia się na liście zadań w panelu Witly i domyślnie jest w trybie preview. Oznacza to, że zmiana jest widoczna tylko gdy dodasz ?enable_witly_preview=1 do URL sklepu — Twoi klienci jej nie widzą. Możesz spokojnie przetestować efekt na żywo, a gdy jesteś pewien — przełączasz na tryb publiczny.
Pełna kontrola nad każdym modułem
Każda modyfikacja Witly Code to niezależny moduł — całkowicie oddzielony (decoupled) od kodu Twojego sklepu. W panelu Witly przy każdej zmianie masz do dyspozycji:
Switch on/off
Włącz lub wyłącz każdą pojedynczą zmianę jednym kliknięciem. Efekt jest widoczny na sklepie natychmiast.
Tryb: Preview / Publiczny
Preview — zmiana widoczna tylko z parametrem ?enable_witly_preview=1 w URL. Publiczny — widoczna dla wszystkich odwiedzających.
Podgląd i edycja kodu
Możesz podejrzeć wygenerowany kod JS lub CSS. Zaawansowani administratorzy mogą również ręcznie edytować kod i wprowadzać własne poprawki.
Trwałe usuwanie
Jeśli zmiana nie jest już potrzebna — możesz ją trwale usunąć. Kod znika z listy i nie jest już wstrzykiwany.
Ile to trwa?
Porównanie typowego procesu modyfikacji frontendowej:
| Etap | Programista / agencja | Witly Code |
|---|---|---|
| Briefing | Rozmowa, maile, specyfikacja | Jedno zdanie w czacie |
| Wycena | 1-3 dni robocze | Brak |
| Realizacja | Kolejka + praca | Agent generuje kod na żywo |
| Poprawki | Kolejna iteracja | Opisz co poprawić w czacie |
| Faktura | Od 100 do 1000+ zł | Średnio kilka zł za zadanie |
Jak to działa technicznie?
Agenci AI analizują DOM strony sklepu, identyfikują selektory CSS, układ elementów i style. Na tej podstawie generują samodzielne fragmenty kodu JS lub CSS.
Każdy fragment jest wstrzykiwany jako izolowany moduł — nie integruje się z kodem szablonu Twojego sklepu. Moduły są całkowicie decoupled od aplikacji sklepowej. Dzięki temu możesz jednym przyciskiem aktywować lub dezaktywować każdą pojedynczą zmianę, a efekt jest widoczny na sklepie natychmiast.
Do czego się NIE nadaje?
Witly Code służy do modyfikacji wizualnych i prostych interakcji frontendowych. Nie zastąpi programisty w każdym scenariuszu:
- Zaawansowana logika backendowa (np. własne API, integracje z ERP)
- Integracje z zewnętrznymi systemami płatności
- Modyfikacja procesu checkout lub koszyka na poziomie backendu
- Zmiany wymagające dostępu do bazy danych sklepu
Ważne: administrator powinien przetestować wygenerowany kod w trybie preview przed publikacją. Agent AI generuje kod o wysokiej jakości, ale weryfikacja wizualna jest zawsze rekomendowana.
Plany na przyszłość: hook do rekomendacji AI
Witly Code już teraz potrafi pobierać produkty z API sklepu (przez window.witly.searchProducts). W kolejnych wersjach połączymy go z modelem rekomendacji Product DNA, co otworzy nowe możliwości:
Slider z rekomendacjami
"Wygeneruj slider z produktami w stylu klienta z kategorii X"
Cross-sell w koszyku
"Pokaż produkty z kategorii Y w koszyku jako cross-sell"
Sekcja "Klienci kupili również"
"Dodaj sekcję Klienci kupili również pod opisem produktu"
Banner wyprzedażowy
"Wygeneruj banner z produktami na wyprzedaży z kategorii Z"
Każde z tych poleceń będzie generowało gotowy, ostylowany komponent z realnymi produktami z Twojego sklepu — bez pisania ani jednej linii kodu.
Zacznij modyfikować sklep w kilka minut
Otwórz panel Witly, wpisz polecenie w czacie i zobacz jak agent AI generuje kod dopasowany do Twojego sklepu. Nie musisz znać HTML, CSS ani JavaScript — wystarczy opisać czego potrzebujesz.
Masz pytania? Skontaktuj się z nami — pomożemy Ci wykorzystać Witly Code w Twoim sklepie.