Dostosuj wygląd, zachowanie i funkcjonalność swojego widgetu za pomocą systemu konfiguracji.
Wszystkie ustawienia widgetu są zarządzane przez konfigurację widgetu w Twoim pulpicie. Konfiguracja obejmuje ustawienia wyglądu, opcje zachowania i dostosowywanie treści.
Pomyśl o konfiguracji jako o DNA Twojego widgetu — definiuje wszystko, od kolorów i czcionek po przepływy rozmów i początkowe wiadomości. Najlepsza część? Zmiany w Twojej konfiguracji wchodzą w życie natychmiast bez potrzeby wprowadzania jakichkolwiek zmian w kodzie na Twojej stronie internetowej.
🎨 Żywe dostosowywanie
Użyj naszego wizualnego edytora konfiguracji w pulpicie, aby zobaczyć swoje zmiany w czasie rzeczywistym. Nie musisz zgadywać, jak będą wyglądać kolory lub jak będą działać przyciski — podglądaj wszystko przed publikacją.
Wygląd wizualny jest kluczowy, aby widget wydawał się naturalną częścią Twojej strony internetowej. Nasze ustawienia wyglądu dają Ci pełną kontrolę nad każdym wizualnym aspektem.
Wybierz kolory, które pasują do tożsamości Twojej marki. Wszystkie wartości kolorów powinny być w formacie hex (np. #FF5733).
Pro tip: Użyj narzędzia do sprawdzania kontrastu kolorów, aby upewnić się, że Twój tekst pozostaje czytelny w stosunku do wybranych tła. Jest to szczególnie ważne dla zgodności z dostępnością.
W sekcji Wygląd możesz ustawić osobną paletę kolorów Jasną i Ciemną — każdy tryb ma swoje własne ustawienia i kolory. Który widzi odwiedzający, wybierane jest na osadzeniu z data-theme="light|dark|system" (system podąża za urządzeniem odwiedzającego), lub w czasie rzeczywistym za pomocą CompaninWidget.setTheme(). Pozostaw paletę Ciemną pustą, aby automatycznie wyprowadzić ją z kolorów Jasnych.
Dostosuj rozmiar widgetu odpowiednio do swojego przypadku użycia i odbiorców. Większe wymiary zapewniają więcej kontekstu rozmowy, podczas gdy mniejsze wymiary wydają się mniej inwazyjne.
Rozważania mobilne: Widget automatycznie dostosowuje się na urządzeniach mobilnych, ale przetestuj swoją konfigurację na różnych rozmiarach ekranów, aby zapewnić dobre doświadczenie dla wszystkich użytkowników.
Ustawienia behawioralne kontrolują, jak widget wchodzi w interakcję z użytkownikami i reaguje na różne konteksty.
⚠️ Rekomendacja
Większość stron powinna zacząć od widgetu złożonego (<code>start_open: false</code>), aby uniknąć bycia inwazyjnym. Użytkownicy, którzy potrzebują pomocy, naturalnie klikną przycisk. Dla dedykowanych stron pomocy/wsparcia, rozpoczęcie otwarte może być korzystne.
Wiadomość powitalna to pierwsza rzecz, którą widzą użytkownicy, gdy otwierają widget. Uczyń ją przyjazną, jasną i zorientowaną na działanie. Możesz dodać interaktywne przyciski, aby prowadzić użytkowników do typowych zadań.
Dobra wiadomość powitalna powinna:
Przykład: "Cześć! 👋 Jestem tutaj, aby pomóc w pytaniach dotyczących naszych produktów, cen lub konta. Jak mogę Ci dzisiaj pomóc?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Przepływy rozmów to zdefiniowane ścieżki, które prowadzą użytkowników przez typowe scenariusze. Są idealne do FAQ, rozwiązywania problemów lub procesów wieloetapowych, takich jak zwroty lub rezerwacje.
Przepływy są wyzwalane przez konkretne słowa kluczowe lub kliknięcia przycisków. Po wyzwoleniu wyświetlają szereg odpowiedzi z opcjonalnymi przyciskami akcji, tworząc prowadzone doświadczenie rozmowy bez potrzeby przetwarzania AI.
Najlepsze praktyki dla przepływów:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Skonfiguruj tekst dla wielu języków:
Dodaj niestandardowe CSS do zaawansowanej stylizacji:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Skonfiguruj zewnętrzne punkty końcowe API dla zwiększonej funkcjonalności: