Widget czatu, który wygląda jak Twój sklep — nowy system szablonów
Widget czatu, który wygląda jak Twój sklep
Około miesiąca temu odbyliśmy spotkanie z dużym, holenderskim wydawnictwem. Dwa z ich tytułów prowadzą sklepy e-commerce z bardzo wyrazistą stylistyką. Czerwona cena podzielona na dwa rozmiary (część całkowita duża, centy mniejsze i lekko podniesione). Żółta etykieta w lewym górnym rogu karty produktu z ceną sugerowaną i ceną aktualną zestawionymi obok siebie. Pomarańczowa strzałka pełniąca rolę przycisku CTA. Kliknięcie w kartę lub strzałkę ma otwierać szczegóły produktu w modalu, a nie przenosić na stronę sklepu. Wiele z tych elementów miało być zupełnie innych niż w standardowym widgecie Upsellic.
W tamtym czasie cała konfiguracja motywu Upsellic sprowadzała się do czterech kolorów. Stwierdziliśmy wprost: bez przebudowy systemu tego nie zrealizujemy.
Zrealizowaliśmy.
Czym są szablony widgetu?
Każdy motyw widgetu Upsellic składa się teraz z 15 niezależnych szablonów. Każdy szablon to fragment kodu w języku Nunjucks — podobnym do Twig, Handlebars czy Jinja. Całość spina jeden centralny plik CSS. Razem składają się one na wszystko, co widzi odwiedzający: karty produktowe w wiadomościach asystenta, dymki rozmowy, modal ze szczegółami produktu, modal oceny rozmowy, nagłówek widgetu, stopkę oraz baner promocyjny.
Każdy z tych szablonów możesz przepisać od zera. Masz pełną kontrolę nad strukturą HTML, klasami CSS, kolejnością elementów oraz całym układem. Bez zmian pozostają jedynie nazwy zmiennych — product.title, theme.primaryColour, phrases.viewProduct — które backend automatycznie łączy z właściwymi danymi. Nie musisz uczyć się ich na pamięć; szablon systemowy stanowiący punkt wyjścia używa wszystkich dostępnych zmiennych. Kopiujesz, modyfikujesz, sprawdzasz efekt.
Co to zmienia w codziennej pracy
Załóżmy, że wdrażasz widget w sklepie z kosmetykami. Strona produktu ma minimalistyczny układ — dużo białej przestrzeni, cena podana jako jedna spójna liczba, czarny przycisk „Dodaj do koszyka". Domyślny widget Upsellic ma karty produktowe z gradientem, miękkimi cieniami i fioletowym przyciskiem CTA — wygląda przyjemnie, ale nie pasuje do reszty strony.
Zamiast wysyłać do nas wiadomość z prośbą o pomoc, klonujesz motyw systemowy, otwierasz edytor szablonów, wybierasz slot PRODUCT_CARD, usuwasz gradient, redukujesz cień, zmieniasz przycisk na czarny prostokąt. Po prawej stronie panelu przez cały czas wyświetla się podgląd na żywo z przykładowymi danymi — od razu widzisz, jak karta prezentuje się zarówno samodzielnie, jak i z dopisanym przez asystenta uzasadnieniem rekomendacji pod tytułem.
Każde naciśnięcie klawisza zapisuje się w wersji roboczej. Wersja robocza nie wychodzi poza Twój panel — produkcyjny widget przez cały czas wyświetla to, co ostatnio opublikowałeś. Możesz pracować nad slotem przez godzinę, możesz zostawić niedopracowany szkic na tydzień, możesz wrócić rano i kontynuować. Klienci nic nie zobaczą, dopóki nie klikniesz Publikuj.
To jest decyzja projektowa, nie szczegół techniczny. Wcześniej obserwowaliśmy, jak użytkownicy boją się dotknąć czegokolwiek w produkcyjnym widgetie, ponieważ każda zmiana natychmiast trafia na produkcję. Tutaj jest odwrotnie — eksperymentowanie nic nie kosztuje, a ostatni krok (publikacja) wymaga jednego świadomego kliknięcia.
Porównanie ze źródłem — co właściwie się zmieniło
Po godzinie edycji łatwo zapomnieć, co dokładnie zostało zmienione. Przy każdym slocie znajduje się przycisk Porównaj ze źródłem, który przełącza edytor w tryb diff side-by-side: po lewej oryginalny szablon systemowy, po prawej Twoja wersja. Każda różnica jest podświetlona linijka po linijce.
Nie mamy rozbudowanej historii zmian w stylu commit log — to nie jest Git. Ten widok wystarcza w praktyce: widzisz, co dodałeś, co usunąłeś, możesz zmiany zachować albo cofnąć przez Resetuj (przywraca slot do wersji systemowej) lub Odrzuć wersję roboczą (wraca do tego, co aktualnie jest opublikowane).
Eksport i import — motywy są przenośne
Każdy własny motyw możesz wyeksportować do pojedynczego pliku JSON. Kolory, wszystkie 15 slotów, łącznie z wersjami roboczymi i opublikowanymi. Plik otrzymuje nazwę z datą eksportu, np. MójMotyw.2026-05-01T12-34-56.theme.json.
Po co? Trzy konkretne zastosowania.
Pierwsze: agencja projektuje motyw na koncie testowym, eksportuje go, klient importuje na własnym koncie produkcyjnym. Bez ręcznego kopiowania szablonu po szablonie.
Drugie: chcesz cofnąć zmiany. Masz eksport sprzed dwóch tygodni? Importujesz go z powrotem — i tu ważny szczegół — import nigdy nie nadpisuje istniejącego motywu. Tworzy nowy motyw z dopiskiem (import 2026-05-01 14:22:08) w nazwie. Stary motyw, który aktualnie jest na produkcji, pozostaje nietknięty. Aby cofnąć zmiany, w ustawieniach widgetu wystarczy wskazać zaimportowany motyw. Jeśli okaże się, że jednak nowsza wersja była lepsza — wracasz do poprzedniego motywu jednym kliknięciem.
Trzecie: pełnoprawne testy A/B. Importujesz wariant B jako osobny motyw, podpinasz go do drugiego widgetu na tej samej stronie (np. dla 50% ruchu), zbierasz dane przez tydzień, decydujesz który motyw jest lepszy.
Edytor od środka
Edytor szablonów to Monaco — ten sam silnik, na którym opiera się VS Code. Podświetlanie składni HTML i Nunjucks dla slotów szablonowych, podświetlanie CSS dla slotu STYLES. Multi-cursor, wyszukiwanie i zamiana, dopasowywanie nawiasów, numery linii oraz pełen zestaw skrótów klawiszowych.
Po prawej stronie znajduje się podgląd na żywo, który automatycznie się odświeża przy każdej zmianie wersji roboczej. Korzysta z przykładowych danych — produktu, treści, zamówienia oraz dymków rozmowy odwzorowujących wygląd prawdziwej konwersacji z asystentem. Klikasz w kartę produktu w podglądzie — otwiera się modal, który przed chwilą edytowałeś. Klikasz X w prawym górnym rogu — modal się zamyka.
W pasku narzędzi znajduje się także przycisk Wyczyść cache widgetu. Użyj go gdy chcesz wymusić przebudowę na produkcji bez zmiany jakiegokolwiek szablonu.
Motywy systemowe są tylko do odczytu — i dlaczego to słuszne rozwiązanie
Trzy motywy systemowe — default, minimal, editorial — są oznaczone jako „tylko do odczytu". Jeśli chcesz coś zmienić, musisz najpierw sklonować motyw. To celowy zabieg.
Powód: gdy wydajemy aktualizacje (dodajemy nowy element, naprawiamy regresję wizualną w którejś z przeglądarek), zmiany trafiają wyłącznie do motywów systemowych. Twój sklonowany motyw pozostaje dokładnie w stanie, w jakim go zostawiłeś. Nie ma sytuacji, w której budzisz się rano, otwierasz sklep i widget nagle wygląda inaczej.
W razie potrzeby możesz sprawdzić, co zmieniło się w motywie systemowym — przycisk „Porównaj ze źródłem" zawsze pokazuje aktualną wersję systemową obok Twojej. Jeśli uznasz, że nowa wersja systemowa zawiera użyteczny element, którego Ci brakuje, kopiujesz go ręcznie do własnego motywu. Bez ryzyka, że nasze zmiany nadpiszą Twoje personalizacje.
Dla kogo to rozwiązanie
Jeśli Twój sklep ma wyrazistą tożsamość wizualną, a dotąd musiałeś sobie radzić z czterema kolorami z konfiguratora — to opcja dla Ciebie. Jeśli prowadzisz sklep oparty na motywie standardowym i chcesz, aby asystent AI prezentował się obok produktów tak, jakby był częścią szablonu, a nie doklejonym z zewnątrz widgetem — to również opcja dla Ciebie.
Jeśli Twoi użytkownicy nie odróżniają widgetu od reszty strony, gratulacje — Twoja konwersja z rekomendacji właśnie wzrosła. Niezależnie od tego, co asystent im pokaże, najpierw musi zostać zauważony i uznany za wiarygodnego rozmówcę.
Jak zacząć
Edytor jest dostępny na każdym koncie w sekcji Motywy → wybierz motyw → Edytor kodu. Pierwszy krok to sklonowanie któregoś z motywów systemowych — natychmiast otrzymujesz nazwę i wszystkie 15 slotów wstępnie wypełnionych zawartością systemową. Następnie pozostaje już tylko edycja, podgląd i publikacja.
Pełny przewodnik krok po kroku — ze wszystkimi przyciskami, zrzutami ekranu i procesem eksportu oraz importu — opisaliśmy w osobnym przewodniku: