Widget na stronie

Clovie osadzasz jednym znacznikiem <script>. Nie wymaga to zmian w szablonie, wtyczki ani pomocy programisty. Działa na WordPressie, Shopify, Wix, Webflow i we własnym kodzie.

Snippet

Gotowy kod znajdziesz w kreatorze asystenta, w kroku Instalacja:

<script src="https://clovie.pl/embed/v1.js" data-key="pk_live_TWOJ_KLUCZ" async></script>

Wklej go przed zamykającym </body>. Atrybut async sprawia, że skrypt nie blokuje ładowania strony.

data-key to klucz publiczny: jest widoczny w kodzie źródłowym Twojej strony i tak ma być. Nie daje dostępu do panelu ani do rozmów; służy wyłącznie do rozpoznania, którego asystenta załadować.

Dozwolone domeny: bez tego widget nie wystartuje

W tym samym kroku wpisujesz listę domen, na których wolno uruchomić asystenta: jeden pełny adres na linię:

https://twojafirma.pl
https://www.twojafirma.pl
http://localhost:3000

Przy każdym starcie widget porównuje adres strony z tą listą. Jeśli domeny nie ma, asystent się nie załaduje.

To zabezpieczenie, nie formalność: bez niego ktoś mógłby wkleić Twój snippet na własną stronę i zużywać Twój limit rozmów. Przed automatycznym zakładaniem rozmów spoza przeglądarki chronią dodatkowo limity opisane w rozmowach i limitach. Pamiętaj, że https://twojafirma.pl i https://www.twojafirma.pl to dla przeglądarki dwa różne adresy. Jeśli Twoja strona działa pod oboma, dopisz oba.

Jak wygląda i co można zmienić

Widget renderuje się w Shadow DOM, czyli w odizolowanym drzewie. W praktyce oznacza to, że style Twojej strony nie wpłyną na wygląd czatu, a style czatu nie popsują Twojej strony, nawet jeśli używasz motywu z agresywnym CSS-em.

W kroku Wygląd ustawiasz:

Ustawienie	Do czego służy
Rozmiar okna	Kompaktowy, standardowy, duży lub własne wymiary
Kolor główny	Akcenty, ikony i obramowania (dopasuj do marki)
Tryb jasny / ciemny	Niezależny od motywu Twojej strony
Pozycja przycisku	Prawy lub lewy dolny róg
Placeholder i disclaimer	Tekst w polu wpisu i pod nim

Szybkie tematy

Pod powitaniem możesz umieścić do sześciu przycisków z najczęstszymi pytaniami (krok Podstawy → Pola akcji). Gość klika zamiast pisać.

To najprostszy sposób, żeby skierować rozmowę tam, gdzie asystent jest najmocniejszy. Warto wpisać te pytania, które dostajesz mailem po kilka razy w tygodniu. Z panelu rozmów łatwo je wyłuskać po pierwszym tygodniu działania.

Dostępność

Z czatu da się korzystać samą klawiaturą i z czytnikiem ekranu:

Działanie gościa	Co robi czat
Tab do przycisku czatu i Enter	Otwiera okno, fokus trafia do pola wpisu (na telefonie do samego okna, żeby nie wyskakiwała klawiatura ekranowa)
Esc	Zamyka historię rozmów, a potem okno czatu; fokus wraca do przycisku, który je otworzył
Czeka na odpowiedź	Czytnik ekranu odczytuje gotową odpowiedź asystenta albo konsultanta. Wiadomości gościa i wcześniejsza część rozmowy nie są czytane ponownie
Ma włączone ograniczenie ruchu w systemie	Okno otwiera się bez przesunięć i skalowania, a lista wiadomości przewija się bez animacji

Okno czatu nie blokuje strony: Tabem można wrócić do jej treści, a czat zostaje otwarty.

API dla programistów (opcjonalne)

Widget rejestruje na stronie globalny obiekt window.Clovie. To jedyny wspierany sposób sterowania czatem z własnego kodu, np. z przycisku „Zapytaj asystenta” w treści strony:

Wywołanie	Efekt
window.Clovie.open()	Otwiera panel czatu (jeśli jest zamknięty)
window.Clovie.send("tekst")	Otwiera panel i wysyła wiadomość w imieniu gościa; gdy poprzednia rozmowa jest zakończona, zaczyna nową

Gdy wywołanie wynika z gestu gościa (kliknięcie, klawisz), fokus klawiatury przechodzi do okna czatu, a po zamknięciu klawiszem Esc wraca na Twój przycisk. Otwarcie bez gestu, np. z timera albo zaraz po załadowaniu strony, nie zabiera fokusu z pola, w którym ktoś pisze.

Skrypt ładuje się asynchronicznie, więc przed wywołaniem sprawdź, czy obiekt już istnieje, albo ponów próbę po chwili:

<button onclick="if (window.Clovie) window.Clovie.send('Chcę umówić konsultację')">
  Zapytaj asystenta
</button>

Widget montuje się w elemencie <div id="clovie-root"> z otwartym Shadow DOM. Wnętrze tego drzewa (klasy, struktura) nie jest częścią API i może się zmienić bez zapowiedzi; z własnego kodu używaj wyłącznie window.Clovie. Zmiany tego API są ogłaszane w changelogu jako zmiany widgetu.

Publikacja

Asystent działa na stronie dopiero po opublikowaniu (krok Test i publikacja). Do tego czasu ma status roboczy i widget go nie załaduje. Dzięki temu możesz spokojnie konfigurować go na produkcyjnej domenie.

Gdy widget się nie pokazuje

Objaw	Najczęstsza przyczyna
Nic się nie dzieje, brak przycisku	Domena spoza listy dozwolonych albo asystent nieopublikowany
Przycisk jest, ale czat nie odpowiada	Wyczerpana pula rozmów (sprawdź panel)
„Ładowanie…" bez końca	Zablokowany skrypt (adblock, CSP na Twojej stronie)

W konsoli przeglądarki (F12 → Console) widać komunikat, który z tych przypadków zachodzi.