Kolory, czcionka i motyw

Widget przejmuje kolor twojej marki, twoją czcionkę i, jeśli chcesz, cały własny zestaw kolorów. Przy tym przelicza wszystko tak długo, aż każdy tekst na każdej powierzchni będzie czytelny. Ty wybierasz kolor, a widget dba o kontrast.

Wszystkie ustawienia z tej strony znajdziesz pod /app/projects/{id} w zakładce Wygląd, sekcja Marka. Wyjątkiem jest schemat kolorów (jasny, ciemny, automatyczny): jest w zakładce Instalacja w sekcji Podstawy.

Asystent projektowania

Na górze sekcji Marka asystent prowadzi cię przez projekt w czterech krokach:

1. Wygląd – 18 gotowych szablonów, które możesz filtrować według kategorii Jasne, Ciemne, Poważne, Zabawne, Ciepłe, Chłodne i Minimalistyczne. Wśród nich są np. Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit i Espresso.
2. Kolory – kolor główny i akcent, szybki wybór spośród ośmiu par kolorów oraz wybór powierzchni: domyślne, jasne, ciemne albo własne.
3. Forma – styl okna, promień rogów, kształt i rozmiar przycisku czatu.
4. Gotowe – podsumowanie.

Asystent nic sam nie zapisuje. Wypełnia tylko pola poniżej, a zapis następuje dopiero po kliknięciu Zapisz. Miniatura w asystencie to szkic. Prawdziwy widget z twoimi wartościami zobaczysz w podglądzie w sekcji Ekran startowy widgetu.

Do dostrajania rozwiń Wszystkie ustawienia pojedynczo. Czcionkę i własny CSS znajdziesz tylko tam.

Pola

• Kolor główny – kolor twojej marki w postaci #rrggbb. Barwi przycisk czatu, przycisk wysyłania, linki, obramowanie fokusu i (w mieszance) dymki twoich odwiedzających. Bez własnej wartości: fiolet #6D28D9 w jasnym motywie, #9B7BFF w ciemnym.
• Akcent – drugi kolor w postaci #rrggbb, np. dla liczników i wyróżnień. Bez własnej wartości: #BE185D w jasnym, #FF6B8A w ciemnym.
• Promień rogów (px) – od 0 do 28. 0 oznacza ostre rogi. Domyślnie 12.
• Rodzina czcionek (CSS) – zapis CSS, np. Inter, system-ui, sans-serif, najwyżej 120 znaków. Widget nie pobiera plików czcionek. Wybierz więc czcionkę, którą twoja strona i tak ładuje, albo czcionkę systemową. Puste pole oznacza czcionki systemowe urządzenia.
• Szablony – jedno kliknięcie ustawia naraz kolory, powierzchnie, promień, przycisk czatu i styl. Zapis następuje dopiero po kliknięciu Zapisz.

Prawidłowe są tylko kolory w postaci #rrggbb z sześcioma znakami. Skróty jak #f00 albo rgb(…) są odrzucane i wtedy obowiązuje wartość domyślna.

Powierzchnie i tekst

W części Powierzchnie i tekst możesz w razie potrzeby ustawić pięć kolejnych kolorów. Każdy ma pole wyboru własny kolor:

• Tło – powierzchnia okna.
• Powierzchnia dymka – dymki twojego zespołu i asystenta.
• Tekst – kolor tekstu.
• Tekst poboczny – godziny, wskazówki, podpisy.
• Linie – linie podziału i ramki.

Bez zaznaczenia widget używa zestawu kolorów pasującego do strony, jasnego albo ciemnego. Wartość w polu jest wtedy tylko punktem wyjścia, a nie podglądem. Z zaznaczeniem obowiązuje twój kolor.

Jeśli ustawisz tylko własne tło, widget wyprowadzi z niego resztę: powierzchnię dymka, tekst, tekst poboczny i linie.

Czytelność: co widget przelicza

Klienci wybierają kolor swojej marki, a nie kolor czytelny. Dlatego widget sprawdza każde połączenie tekstu i powierzchni pod kątem współczynnika kontrastu co najmniej 4,5:1. To próg z WCAG 2.x dla zwykłego tekstu.

• Tekst na kolorze twojej marki (np. w przycisku wysyłania) automatycznie staje się biały albo prawie czarny, zależnie od tego, co jest lepiej czytelne.
• Kolor twojej marki jako kolor tekstu (linki, wyróżnienia) jest rozjaśniany albo przyciemniany małymi krokami, aż osiągnie 4,5:1. Powierzchnie zachowują twój kolor bez zmian, czyli przycisk czatu i przycisk wysyłania.
• Dymek twoich odwiedzających to mieszanka koloru marki i tła. Jeśli kontrast nie wystarcza, widget dodaje mniej koloru marki.
• Własne kolory tekstu i tekstu pobocznego przechodzą tę samą kontrolę – wobec wszystkich powierzchni, na których się pojawiają.

Co zostało przeliczone, konto pokazuje bezpośrednio pod formularzem w wierszu Przeliczone, aby tekst pozostał czytelny. Jasnożółty kolor tekstu wygląda więc w widgecie ciemniej, niż go wpisano, a tam zobaczysz dlaczego.

Na swojej stronie możesz też sam odczytać zmierzone wartości:

ReactiveChat('brandCheck');   // lista par ze zmierzonym i wymaganym kontrastem
ReactiveChat('brandTokens');  // kolory, które faktycznie są w widgecie

Jasny, ciemny albo jak strona

W sekcji Instalacja → Podstawy → Schemat kolorów widgetu wybierasz:

