Dostosowanie szablonów widgetu

Czym są sloty szablonów

Każdy motyw w Upsellic składa się z 15 niezależnych slotów szablonów. Każdy slot definiuje jeden fragment wizualny widgetu — na przykład kartę produktową pokazywaną gdy AI rekomenduje produkt, albo modal oceny rozmowy pojawiający się gdy klient zamyka czat. Sloty napisane są w Nunjucks (język szablonów podobny do Twig, Handlebars czy Jinja), a jeden slot STYLES zawiera komplet CSS spinający całość.

Oznacza to, że każdy element widgetu, który widzi odwiedzający, jest edytowalny — per merchant, per motyw. Czat możesz dopasować do wyglądu wizualnego sklepu w każdym detalu — kolory, typografia, odstępy, kształty przycisków, układy kart — bez żadnych prac po naszej stronie i bez wpływu na widget jakiegokolwiek innego sklepu.

Slot	Co renderuje
PRODUCT_CARD	Karta rekomendowanego produktu w wiadomości asystenta
CONTENT_CARD	Karta rekomendowanego artykułu / treści
ORDER_CARD	Karta śledzenia zamówienia — status + link do przewoźnika
WELCOME_MESSAGE	Powitanie pokazywane przy pierwszym otwarciu czatu
GOODBYE_MESSAGE	Pożegnanie po zakończeniu rozmowy
HEADER	Górny pasek widgetu (tytuł, podtytuł, kontrolki)
FOOTER	Pasek brandingu pod polem wpisywania
QUANTITY_TIERS	Blok cen ilościowych dla produktu
MESSAGE_USER	Dymek wiadomości klienta
MESSAGE_ASSISTANT	Dymek wiadomości asystenta
PRODUCT_MODAL	Pełny popup ze szczegółami produktu po kliknięciu w kartę
RATING_MODAL	Modal oceny rozmowy z przyciskami sentymentu
HANDOFF_UI	Ekrany przekazania do agenta (oczekiwanie / połączono / kanały zapasowe)
STYLES	Komplet CSS dla całego motywu

Upsellic dostarcza motywy systemowe (default, minimal, editorial) — to wbudowane wzorce, świadomie tylko do odczytu, żeby nasze przyszłe aktualizacje nie nadpisywały niczyich personalizacji. Aby dostosować widget, najpierw klonujesz jeden z motywów systemowych do prywatnego motywu własnego należącego tylko do Twojego konta. Od tego momentu motyw jest Twój i możesz go dowolnie edytować.

Klonowanie motywu systemowego

Zanim zaczniesz cokolwiek edytować, potrzebujesz własnego motywu — kopii motywu systemowego, która działa tylko na Twoim koncie.

W menu bocznym panelu kliknij Motywy. Zobaczysz wszystkie dostępne motywy — systemowe są oznaczone osobno od własnych, które utworzyłeś wcześniej.

Pojawia się modal z prośbą o nazwę nowego motywu. Wybierz nazwę odzwierciedlającą markę lub przeznaczenie (np. Edycja świąteczna, Sklep NL, Mobile-first).

Po potwierdzeniu nowy motyw własny pojawia się na liście — wszystkie 15 slotów jest wstępnie wypełnione zawartością z motywu systemowego, z którego klonowałeś. Kolory też są skopiowane, ale wszystko jest teraz edytowalne.

Edycja slotu

Na karcie dowolnego motywu własnego kliknij przycisk Edytor kodu. Edytor z lewej strony zawiera listę 15 slotów, w głównym obszarze edytor Monaco, a z prawej panel podglądu na żywo, który renderuje widget z aktualnej wersji roboczej.

Kliknij dowolną nazwę slotu w pasku bocznym — edytor ładuje zawartość tego slotu, a podgląd przeładuje się. Aktywny slot jest podświetlony, a sloty z niezapisanymi wersjami roboczymi (więcej o tym za chwilę) są oznaczone, abyś widział co było modyfikowane.

Edytor to pełnoprawne Monaco (ten sam silnik co w VS Code) z podświetlaniem składni dla HTML / Nunjucks (w slotach szablonowych) i CSS (w slocie STYLES). Dopasowywanie nawiasów, numery linii, multi-cursor, find & replace, skróty klawiszowe — wszystkie funkcje, jakich potrzebujesz do edycji kodu.

Panel podglądu po prawej stronie przeładowuje widget za każdym razem, gdy zmieni się wersja robocza. Używa przykładowych danych produktów / treści / zamówień, więc widzisz jak wyglądają karty, dymki, modale i ceny bez wysyłania prawdziwych czatów. Kliknij w kartę produktu w podglądzie, żeby zweryfikować modal, który właśnie edytowałeś.

Publikowanie zmian

Wersje robocze pozwalają bezpiecznie eksperymentować. Aby opublikować zmiany przebieg pracy wygląda następująco:

Kliknij Porównaj ze źródłem na edytowanym slocie. Edytor przełącza się w tryb diff side-by-side (wbudowany diff editor Monaco) — po lewej oryginalny szablon systemowy, po prawej Twoja wersja robocza. Każda różnica jest podświetlona linijka po linijce, więc dokładnie widzisz, co się zmieni przed wejściem na live.

Kliknij Publikuj, żeby wypchnąć wersję roboczą aktywnego slotu na produkcję. Albo kliknij Publikuj wszystko w pasku narzędzi, żeby wypublikować wszystkie sloty z niezapisanymi zmianami — to prócz publikacji wykonuje też czyszczenie cache dla motywu, jest szybsze przy edycji wielu slotów.

• Odrzuć wersję roboczą — przywraca wersję roboczą slotu do tego, co aktualnie jest opublikowane, cofając nieopublikowane zmiany.
• Resetuj — przeładowuje slot z oryginalnego szablonu systemowego (tego, z którego motyw był klonowany). Przydatne, gdy chcesz zacząć zmieniać dany slot od zera.

Czyszczenie cache widgetu

Najczęściej nie musisz ręcznie czyścić cache — publikacja slotu już to robi automatycznie. Dla rzadkich przypadków w pasku narzędzi edytora znajduje się przycisk Wyczyść cache widgetu.

Eksport i import motywów

Motywy są przenośne — możesz wyeksportować cały motyw własny (kolory + wszystkie 15 slotów, wersje robocze i opublikowane, w jednym pliku JSON) i zaimportować go z powrotem później, na tym samym koncie albo na innym.

Na karcie dowolnego motywu własnego kliknij Eksport. Plik JSON pobiera się na Twój dysk z nazwą typu MójMotyw.2026-05-01T12-34-56.theme.json. Trzymaj go w bezpiecznym miejscu — to kompletny snapshot motywu.

Kliknij Importuj motyw w pasku narzędzi na górze listy motywów i wybierz plik JSON. Importowany motyw zawsze ląduje jako nowy motyw własny — jego nazwa to oryginalna nazwa z dopiskiem znacznika czasu importu, np. MójMotyw (import 2026-05-01 14:22:08).

Import nigdy nie nadpisuje istniejącego motywu. To oznacza, że możesz:

• Cofnąć personalizację, importując starszy snapshot — poprzednia wersja pojawi się jako zupełnie nowy motyw, a Ty ustawisz go w edycji ustawień widgetu.
• Eksperymentować — zaimportować snapshot, dostosować bez ruszania oryginału, robić testy A/B przełączając motyw widgetu.