Jak osadzić widget Chateo na swojej stronie

Minimalna instalacja

Kod ładuje się w tle i nie blokuje wyświetlania strony. Dodaj stronę w panelu, a potem wklej kod w sekcji <head>.

Zaloguj się do panelu i wejdź w Ustawienia, potem Strony.
Kliknij Dodaj stronę. Wpisz Nazwa strony (widzą ją tylko osoby z zespołu) oraz Domeny, jedną w wierszu, bez https://, na przykład sklep.pl.
Wybierz Język widżetu i Strefa czasowa (według niej liczone są godziny pracy i statystyki, na przykład Europe/Warsaw), a potem kliknij Utwórz stronę.
Kliknij Kopiuj kod. Kod jest też zawsze dostępny na liście stron pod przyciskiem Kod instalacyjny.
Wklej kod w sekcji <head> każdej strony, na której ma działać czat. Najprościej zrobić to we wspólnym szablonie albo w menedżerze tagów.
W panelu kliknij Sprawdź instalację. Gdy zobaczysz Widżet działa na i swoją domenę, czat jest gotowy.

Kod wygląda tak:

<!-- Chateo - czat na żywo (loader) -->
<script>
  window.chateo = window.chateo || function () { (chateo.q = chateo.q || []).push(arguments); };
</script>
<script async src="https://app.chateo.pl/w/v1/loader.js" data-site-key="TWOJ_SITE_KEY"></script>
<!-- /Chateo -->

Zamień tylko TWOJ_SITE_KEY.

Wskazówka. Komentarze  ułatwiają później znaleźć i usunąć fragment w szablonie sklepu. Zostaw je na miejscu.

Gdzie znaleźć klucz portalu

W panelu kod instalacyjny zawiera już Twój prawdziwy klucz strony. Skopiuj go przyciskiem Kopiuj kod zamiast przepisywać ręcznie.

Klucz zaczyna się od pk_ i jest publiczny, więc nie jest sekretem.

Dozwolone domeny

Widget ładuje się tylko wtedy, gdy domena strony pasuje do jednej z domen dodanych w ustawieniach portalu. Jeśli widget się nie pojawia, sprawdź najpierw tę listę. Zapis *.sklep.pl obejmuje wszystkie subdomeny, ale nie samą domenę główną sklep.pl.

Chcesz dodać drugą domenę albo domenę testową? Wejdź w ustawienia strony, do sekcji Strona i domeny, i dopisz domenę w polu Domeny. Jeśli widżet był już blokowany na nowym adresie, panel pokaże go z przyciskiem Dodaj do portalu.

Gdzie wkleić kod na popularnych platformach

W ustawieniach strony, w grupie Instalacja, w sekcji Integracja sklepu, wybierz Platforma sklepu. Zobaczysz instrukcję dopasowaną do platformy i kod gotowy do skopiowania. Najważniejsze miejsca:

Platforma	Gdzie wkleić
WordPress / WooCommerce	Wtyczka Chateo (zobacz niżej). Bez wtyczki: na końcu pliku `functions.php` motywu potomnego (child theme) albo we wtyczce do wstawiania kodu w nagłówku. Kod trafia do `<head>` każdej strony.
Shoper	Aplikacje i integracje, Własne integracje, pole „Nagłówek strony”.
Shopify	Sklep internetowy (Online Store), Motywy, Edytuj kod. Plik `layout/theme.liquid`, tuż przed `</head>`.
IdoSell	Sklep, Dodatki HTML/JS. Nowy dodatek typu HTML, miejsce: początek sekcji head, wszystkie podstrony.
Sky-Shop	Integracje, Własny kod JavaScript/HTML, miejsce „head”.
Magento 2	Content, Design, Configuration, HTML Head, „Scripts and Style Sheets”.
Google Tag Manager	Tags, New, Custom HTML, wyzwalacz „All Pages”, a potem publikacja kontenera.
Inna strona	Własna integracja: wklej kod w `<head>`.

Instrukcje opracowano na podstawie dokumentacji platform. Jeśli nazwy menu w Twoim panelu się różnią, napisz do nas, pomożemy.

WooCommerce: instalacja wtyczką

Sklep na WooCommerce najprościej połączyć gotową wtyczką, bez wklejania kodu. W panelu wybierz platformę WooCommerce, a potem:

Kliknij Pobierz wtyczkę Chateo dla WooCommerce i zapisz plik zip.
W WordPressie wejdź w Wtyczki > Dodaj nową > Wgraj wtyczkę i wybierz pobrany plik.
Włącz wtyczkę, potem otwórz WooCommerce > Chateo i wklej klucz strony (panel pokazuje go pod przyciskiem, z przyciskiem Kopiuj).

Metodę z plikiem functions.php znajdziesz w panelu w rozwijanej sekcji Alternatywa bez wtyczki.

Strona z polityką CSP

Jeśli Twoja strona ma politykę Content Security Policy, w ustawieniach strony wybierz Wariant instalacji (Content Security Policy): zwykły, „CSP z nonce” albo „Bez skryptów inline - tylko zewnętrzny loader”. Panel poda kod pasujący do wybranego wariantu.

Pamiętaj, że czat pojawia się tylko na stronach, które zawierają kod. Najprościej dodać go raz we wspólnym szablonie lub w menedżerze tagów.

Bezpieczeństwo danych z szablonu

Nigdy nie wstawiaj nazwy produktu, e-maila ani numeru zamówienia bezpośrednio w cudzysłowy JavaScript. Zbuduj cały ładunek po stronie serwera i wyrenderuj go przez enkoder JSON bezpieczny dla znacznika <script>.

Uwaga. Dane klienta zostają w kodzie strony renderowanej przy każdym wyświetleniu. Nie umieszczaj ich w osobnym pliku .js, który mógłby zapamiętać cache.