• jak strona (inaczej jak u odwiedzającego) – domyślnie. Widget sprawdza, czy twoja strona jest jasna czy ciemna, i się dopasowuje.
• jasny – zawsze jasny.
• ciemny – zawsze ciemny.

Przy wyborze automatycznym widget sprawdza w tej kolejności:

1. kolor tła twojej strony na środku ekranu,
2. właściwość CSS color-scheme na <html>, jeśli ma dokładnie wartość dark albo light,
3. typowe przełączniki na <html> albo <body>, np. klasę dark albo data-theme="dark",
4. na końcu ustawienie systemowe odwiedzającego.

Jeśli twoja strona przełącza się między jasnym a ciemnym motywem, widget robi to razem z nią. Sprawdza to też ponownie przy otwarciu okna.

W kodzie ustawisz motyw we fragmencie osadzenia albo w trakcie działania strony. To ustawienie ma pierwszeństwo przed ustawieniem w koncie:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' albo 'auto'

Przy setTheme widget zapamiętuje wybór w przeglądarce odwiedzającego. setTheme('auto') go znosi. Pasuje to do własnego przełącznika jasny/ciemny na twojej stronie.

Kolory w kodzie

Dla pojedynczych stron, np. kampanii, możesz ustawić markę we fragmencie osadzenia albo w trakcie działania strony. Nazwy pól to:

• primary, accent – kolor marki i akcent,
• bg, surface, text, textDim, line – pięć powierzchni,
• onPrimary – kolor tekstu na kolorze marki (inaczej automatycznie),
• radius – od 0 do 28,
• font – zapis czcionki w CSS,
• launcher i stil – zob. Przycisk czatu i Okno czatu.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand od razu przelicza kontrast i kolory pochodne, bez ponownego budowania widgetu. null usuwa wartość i wtedy obowiązuje wartość domyślna.

We fragmencie osadzenia atrybut nazywa się data-rc-brand i przyjmuje JSON:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Ważne – co wygrywa, fragment osadzenia czy konto? Fragment, który generuje dla ciebie konto, zawiera już kolor twojej marki, promień oraz kształt i rozmiar przycisku czatu. To tylko stan początkowy, żeby przycisk od razu pojawił się we właściwym kolorze. Gdy tylko widget pobierze ustawienia z serwera, w pełni obowiązuje konto.

Jeśli natomiast wpiszesz do data-rc-brand jakiekolwiek inne pole, np. accent, stil albo etykietę, marka we fragmencie liczy się jako własna marka tej strony. Wtedy wygrywa z kontem. Z konta na tej stronie obowiązuje już tylko wyświetlanie „Tylko przez własne linki”. Poza tym strona nie bierze udziału w żadnych testach A/B.

Jeśli zmienisz kolor marki w koncie, skopiuj potem ponownie fragment osadzenia z zakładki Instalacja. Inaczej podczas ładowania na chwilę mignie stary kolor.

Jak działa sam fragment osadzenia i jakie są inne sposoby (window.ReactiveChatSettings, ReactiveChat('boot', …)), opisuje Integracja techniczna.

Własny CSS

W części Wszystkie ustawienia pojedynczo → Własny CSS piszesz CSS, który jest stosowany na końcu, po wszystkich innych regułach.

• Najwyżej 20 000 znaków.
• @import jest usuwany – przy zapisie i w widgecie.
• CSS działa tylko w widgecie. Działa w odizolowanym obszarze (Shadow DOM) i nie może zmienić twojej strony. I odwrotnie: CSS twojej strony nie sięga do widgetu. To jest właściwe miejsce na takie zmiany.
• Dwie reguły widget potem przywraca: widoczną ramkę fokusu dla użytkowników klawiatury i przycisk zamykania w nagłówku. Kto ukryje stylami drogę wyjścia z czatu, zastawia pułapkę na użytkowników klawiatury.
• Wewnętrzne nazwy klas widgetu nie są gwarantowanym interfejsem. Po zmianach sprawdź swój CSS w podglądzie.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

W kodzie to samo zrobisz przez customCss, np. w ReactiveChat('boot', { customCss: '…' }) albo atrybutem data-rc-custom-css.

Logo w nagłówku okna

Najprościej wpisać logo w koncie: Projekt → Wygląd → Marka, pole Logo (adres). Pojawi się wtedy w nagłówku okna czatu, najpóźniej minutę po zapisaniu.

W kodzie przez logo ustawisz dodatkowo wysokość, tekst alternatywny i miejsce, na przykład logo w przycisku czatu. Logo ustawione w kodzie ma pierwszeństwo przed polem w koncie:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Przykładowa firma","height":24,"placement":"header"}'
        async></script>

• src – adres z https:// albo obraz jako data:image/…. Mały plik SVG jako adres data: oszczędza jedno pobranie.
• alt – tekst alternatywny.
• height – wysokość w pikselach, od 12 do 40, domyślnie 20.
• placement – header (nagłówek, domyślnie), launcher (w przycisku czatu) albo both.

Logo na stronie startowej wygodnie ustawisz natomiast w koncie, zob. Strona startowa czatu.

Gdy coś wygląda inaczej, niż się spodziewasz

• Kolor jest ciemniejszy albo jaśniejszy niż wpisany: to ochrona kontrastu. Wiersz Przeliczone pod formularzem pokazuje, co zostało dopasowane.
• Zmiany w koncie nie docierają: czy twój fragment osadzenia zawiera data-rc-brand z dodatkowymi polami? Wtedy wygrywa fragment. Poza tym po zapisaniu trwa to do minuty.
• Podczas ładowania na chwilę miga inny kolor: po zmianie koloru skopiuj fragment osadzenia ponownie.
• Czcionka nie działa: czy twoja strona ładuje tę czcionkę? Widget nie pobiera plików czcionek.