Motyw i Wygląd
Strona Motyw to miejsce, w którym nadajesz swojemu asystentowi jego wizualną tożsamość — nazwę, awatar, kolory marki — oraz wybierasz kanały, w których będzie działał. Wszystko jest podglądane na żywo na samej stronie, dzięki czemu możesz wprowadzać zmiany bez opuszczania pulpitu nawigacyjnego.
Spraw, aby Twój agent AI WYGLĄDAŁ na markowy · Motyw + widget GDPR
→ Ścieżka administratora: Dostosowanie → Motyw (/admin/chatModel/{id}/settings/theme)
Co możesz skonfigurować
Strona jest zorganizowana w trzy kroki. Możesz przechodzić do przodu i do tyłu w dowolnym momencie; zmiany w kroku 2 są zapisywane po naciśnięciu Zapisz i Następny.
Krok 1 — Tożsamość
- Nazwa — publiczna nazwa Twojego asystenta (np. "Emma", "Bot Wsparcia"). Widoczna wszędzie tam, gdzie Twój asystent rozmawia z użytkownikami.
- Awatar — obrazek, który użytkownicy widzą w nagłówku czatu i dymkach wiadomości. Prześlij kwadratowy obrazek; my go przeskalujemy i udostępnimy z naszego CDN.
Nazwa to to, jak użytkownicy zwracają się do bota. Wybierz coś, co pasuje do marki i jest łatwe do wpisania — staje się tożsamością asystenta w każdym kanale.
Krok 2 — Kolory
Dwa kolory definiują całą paletę widgetu:
| Kolor | Gdzie się pojawia |
|---|---|
Podstawowy (brand.200) | Tło unoszącego się przycisku, akcenty dymków wiadomości, stany najechania |
Drugorzędny (brand.500) | Przycisk wysyłania, linki w rozmowie, pierścienie fokusu, stany aktywne |
Obydwa pola akceptują dowolną wartość HEX. Podgląd na żywo na dole strony odzwierciedla Twoje zmiany w czasie rzeczywistym, dzięki czemu możesz wybrać parę, która dobrze wygląda na Twojej stronie przed zapisaniem.
Dlaczego tylko dwa kolory? Nasz system projektowy wyprowadza pełną 5-stopniową paletę (100/200/500/700/900) z tych dwóch punktów odniesienia. Ty ustalasz ton; my dbamy o resztę, aby była spójna.
Krok 3 — Integracja
Gdy Twój asystent wygląda odpowiednio, przejdź bezpośrednio do wybranego kanału integracji:
- Widget Webowy — kod osadzenia dla dowolnej strony internetowej, z pełną kontrolą nad przyciskiem i układem
- WordPress — automatyczne wstrzykiwanie za pomocą wtyczki WordPress
- PrestaShop — automatyczne wstrzykiwanie za pomocą modułu PrestaShop
- Shopify — połącz swój sklep i automatycznie wstrzyknij czatbota
- Joomla — automatyczne wstrzykiwanie za pomocą wtyczki Joomla
Każda karta prowadzi do dedykowanej strony integracji, gdzie dostosowujesz styl przycisku, pozycję, tryb feedbacku, funkcje głosowe i zachowanie specyficzne dla kanału.
Podgląd na żywo
Widget czatu na żywo jest renderowany na samej stronie Motyw. Automatycznie wstrzykuje się za każdym razem, gdy zmieniasz kolor, dzięki czemu widzisz dokładne renderowanie, które otrzymają Twoi końcowi użytkownicy — nie ma potrzeby publikowania ani otwierania innej karty.
Podgląd używa tej samej paczki universal-chatbot.js, co produkcja, więc to, co widzisz, to to, co zobaczą Twoi odwiedzający.
Uprawnienia
| Akcja | Wymagane uprawnienie |
|---|---|
| Wyświetl stronę Motyw | THEME_READ |
| Zmień kolory / zapisz motyw | THEME_UPDATE |
| Zmień nazwę asystenta | CHAT_MODEL_UPDATE |
Członkowie bez THEME_UPDATE widzą stronę w trybie tylko do odczytu (pola wyłączone, brak przycisku Zapisz). Zobacz Kontrola dostępu, aby dowiedzieć się, jak przydzielać te uprawnienia.
Wskazówki
- Testuj na swoim prawdziwym tle. Otwórz swoją stronę w drugiej karcie podczas wybierania kolorów — to, co wygląda dobrze w pulpicie, może kolidować z Twoją sekcją główną.
- Zachowaj kontrast. Kolor drugorzędny jest również używany dla klikalnego tekstu w rozmowie. Jeśli użytkownicy nie mogą go przeczytać, nie klikną.
- Dopasuj swoje CTA, a nie logo. Widget jest interaktywną powierzchnią, więc zakotwicz go do koloru akcji Twojej strony (ton "Kup teraz" / "Zarejestruj się"), a nie koloru logo.
- Awatar ma większe znaczenie, niż myślisz. Prawdziwa twarz lub stylizowana postać konwertuje lepiej niż ogólny ikonka robota — użytkownicy częściej otwierają czat, gdy wygląda ludzko.
Powiązane
- Biografia — zdefiniuj osobowość swojego asystenta i zasady podejmowania decyzji
- Integracja czatbota — osadź go na stronie internetowej
- Kanały — połącz platformy komunikacyjne
- Kontrola dostępu — zarządzaj tym, kto może edytować motyw