Widżet czatu #

Przewodnik integracji widżetu czatu na stronie internetowej #

Dodaj przyjazny dla użytkownika widżet czatu do swojej witryny, który umożliwi odwiedzającym komunikację bezpośrednio przez interfejs strony. Proces integracji jest prosty i zapewni Twojej witrynie wbudowane funkcje przesyłania wiadomości.

Tworzenie i konfigurowanie widżetu czatu #

Jak tam dotrzeć:

1. Kliknij Ustawienia (Settings) w pobliżu dołu lewego paska bocznego. (Na telefonie najpierw dotknij ikony menu ☰ w górnym rogu, aby otworzyć pasek boczny).
2. W lewym panelu Ustawień, w sekcji Kanały (Channels), kliknij Kanały (Channels).
3. Znajdź kartę Widżet czatu na stronie (Website chat widget).
4. Jeśli nie masz jeszcze widżetu, kliknij Połącz (Connect), aby utworzyć go, podając nazwę wyświetlaną i wiadomość powitalną.
5. Po utworzeniu kliknij Zarządzaj (Manage) w dowolnym momencie, aby otworzyć pełny panel konfiguracji.

Zapisane zmiany są automatycznie stosowane do aktywnego widżetu — nie ma potrzeby ponownego wklejania kodu instalacyjnego po wprowadzeniu zmian.

Tuż obok ustawień znajduje się Podgląd na żywo: przykładowa strona internetowa z działającym widżetem, pokazująca kolory, położenie, logo, ikonę uruchamiania i proaktywne wyskakujące okienko dokładnie tak, jak zobaczą je odwiedzający. Podgląd aktualizuje się na bieżąco podczas wprowadzania zmian, więc nie musisz zapisywać ustawień, aby zobaczyć, jak wygląda zmiana koloru lub motywu. Możesz nawet kliknąć przycisk czatu w podglądzie, aby otworzyć widżet i go przetestować.

Co możesz dostosować #

Panel Zarządzaj jest podzielony na cztery sekcje.

Wygląd #

• Motyw stylu: Zmień wygląd całego widżetu jednym kliknięciem. Sześć motywów określa wygląd, kolory, narożniki i czcionkę: Classic (oryginalny, jednolity wygląd — kolorowy pasek nagłówka na płaskim panelu), Glass (matowy, półprzezroczysty panel, który delikatnie rozmywa stronę za nim, z nagłówkiem i oknem wiadomości unoszącymi się wewnątrz jako zaokrąglone karty), Midnight (Glass w ciemnych kolorach), Bloom (delikatny róż, dodatkowo zaokrąglony), Ember (ciepły pomarańczowy Glass) oraz Mono (czarno-biały, o ostrych narożnikach). Motyw to punkt wyjścia — po wybraniu jednego z nich nadal możesz indywidualnie zmieniać każdy kolor lub ustawienie. Nowe widżety domyślnie korzystają z motywu Glass; przełączanie jest natychmiastowe wszędzie tam, gdzie widżet jest osadzony, bez konieczności wprowadzania zmian w kodzie na Twojej stronie.
• Narożniki i czcionka: Dwa niezależne ustawienia stylu. Narożniki określają stopień zaokrąglenia panelu, dymków i przycisków (Zaokrąglone, Łagodne lub Ostre), a Czcionka wybiera krój pisma widoczny dla odwiedzających (Domyślna, Szeryfowa, Zaokrąglona lub Mono) — czcionki pochodzą z urządzenia odwiedzającego, więc na Twojej stronie nie ładuje się nic dodatkowego.
• Nazwa wyświetlana: Widoczna w nagłówku widżetu.
• Logo: Prześlij obraz, który pojawi się na górze czatu. Użyj logo swojej firmy lub przyjaznego zdjęcia profilowego.
• Ikona uruchamiania: Ikona na samym pływającym przycisku czatu. Wybierz jedną z wbudowanych ikon (dymek czatu, papierowy samolot, znak zapytania i inne), użyj ponownie przesłanego logo lub prześlij własny obraz — przydatne, jeśli chcesz, aby zdjęcie członka zespołu witało odwiedzających.
• Kolory: Pięć kolorów, z których każdy odpowiada za inną część widżetu. Kolor marki to pływający przycisk, nagłówek i wiadomości odwiedzającego, a Tekst marki to tekst znajdujący się na nich. Dymek bota to tło odpowiedzi bota i wskaźnika pisania, a Tekst dymka bota to słowa wewnątrz nich oraz animowane kropki pisania. Okno czatu to panel za wszystkimi wiadomościami. Wybierz kolor dymka bota, który wyraźnie różni się od koloru marki — jeśli oba kolory będą takie same, obie strony konwersacji będą miały ten sam kolor i odwiedzający nie odróżnią odpowiedzi bota od własnych wiadomości. Jasnoszary dymek bota z ciemnym tekstem obok koloru marki to bezpieczne połączenie.
• Pozycja: Umieść pływający przycisk czatu w prawym dolnym lub lewym dolnym rogu, z przesunięciem poziomym i pionowym (w pikselach), jeśli zasłania inne elementy na stronie.
• Pytania początkowe: Sugestie szybkiej odpowiedzi (klikalne przyciski) wyświetlane na czacie, dzięki którym odwiedzający mogą rozpocząć rozmowę jednym dotknięciem zamiast pisania — na przykład „Jakie są wasze ceny?” lub „Czy oferujecie wsparcie?” — maksymalnie 10.
• Wiersz stopki: Opcjonalny krótki wiersz własnego tekstu pod oknem wiadomości, na przykład „Powered by Your Agency”. Domyślnie jest wyłączony i gdy jest wyłączony, pod oknem wiadomości nic się nie wyświetla. Włącz go, wpisz swój tekst (do 40 znaków) i, jeśli chcesz, dodaj link zaczynający się od https://; odwiedzający, którzy klikną tekst, otworzą tę stronę w nowej karcie. Agencje używają tego pola, aby umieścić własną nazwę na widżetach tworzonych dla klientów.

Zachowanie #

• Wiadomość powitalna: Pierwsza wiadomość, którą widzą odwiedzający po otwarciu czatu (na przykład „W czym mogę pomóc?”).
• Dźwięk: Odtwarzaj dźwięk, gdy w czacie pojawi się nowa wiadomość.
• Prośba o uprawnienia do powiadomień: Opcjonalnie zachęcaj odwiedzających do wyrażenia zgody na powiadomienia przeglądarkowe, aby otrzymywali alerty o odpowiedziach nawet po przełączeniu kart.
• Proaktywny dymek: Opcjonalny mały dymek, który pojawia się obok przycisku czatu, aby zachęcić użytkowników do rozmowy. Włącz go, aby ustawić jego treść, tekst przycisków akceptacji/odrzucenia oraz liczbę sekund oczekiwania przed jego wyświetleniem. Dymek zamyka się automatycznie po 20 sekundach, jeśli odwiedzający w niego nie kliknie. Jest to jedyny tekst wyświetlany przez widżet obok przycisku czatu: nie ma ustawienia dla stałej etykiety obok przycisku.
• Szybkość odpowiedzi AI: Suwak między Wolniej (bardziej ludzkie — AI robi krótką pauzę przed odpowiedzią) a Maksymalna szybkość (bardziej robotyczne — odpowiedzi przychodzą tak szybko, jak to możliwe). Ustawienie zrównoważone znajduje się pośrodku. Pierwsza część odpowiedzi pojawia się z opóźnieniem ustawionym suwakiem, a wskaźnik pisania wyświetla się krótko przed nią.
• Wyświetlaj notkę o zajętości podczas pracy AI: Domyślnie wyłączone. Gdy odpowiedź zajmuje więcej niż kilka sekund, na przykład dlatego, że Twój agent sprawdza coś w innym systemie, odwiedzający widzą krótki tekst obok kropek sygnalizujących pisanie: „Pracuję nad odpowiedzią” po 5 sekundach, „Sprawdzam to dla Ciebie” po 15 sekundach, a następnie „Nadal pracuję, już prawie gotowe” wraz z przeprosinami za oczekiwanie, jeśli trwa to dłużej. Szybkie odpowiedzi nadal wyświetlają tylko kropki. Tekst jest dostosowany do języka widżetu i pojawia się tylko wtedy, gdy AI faktycznie pracuje nad odpowiedzią, nigdy gdy AI jest wyłączone dla danego czatu lub gdy rozmowę przejął człowiek.

Języki #

Widżet jest samodzielnie wielojęzyczny — nie trzeba niczego włączać.

• Automatycznie wybiera język odwiedzającego. Najpierw sprawdza język zadeklarowany na stronie w kodzie HTML (<html lang="it">), a następnie, w razie jego braku, język przeglądarki odwiedzającego. Jeśli żaden z nich nie jest językiem, który obsługujemy, etykiety widżetu wyświetlą się w języku, w którym napisano wiadomość powitalną, a wiadomość powitalna, dymek wyskakujący i pytania początkowe pojawią się dokładnie tak, jak zostały napisane.
• Język strony sprzeczny z powitaniem nie jest brany pod uwagę. Niektóre kreatory stron umieszczają lang="en" na każdej stronie, niezależnie od języka witryny. Gdy strona deklaruje jeden język, a wiadomość powitalna została napisana w innym, widżet traktuje wartość strony jako domyślną dla kreatora: zamiast tego kieruje się językiem przeglądarki odwiedzającego, a jeśli nie jest to język, który obsługujemy, używa języka, w którym napisano wiadomość. Strona, która zmienia swoją wartość lang, gdy odwiedzający wybierze język w witrynie, jest zawsze uwzględniana. Jeśli wolisz nie polegać na tym mechanizmie, ustaw język na sztywno w sekcji Zachowanie (Behavior).
• Możesz też wybrać język samodzielnie. Pole Język widżetu w sekcji Zachowanie jest domyślnie ustawione na „Auto”, co oznacza powyższą detekcję. Wybierz tam język, a etykiety widżetu (pola Imię, E-mail i Telefon w formularzu odwiedzającego oraz ich przykładowy tekst, informacja o prywatności, przyciski) pozostaną w tym języku, niezależnie od ustawień strony czy przeglądarki. Użyj tej opcji, gdy kreator strony nie deklaruje właściwego języka lub gdy chcesz, aby dla każdego odwiedzającego język był stały.
• Obsługiwane języki: angielski, niderlandzki, niemiecki, francuski, hiszpański, włoski, portugalski, rumuński, polski, arabski, fiński, filipiński, słoweński, tajski, bengalski, japoński, norweski (Bokmål) i turecki. Jest to lista języków dla przycisków i etykiet widżetu.
• Języki pisane od prawej do lewej są wyświetlane w tym układzie. W przypadku odwiedzających posługujących się językiem arabskim, hebrajskim, perskim i urdu całe okno czatu jest odwrócone: nagłówek, dymki wiadomości, kropki sygnalizujące pisanie, formularz odwiedzającego i pole wiadomości zaczynają się od prawej strony. Przycisk dymka pozostaje w wybranym rogu. Odwiedzający posługujący się językiem hebrajskim, perskim i urdu widzą etykiety w języku angielskim (lub języku, który został ustawiony na sztywno), ale układ nadal jest zgodny z ich językiem. Wiadomość napisana w innym kierunku, np. odpowiedź po angielsku w czacie po arabsku, nadal jest czytana w poprawnej kolejności.
• Twoje wiadomości są tłumaczone automatycznie. Przy każdym zapisaniu zmian wiadomość powitalna, proaktywny dymek wyskakujący i pytania początkowe są tłumaczone na wszystkie osiemnaście powyższych języków. Piszesz je tylko raz, w wybranym przez siebie języku: język, w którym piszesz, jest rozpoznawany na podstawie samego tekstu, ta wersja jest zachowywana słowo w słowo, a każdy inny język jest jej tłumaczeniem. Nie ma znaczenia, jaki język jest ustawiony dla Twojego konta.
• Napisz własną wersję dla danego języka. Sekcja Tłumaczenia w panelu Zarządzanie, tuż pod sekcją Zachowanie, pozwala zastąpić automatyczne tłumaczenie własnym sformułowaniem, na przykład formalnym językiem hiszpańskim („usted”), jeśli automatyczne tłumaczenie jest nieformalne. Wybierz język w sekcji Język, a następnie wypełnij dowolne z pól: Wiadomość powitalna, Wiadomość w dymku, Tekst akceptacji i Tekst odrzucenia (wyświetlane, gdy dymek jest widoczny) oraz Pytania początkowe. Każde pole pokazuje automatyczne tłumaczenie w kolorze szarym; opcja Rozpocznij od automatycznego tłumaczenia kopiuje je, aby można było je edytować. Wszystko, co pozostawisz puste, zachowa automatyczne tłumaczenie. Języki, które przetłumaczyłeś samodzielnie, są wymienione jako pierwsze i oznaczone jako Twoje własne sformułowanie, a opcja Usuń moje sformułowanie (język) przywraca automatyczne tłumaczenie dla tego języka. Twoje własne sformułowanie jest zachowywane podczas późniejszej edycji oryginalnego tekstu; tylko automatyczne tłumaczenia są generowane ponownie.
• Przyciski w dymku również są tłumaczone. Przyciski Akceptuj i Odrzuć w proaktywnym dymku wyskakującym są tłumaczone wraz z pozostałymi wiadomościami, dzięki czemu odwiedzający posługujący się językiem hiszpańskim nie widzi już przycisków po angielsku.
• Pisz każdą wiadomość tylko w jednym języku. Jeśli umieścisz dwa języki w tym samym polu — powiedzmy linię po angielsku i linię po włosku — całość zostanie potraktowana jako jedna wiadomość i przetłumaczona w obecnej postaci, więc odwiedzający posługujący się językiem włoskim zobaczy to samo zdanie dwukrotnie. Napisz je raz, w wybranym przez siebie języku.
• AI odpowiada w języku odwiedzającego. Niezależnie od tego, w jakim języku pisze użytkownik, Twój agent odpowiada w tym samym języku, bez względu na to, w jakim języku wyświetlane są etykiety widżetu. Jeśli wolisz, aby agent zawsze odpowiadał w jednym, stałym języku, określ to w instrukcjach dla swojego agenta.
• Ustaw język dla każdej strony w kodzie osadzenia. Używasz jednego widżetu na angielskiej stronie i jego przetłumaczonej kopii? Dodaj data-lang do tagu skryptu widżetu na każdej stronie. data-lang="es" wyświetla widżet w języku hiszpańskim na danej stronie, niezależnie od ustawień przeglądarki; data-lang="page" sprawia, że widżet podąża za wartością <html lang="..."> strony (więc lang="es-MX" daje język hiszpański), nawet jeśli wiadomość powitalna została napisana w innym języku. To ustawienie ma pierwszeństwo przed polem Język widżetu, które z kolei ma pierwszeństwo przed automatyczną detekcją. Na przykład:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" data-lang="page" defer></script>

Pozostaw kod osadzenia z panelu Zarządzanie bez zmian i dodaj tylko atrybut data-lang. W przypadku wbudowanego panelu czatu umieść data-lang w <div data-chat-widget="…">.

Wskazówka: jeśli Twoja witryna nie posiada atrybutu lang w tagu <html>, dodaj go. Jest to dla nas najsilniejszy sygnał przy wyborze odpowiedniego języka, szczególnie w przypadku odwiedzających przeglądających stronę z zagranicy.

Pozyskiwanie leadów i prywatność #

• Zbieraj informacje o odwiedzających: Domyślnie wyłączone. Po włączeniu odwiedzający są proszeni o podanie imienia i adresu e-mail (oraz opcjonalnie numeru telefonu) przed rozpoczęciem rozmowy, dzięki czemu pozyskasz lead nawet wtedy, gdy opuszczą czat w trakcie rozmowy.
• Tytuł formularza i Podtytuł formularza: Dostosuj nagłówek i krótkie wyjaśnienie wyświetlane nad formularzem.
• Zbieraj numer telefonu: Włącz, aby prosić również o numer telefonu; wyłączone zbiera tylko imię i adres e-mail.
• Zbieraj nazwisko: Domyślnie wyłączone. Włącz, aby dodać wymagane pole Nazwisko zaraz po polu Imię. Jest ono zapisywane w kontakcie jako nazwisko, dzięki czemu Twoje AI oraz wszelkie systemy, z którymi się łączy, mają pełne imię i nazwisko od pierwszej wiadomości. Odwiedzający, którzy wypełnili formularz przed włączeniem tej opcji, nie będą o to ponownie proszeni.
• E-maile z nieprzeczytanymi odpowiedziami do odwiedzających: odwiedzający, który podał adres e-mail i nie zobaczył Twojej odpowiedzi po 15 minutach, otrzyma e-mail z linkiem powrotnym do czatu. Wyłącz tę opcję w Ustawienia → Powiadomienia → Odwiedzający widżet czatu. Zobacz E-maile do odwiedzających widżet czatu.

Odwiedzający zostawił numer telefonu i opuścił Twoją witrynę — czy mogę kontynuować rozmowę na WhatsApp? Tak. Otwórz czat z tą osobą i wybierz Kontynuuj na WhatsApp z menu trzech kropek (WhatsApp Web lub WhatsApp Business musi być połączony). Your AI Connector tworzy powiązaną konwersację na WhatsApp dla tej samej osoby, kopiuje jej imię, adres e-mail oraz szczegóły, a sztuczna inteligencja przenosi informacje o tym, co zostało powiedziane w witrynie, dzięki czemu nikt nie musi się powtarzać. Czat w witrynie pozostaje w tym samym miejscu, a obie rozmowy wskazują na siebie nawzajem w sekcji Powiązane konwersacje w panelu kontaktu. Zobacz Interfejs czatu.

Odwiedzający zostawił swój adres e-mail, ale nie dokonał rezerwacji — czy mogę wysłać wiadomość uzupełniającą? Tak, za pomocą automatyzacji. Krok Utwórz kontakt z ustawionym Kanałem na E-mail zamienia adres pozostawiony przez odwiedzającego w kontakt e-mailowy w Twoim połączonym Kanale e-mail, a następujący po nim krok Wyślij wiadomość wysyła wiadomość e-mail; odpowiedzi trafiają do Czatów Twojego agenta e-mail. Pełny przepis, w tym informacje o tym, jak zatrzymać sekwencję, gdy użytkownik dokona rezerwacji, znajduje się w Automatyzacje → Przykład: wiadomości uzupełniające e-mail dla leadów z czatu na stronie.

Czy agent AI może sam zaproponować przejście na WhatsApp? Tak, i nie wymaga to żadnej dodatkowej funkcji — wystarczy jedna linijka w instrukcjach dla agenta. Utwórz krótki link do swojego numeru WhatsApp z wstępnie wypełnioną wiadomością, taką jak „Cześć, rozmawiałem na Waszej stronie i chcę kontynuować tutaj”, a następnie poinstruuj agenta, kiedy ma go wysłać, na przykład: „Jeśli odwiedzający musi wyjść, chce kontynuować później lub pyta o WhatsApp, zaproponuj kontynuację tam i wyślij ten link: (Twój krótki link)”. Linki w widżecie są klikalne, więc odwiedzający trafia do WhatsApp z wybranym numerem i wstępnie wpisaną wiadomością, a jego pierwsza wiadomość otwiera konwersację WhatsApp w Twojej skrzynce odbiorczej. Jeśli odwiedzający zostawił w formularzu widżetu numer telefonu, z którego pisze (wraz z kodem kraju), Your AI Connector automatycznie powiąże obie konwersacje, a sztuczna inteligencja na WhatsApp będzie już znała historię czatu z witryny, dokładnie tak samo jak w przypadku opcji Kontynuuj na WhatsApp. Jeśli numer telefonu nie został zebrany, czaty nie zostaną powiązane, dlatego warto zadbać o to, aby wstępnie wypełniona wiadomość była wystarczająco konkretna, by agent na WhatsApp wiedział, skąd pochodzi dana osoba.

• Wymagaj potwierdzenia polityki prywatności: Opcjonalnie wymagaj od odwiedzających zaakceptowania polityki prywatności przed rozpoczęciem czatu i ustaw adres URL, do którego ma ona prowadzić.

Co widget przechowuje w przeglądarce odwiedzającego i czy muszę umieszczać go za banerem plików cookie? Nic nie jest przechowywane tylko przez załadowanie strony. Widget nie zapisuje żadnych plików cookie ani danych w pamięci przeglądarki, dopóki odwiedzający nie zdecyduje się na czat: nie wyśle pierwszej wiadomości, nie wypełni formularza informacji o odwiedzającym lub nie zaakceptuje Twojej polityki prywatności. Od tego momentu przechowuje losowy identyfikator konwersacji oraz kopię rozmowy w tej przeglądarce, jako pamięć własną (first-party storage) w Twojej domenie, dzięki czemu czat jest nadal dostępny po powrocie użytkownika. Nie ładuje żadnych skryptów analitycznych ani śledzących i nie ustawia żadnych plików cookie stron trzecich. Ponieważ nic nie jest zapisywane, dopóki odwiedzający nie poprosi o czat, mieści się to w zakresie pamięci ściśle niezbędnej do świadczenia usługi, o którą poprosił odwiedzający, więc możesz go załadować bez umieszczania go za banerem zgody. Jeśli Twoja witryna i tak korzysta z narzędzia do zarządzania zgodami, możesz bez problemu umieścić za nim widget; czat po prostu pojawi się, gdy odwiedzający wyrazi zgodę.

Kanały i osadzanie #

• Przycisk załącznika: Pozwala odwiedzającym przesyłać obrazy i pliki na czacie.
• Wybór emoji: Dodaje selektor emoji obok pola wiadomości.
• Linki do kanałów: Opcjonalnie dodaj linki do WhatsApp, Instagrama lub Messengera, aby odwiedzający mogli kontynuować rozmowę na preferowanej przez siebie platformie. Pojawiają się one dopiero po połączeniu numeru WhatsApp (WhatsApp Business lub WhatsApp Web), Instagrama lub Messengera. Włączenie linku do WhatsApp automatycznie wypełnia pole Twoim połączonym numerem; link pozostaje edytowalny, więc po zmianie numeru możesz wpisać w tym miejscu nowy.
• Przyciski akcji: Rząd skrótów u góry czatu, które przenoszą odwiedzającego w inne miejsce zamiast do rozmowy — zobacz Przyciski akcji poniżej.
• Biała lista domen: Ogranicz strony internetowe, na których można osadzić Twój widżet. Dodaj domeny, na których go zainstalowano (np. example.com lub *.example.com); pozostaw puste, aby zezwolić na dowolną domenę.
• Zablokowane kraje: Ukryj widżet przed odwiedzającymi z krajów, których nie obsługujesz. Odwiedzający, których lokalizacja sieciowa znajduje się w wybranym kraju, nigdy nie zobaczą widżetu, a każda próba rozpoczęcia czatu zostanie odrzucona. Pozostaw puste, aby zezwolić wszystkim. Zobacz Blokowanie botów i zapobieganie nadmiernemu zużyciu kredytów poniżej.
• Kieruj te czaty do: Wybierz agenta, który powinien obsługiwać czaty pochodzące z kodu, który zaraz skopiujesz. Pozostaw ustawienie Domyślne dla konta, aby użyć standardowego routingu widżetu czatu. Zobacz Kierowanie użytkowników z różnych stron do różnych agentów poniżej.
• Fragment kodu do osadzenia: Wybierz Pływający dymek lub Wbudowany i skopiuj kod instalacyjny (zobacz poniżej).
• Link demonstracyjny dla klienta: Wklej dowolny adres strony internetowej i kliknij Utwórz link, aby uzyskać udostępnialny link, który otwiera tę stronę z uruchomionym na niej Twoim widżetem, bez konieczności instalacji czegokolwiek po stronie klienta. Każdy utworzony link jest wyświetlany na liście i możesz wyłączyć każdy z nich. Zobacz Wyświetlanie widżetu na cudzej stronie internetowej poniżej.
• Udostępnij link: Gotowy link, który otwiera Twojego asystenta na osobnej stronie, na pełnym ekranie, bez potrzeby posiadania własnej witryny. Skopiuj go i wyślij w dowolne miejsce. Zobacz Udostępnianie bezpośredniego linku do czatu poniżej.

Na dole panelu akcja Usuń widżet czatu natychmiast usuwa widżet z Twojej strony internetowej — tego nie można cofnąć, a odwiedzający przestaną widzieć dymek czatu.

Przyciski akcji #

Niektórzy odwiedzający nie chcą czatować. Chcą poznać Twój numer telefonu, adres lub e-mail i chcą to zrobić za jednym dotknięciem. Przyciski akcji to rząd skrótów u góry panelu czatu, służący dokładnie do tego celu.

Dodaj maksymalnie sześć. Każdy z nich ma etykietę (tekst na przycisku) oraz miejsce docelowe, a miejsce docelowe zależy od wybranej akcji:

Te przyciski nie zużywają kredytów. Dotknięcie jednego z nich nie wysyła wiadomości i nie rozpoczyna rozmowy — po prostu przenosi odwiedzającego tam, gdzie chciał się udać. Tylko rzeczywista rozmowa z Twoim agentem AI zużywa kredyty, dokładnie tak jak wcześniej.

Kilka rzeczy, które warto wiedzieć:

• Przyciski pozostają widoczne podczas czatu. Ktoś może zadać dwa pytania, a następnie nadal dotknąć Wskazówki dojazdu bez przeładowywania strony.
• Twoje etykiety są wyświetlane dokładnie tak, jak je napisałeś. W przeciwieństwie do wiadomości powitalnej i pytań początkowych, etykiety przycisków nie są automatycznie tłumaczone, więc jeśli obsługujesz odwiedzających w kilku językach, dbaj o to, by etykiety były krótkie i zrozumiałe (lub pisz je w swoim głównym języku).
• Wypełnij przycisk poprawnie, inaczej nie zostanie zapisany. Jeśli numer telefonu, adres e-mail lub link są nieprawidłowe, panel poinformuje o tym i zablokuje Zapisz zmiany, zamiast publikować przycisk, który nie działałby na Twojej stronie.
• To nie są odpowiedzi FAQ. Przyciski akcji jedynie kierują ludzi w inne miejsce; nie odpowiadają gotowym tekstem. Pytania to zadanie Twojego agenta AI, który odpowiada na nie na podstawie Twojej bazy wiedzy. Jeśli chcesz zasugerować, o co zapytać, użyj pytań początkowych w sekcji Wygląd.

Czego nie można dostosować #

Panel zarządzania (Manage) zawiera pełny zestaw opcji. W szczególności:

• Brak niestandardowego CSS lub arkusza stylów. Stylizacja ogranicza się do tego, co oferują narzędzia do wyboru motywu, narożników, czcionek i kolorów — nie można wstrzykiwać własnego kodu CSS do widżetu, a reguły CSS na Twojej stronie nie będą miały na niego wpływu.
• Brak niestandardowego tekstu zastępczego w polu wiadomości.
• Brak możliwości osadzania wideo wewnątrz czatu.

Jeśli którykolwiek z tych punktów stanowi przeszkodę, osadzenie wewnątrz strony (inline embed) zapewnia największą kontrolę: widżet znajduje się w kontenerze na Twojej własnej stronie, którego rozmiar i położenie określasz samodzielnie.

Ochrona przed botami i zużyciem kredytów #

Każda odpowiedź AI kosztuje kredyty, więc skrypt (lub jedna znudzona osoba) otwierająca czat za czatem na Twojej stronie jest jedyną rzeczą, przed którą musi bronić się publiczny widżet. Widżet radzi sobie z większością tych sytuacji samodzielnie, a dwa ustawienia w panelu Zarządzania pozwalają zaostrzyć te zasady dla Twojej witryny.

• Biała lista domen. Tylko wymienione przez Ciebie witryny mogą wyświetlać widżet. Każdy, kto skopiuje Twój kod osadzania na inną stronę, nie zobaczy nic.
• Zablokowane kraje. Odwiedzający, których lokalizacja sieciowa znajduje się w zablokowanym przez Ciebie kraju, nigdy nie zobaczą widżetu, a próba rozpoczęcia czatu zostanie odrzucona. Lokalizacja jest określana na podstawie połączenia odwiedzającego: osoba korzystająca z VPN będzie widoczna jako użytkownik z kraju, w którym znajduje się serwer VPN, a odwiedzający, którego lokalizacji nie można ustalić, zostanie przepuszczony zamiast zablokowany. Twój własny podgląd wewnątrz aplikacji działa nadal, nawet jeśli zablokujesz kraj, w którym aktualnie przebywasz.
• Nowe konwersacje na połączenie. Jedno połączenie (w praktyce jedno gospodarstwo domowe lub adres biurowy) może otworzyć 20 nowych konwersacji dziennie w widżecie. Powracający odwiedzający kontynuujący istniejący czat nie są wliczani, liczą się tylko zupełnie nowe konwersacje, więc skrypt, który ciągle rozpoczyna nowe czaty w celu wyłudzania odpowiedzi AI, wyczerpie limit po 20 próbach, podczas gdy prawdziwi odwiedzający nigdy tego nie zauważą. Jeśli wiele osób korzysta z jednego połączenia na Twojej stronie (kampus, call center), zwiększ tę liczbę za pomocą REST API przy użyciu max_new_chats_per_ip_daily; 0 wyłącza to sprawdzanie.
• Weryfikacja człowieka (opcjonalnie). Odwiedzający przechodzą szybką weryfikację Cloudflare Turnstile przed wysłaniem pierwszej wiadomości, dzięki czemu skrypt nie może w ogóle rozpocząć czatów. Większość osób nigdy nie musi w nic klikać; Cloudflare wyświetla pole wyboru tylko wtedy, gdy nie ma pewności. Wykorzystuje to Twoje własne bezpłatne klucze Turnstile, zobacz Dodaj weryfikację człowieka poniżej.
• Wbudowane limity. Oprócz tego każda sesja przeglądarki ma ograniczoną liczbę wiadomości, które może wysłać na minutę i na dzień, a agent odpowiadający na czacie przestaje odpowiadać odwiedzającemu, gdy osiągnie on Maksymalną liczbę wiadomości AI na czat ustawioną w sekcji Limity odpowiedzi.

Nic z tego nie identyfikuje urządzeń ani osób: widżet nie przechowuje niczego w przeglądarce odwiedzającego, dopóki nie zdecyduje się on na czat (patrz wyżej) i nie ma żadnego fingerprintingu.

Dodaj weryfikację człowieka (Cloudflare Turnstile) #

Włącz tę opcję, gdy boty ciągle otwierają czaty na Twojej stronie internetowej, a powyższe ustawienia są niewystarczające. Weryfikacja uruchamia się raz, tuż przed wysłaniem pierwszej wiadomości przez odwiedzającego. Odwiedzający, który przejdzie weryfikację, może kontynuować czat przez 24 godziny bez jej ponownego wyświetlania, a każdy powracający do wcześniejszej konwersacji może ją przeczytać przed weryfikacją.

1. Zaloguj się na swoje konto Cloudflare (wystarczy bezpłatne konto) i otwórz Turnstile.
2. Kliknij Add widget, nadaj mu nazwę i dodaj każdą domenę, na której działa Twój widżet czatu (na przykład yourshop.com). Pozostaw tryb widżetu ustawiony na Managed.
3. Skopiuj Site key oraz Secret key, które wyświetli Cloudflare.
4. W aplikacji otwórz panel Manage swojego widżetu czatu, włącz Human check before chatting, wklej oba klucze i zapisz.

Czego się spodziewać:

• Weryfikacja pozostaje wyłączona, dopóki oba klucze nie zostaną wypełnione, więc włączenie jej bez kluczy nigdy nie zablokuje dostępu odwiedzającym.
• Jeśli odwiedzający nie przejdzie weryfikacji lub pozostawi ją nierozwiązaną, jego wiadomość nie zostanie wysłana i otrzyma przycisk Ponów próbę.
• Weryfikacja pojawia się tylko w domenach dodanych w Cloudflare. W każdej innej domenie Cloudflare ją odrzuci i nikt na tej stronie nie będzie mógł wysłać wiadomości, więc dodaj każdą domenę przed włączeniem tej opcji.
• Jeśli Twoja witryna korzysta z polityki Content Security Policy, zezwól na https://challenges.cloudflare.com dla skryptów i ramek, w przeciwnym razie weryfikacja nie będzie mogła się załadować.
• Klucze należą do Twojego konta Cloudflare, a klucz tajny (secret key) nigdy nie jest wysyłany do przeglądarek Twoich odwiedzających.

Instrukcja instalacji #

Aby dodać widżet czatu do swojej strony internetowej, dodaj jedną linię kodu do kodu HTML swojej witryny.

1. Otwórz plik HTML swojej strony internetowej w edytorze tekstu.
2. Znajdź tag zamykający </body> — zazwyczaj znajduje się on na samym końcu pliku.
3. Wklej tę linię kodu tuż przed tagiem </body>, aby reszta strony załadowała się najpierw:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

4. Zastąp CONFIG_ID swoim unikalnym identyfikatorem konfiguracji, pokazanym w sekcji Kanały i osadzanie panelu Zarządzanie. Ten identyfikator jest specyficzny dla Twojego konta i łączy widżet z Twoim systemem przesyłania wiadomości.

Ten fragment nie spowolni Twojej witryny: to niewielki moduł ładujący, a sam widżet pobiera się w tle, nie blokując strony. Jeśli mimo to chcesz, aby widżet wstrzymał się do momentu całkowitego załadowania strony, możesz zamiast tego zawinąć ten sam adres URL w następujący sposób:

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

A jeśli chcesz opóźnić mały dymek z zaproszeniem, a nie ładowanie widżetu, służy do tego opóźnienie Proaktywnego dymka wyskakującego w sekcji Zachowanie powyżej — nie wymaga to użycia kodu.

Instalacja w Shopify #

1. W panelu administracyjnym Shopify przejdź do Sklep online > Motywy.
2. Przy motywie oznaczonym jako bieżący (opublikowany) kliknij przycisk … i wybierz Edytuj kod. Edycja wersji roboczej lub kopii motywu nie zmienia niczego w Twoim aktywnym sklepie.
3. Otwórz layout/theme.liquid i przewiń do zamykającego tagu </body> w dolnej części pliku.
4. Wklej linię instalacyjną tuż nad </body> i kliknij Zapisz:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Jeśli zainstalowałeś widżet przed tym, jak linia instalacyjna zaczęła zawierać defer, edytor kodu Shopify wyświetli pod nią czerwone podkreślenie. To podkreślenie jest ostrzeżeniem od sprawdzania kodu Shopify dotyczącym linii skryptu bez defer lub async, a nie błędem: motyw nadal się zapisuje, a widżet działa poprawnie. Dodanie defer, jak pokazano powyżej, usuwa podkreślenie i nie zmienia sposobu działania widżetu, więc nie ma potrzeby ponownej instalacji na innych stronach.

Oto kompletny przykład tego, jak powinien wyglądać Twój plik HTML z zaimplementowanym widżetem czatu:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
</body>
</html>

Osadzanie wewnątrz strony (Zaawansowane) #

Jeśli wolisz, aby czat pojawiał się jako część strony — na przykład w dedykowanej sekcji “Kontakt”, zakładce pomocy lub pasku bocznym — zamiast jako pływający dymek w rogu, zmień Fragment kodu do osadzenia na Wbudowany w panelu Zarządzanie i skopiuj wbudowany fragment kodu.

Wygląda to tak:

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Element <div> to punkt montowania — panel czatu renderuje się wewnątrz niego i wypełnia jego wymiary. Możesz wystylizować ten div w dowolny sposób (nadać mu stałą wysokość, umieścić go w kontenerze flex, w komórce siatki itp.), a panel czatu dostosuje się do niego.

Na stronie potrzebujesz tylko jednego znacznika <script>, nawet jeśli osadzasz wiele widżetów czatu. Skrypt skanuje stronę w poszukiwaniu każdego <div data-chat-widget="…"> i montuje panel czatu w każdym z nich.

Kiedy wybrać wersję inline, a kiedy pływającą:

• Pływający dymek jest odpowiedni dla zawsze dostępnego przycisku „Potrzebujesz pomocy?” w całej witrynie.
• Osadzenie inline jest odpowiednie, gdy czat ma znajdować się w konkretnym miejscu — na stronie pomocy, w pasku bocznym bazy wiedzy, w karcie pomocy w aplikacji — i sprawiać wrażenie natywnej części tej strony.

Osadzenie inline wykorzystuje tę samą konfigurację co pływający dymek (logo, wiadomość powitalna, pozyskiwanie leadów, pytania początkowe itd.), więc nie musisz niczego konfigurować dwukrotnie.

Pokaż widżet na stronie internetowej innej osoby #

Możesz wyświetlić swój widżet czatu na stronie internetowej, nad którą nie masz kontroli — bez kodu i bez konieczności uzyskiwania dostępu do ich witryny. To najszybszy sposób, aby pokazać potencjalnemu klientowi, jak asystent wyglądałby na jego własnych stronach.

1. Otwórz panel Zarządzanie i przewiń do sekcji Kanały i osadzanie.
2. W polu Link do wersji demonstracyjnej klienta wpisz adres strony internetowej (na przykład www.theircompany.com).
3. Opcjonalnie: pod polem wybierz agenta, który powinien odpowiadać w tej wersji demonstracyjnej, na przykład agenta stworzonego na podstawie strony internetowej potencjalnego klienta, aby rozmawiał o jego usługach, cenach i najczęściej zadawanych pytaniach. Pozostaw ustawienie Domyślne dla konta, aby użyć standardowego routingu widżetu czatu.
4. Kliknij Utwórz link. Link zostanie skopiowany i pojawi się na liście pod polem wraz z przyciskami Kopiuj i Otwórz oraz informacją o używanym agencie.
5. Wyślij link osobie, której chcesz go pokazać.

Otwarcie linku powoduje załadowanie danej strony internetowej z Twoim widżetem czatu unoszącym się na wierzchu, dokładnie tak, jak wyglądałoby to po zainstalowaniu. Każdy, kto posiada link, może go otworzyć — nie trzeba się nigdzie logować.

Kilka rzeczy, które warto wiedzieć:

• Czaty z wersji demonstracyjnej są prawdziwe. Wiadomości wysłane przez odwiedzającego w wersji demo trafiają do Twojej skrzynki odbiorczej, są obsługiwane przez Twojego agenta i zużywają kredyty tak samo jak każda inna rozmowa.
• Strona nie posiada brandingu. Wyświetla tylko ich stronę internetową i Twój widżet, nic więcej.
• Niektóre strony internetowe nie mogą być osadzane w ramkach. Wiele witryn (banki, duże sklepy detaliczne, strony z rygorystycznymi ustawieniami bezpieczeństwa) blokuje możliwość wyświetlania ich w innych stronach. Gdy tak się dzieje, link nadal działa: zamiast prawdziwej strony wyświetla neutralne okno przeglądarki z Twoim widżetem na wierzchu, dzięki czemu demo nadal spełnia swoją funkcję.
• Nie zmienia to ich strony internetowej. Nic nie jest instalowane ani modyfikowane — demo istnieje tylko wewnątrz tego linku.
• Wyłącz link, gdy demo się zakończy. Kliknij Wyłącz obok linku na liście i potwierdź. Od tego momentu każdy, kto go otworzy, zobaczy stronę z informacją, że link został wyłączony. Twój widżet i inne linki demo będą nadal działać. Wyłączonego linku nie można ponownie włączyć; zamiast tego utwórz nowy.
• Linki skopiowane przed 25 września 2026 r. Linki demo utworzone przed powstaniem listy nie znajdują się na niej. Będą działać do momentu kliknięcia Wyłącz je pod listą, co wyłączy wszystkie naraz (a Włącz je ponownie przywróci ich działanie).

Link demo utworzony bez wybranego agenta korzysta z domyślnego routingu Twojego konta, niezależnie od tego, co jest ustawione w opcji Kieruj te czaty do. Po wybraniu agenta, każdy czat z tego linku jest przypisywany do tego agenta i przez niego obsługiwany. Widżet zachowuje swój wygląd, nazwę i wiadomość powitalną. Link zawiera go jako &agent=AGENT_ID; ręczne dodanie tego do starszego linku również zadziała (użyj &, a nie ?, ponieważ link zawiera już ?).

Jeśli później usuniesz agenta używanego przez link demonstracyjny, link nadal będzie działać: jego czaty będą kierowane zgodnie z domyślnym routingiem konta, a na liście obok pojawi się informacja „usunięty agent, używa domyślnego”. Usunięcie agenta, który jest domyślnym agentem widżetu czatu, nie wpływa na linki przypisane do innego agenta.

Udostępnianie bezpośredniego linku do czatu #

Czasami nie ma strony internetowej, na której można umieścić widżet — chcesz przekazać komuś link, aby od razu mógł porozmawiać z Twoim asystentem. Każdy widżet czatu posiada taki link:

1. Otwórz panel Zarządzania i przewiń do Kanały i osadzanie.
2. Znajdź Link do udostępnienia (znajduje się tuż pod linkiem demonstracyjnym dla klienta).
3. Kliknij Kopiuj, aby pobrać link, lub Otwórz, aby wypróbować go samodzielnie.

Otwarcie go pokazuje tylko Twojego asystenta, wypełniającego cały ekran — bez strony internetowej w tle, bez dymka do kliknięcia na początku, bez niczego do zainstalowania. Umieść go w swoim bio na Instagramie, w kodzie QR na ulotce, w podpisie e-mail lub w wiadomości WhatsApp do potencjalnego klienta.

Link udostępniania korzysta z domyślnego routingu Twojego widżetu czatu. Aby zamiast tego otworzyć czat z konkretnym agentem, dodaj ?agent=AGENT_ID na końcu linku; każdy czat z niego będzie wtedy przypisany do tego agenta i przez niego obsługiwany, podczas gdy strona zachowa nazwę i wiadomość powitalną Twojego widżetu.

Kilka rzeczy, które warto wiedzieć:

• Czaty z linku są prawdziwe. Trafiają do Twojej skrzynki odbiorczej, Twój agent na nie odpowiada i zużywają kredyty jak każda inna rozmowa.
• Strona nie zawiera naszego brandingu. Pokazuje tylko Twojego asystenta i nic więcej, a także jest wykluczona z wyników wyszukiwania.
• Działa pod Twoim własnym adresem. Jeśli Twój dostawca uruchamia aplikację we własnej domenie, link również używa tego adresu, więc nie wyświetla się w nim nic nieznanego.
• Jeden odwiedzający na link, na przeglądarkę. Każdy, kto go otworzy, zachowuje tę samą tożsamość w danej przeglądarce, więc powrót później kontynuuje tę samą rozmowę, zamiast rozpoczynać nową jako nieznajomy. Inna przeglądarka lub link do innego widżetu oznacza innego odwiedzającego.

Wysyłanie różnych stron do różnych agentów #

Domyślnie każdy czat przychodzący przez Twój widżet jest obsługiwany przez tego samego agenta. Możesz to zmienić dla poszczególnych stron, dzięki czemu odwiedzający Twoją stronę z cennikiem będą rozmawiać z agentem sprzedaży, podczas gdy odwiedzający stronę pomocy będą rozmawiać z agentem wsparcia — wszystko z poziomu jednego widżetu czatu.

Istnieją dwa sposoby na uzyskanie kodu:

• Od agenta. Na stronie Agenci AI kliknij przycisk </> w wierszu lub otwórz agenta i przejdź do karty Punkty wejścia. W obu przypadkach otrzymasz gotowy do wklejenia fragment kodu, który jest już skierowany do tego agenta.

  Karta Punkty wejścia agenta zawiera również panel Widżet czatu na stronie, pokazujący, ilu czatami z witryny zarządza już ten agent. Czaty z osadzonego widżetu trafiają bezpośrednio do agenta, więc nie musisz tworzyć dla nich reguły punktu wejścia — agent bez żadnych reguł nadal odpowiada na czaty z osadzonego widżetu.

  Przycisk </> pojawia się tylko przy aktywnych agentach. Wstrzymany agent otrzymałby czat, ale nigdy by nie odpowiedział, więc opcja ta jest ukryta, dopóki go ponownie nie włączysz. Nie ma kanału do skonfigurowania dla agenta — agent może odebrać czat z dowolnego kanału.

• Z poziomu ustawień widżetu. W Ustawienia → Kanały → Zarządzaj w swoim widżecie czatu ustaw Kieruj te czaty do i skopiuj znajdujący się poniżej fragment kodu. Zmiana w menu rozwijanym powoduje przepisanie fragmentu kodu.

Fragment kodu dla wersji pływającej zawiera miejsce docelowe w adresie:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></script>

Fragment kodu dla wersji inline zawiera je w <div>, dzięki czemu jedna strona może zawierać kilka czatów kierowanych do różnych miejsc:

<div data-chat-widget="CONFIG_ID" data-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Fragmenty kodu skopiowane przed wycofaniem kampanii zawierają zamiast tego ?campaign= lub data-campaign=. Nadal działają, więc nie ma potrzeby ich ponownego wklejania.

Kilka rzeczy, które warto wiedzieć:

• Użyj przycisku kopiowania zamiast wpisywania identyfikatora ręcznie. Jeśli identyfikator nie pasuje do żadnego agenta na Twoim koncie, czat nadal będzie działał, ale powróci do domyślnego routingu.
• Osoba, która jest już w trakcie rozmowy, pozostaje z tym, z kim ją rozpoczęła, nawet jeśli później trafi na stronę wskazującą gdzie indziej. Zapobiega to zmianie osobowości rozmowy w połowie.
• Miejsce docelowe określone dla strony ma pierwszeństwo przed domyślnym ustawieniem konta oraz przed wyzwalaczami słów kluczowych.

Poinformuj widżet, kim jest odwiedzający (zaawansowane) #

Jeśli umieścisz widżet czatu w strefie członkowskiej, portalu klienta lub aplikacji, w której użytkownicy są już zalogowani, Twoja witryna już wie, kim oni są. Możesz przekazać te informacje do widżetu, aby odwiedzający nie musiał podawać danych, które już Ci przekazał, a Twoja sztuczna inteligencja mogła wykorzystać to, co już o nim wiesz.

Dodaj mały blok ustawień przed skryptem widżetu:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Twoja strona powinna uzupełnić te wartości po stronie serwera, na podstawie danych aktualnie zalogowanego użytkownika.

Aby zapisać również nazwisko, dodaj last_name obok name w bloku visitor (data-visitor-last-name w przypadku osadzenia typu inline). Jest to opcjonalne: imię i adres e-mail nadal wystarczą, aby pominąć formularz, niezależnie od tego, czy opcja Zbieraj nazwisko jest włączona.

Dzieją się dwie rzeczy:

• Formularz „Zanim zaczniemy…” jest pomijany. Po podaniu imienia i adresu e-mail odwiedzający przechodzi bezpośrednio do rozmowy, a te dane są zapisywane w jego profilu kontaktu dokładnie tak, jakby sam je wpisał.
• Wszystko w sekcji data jest przekazywane do Twojej sztucznej inteligencji. Wszystko, co tam umieścisz — plan, numer zamówienia, datę odnowienia, saldo kredytów, liczbę posiadanych licencji — staje się częścią wiedzy AI o tej osobie. Dzięki temu może ona odpowiedzieć na pytanie „kiedy odnawia się mój plan?” bez konieczności wcześniejszego pytania o to, kim jest użytkownik. Użyj nazw pól, które mają dla Ciebie sens; pojawią się one w kontakcie w sekcji Pola niestandardowe. Możesz przesłać do 20 wartości, które są odświeżane przy każdej wiadomości, więc jeśli plan zmieni się w trakcie rozmowy, AI zobaczy nowy.

W przypadku osadzeń typu inline możesz zamiast tego umieścić te same informacje w <div>, co jest przydatne, gdy na jednej stronie znajduje się kilka czatów:

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Jeśli Twoja witryna dowiaduje się, kim jest odwiedzający, dopiero po załadowaniu strony — na przykład w aplikacji typu single-page, gdzie logowanie odbywa się bez przeładowania strony — wywołaj to w momencie, gdy będziesz mieć już dane, a widżet sam się zaktualizuje:

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

Kilka rzeczy, które warto wiedzieć:

• Jeśli dwie różne osoby zalogują się na tym samym komputerze, druga z nich rozpocznie nową rozmowę, zamiast widzieć czat pierwszej osoby. Widżet wykrywa zmianę użytkownika i resetuje się.
• Samo w sobie służy to do celów kontekstowych, a nie do logowania użytkownika. Rozmowy są nadal oddzielone tak jak zawsze, więc przekazanie id nie pozwala nikomu otworzyć czatu innej osoby, a ktoś korzystający z innego urządzenia lub przeglądarki rozpocznie tam nową rozmowę. Aby kontynuować rozmowę na różnych urządzeniach, należy podpisać id zgodnie z poniższym opisem.
• Jest to opcjonalne. Widżet na zwykłej publicznej stronie nie wymaga żadnego z tych działań i zachowuje się dokładnie tak, jak wcześniej.

Kontynuowanie tej samej rozmowy na dowolnym urządzeniu (podpisany identyfikator odwiedzającego) #

Jeśli Twoi klienci posiadają konta, możesz sprawić, by ich czat podążał za nimi: logowanie na telefonie, kontynuacja na laptopie – to ta sama rozmowa z tym samym kontaktem w Twojej skrzynce odbiorczej, a sztuczna inteligencja nadal wie wszystko, co zostało powiedziane. W tym celu Your AI Connector potrzebuje dowodu, że odwiedzający jest rzeczywiście osobą, za którą podaje go Twoja strona; w przeciwnym razie każdy mógłby wpisać numer klienta w swojej przeglądarce i odczytać jego czat. Dowodem jest podpis, który obliczasz na swoim serwerze.

1. W panelu Zarządzaj (Manage) widżetu, w sekcji Kanały i osadzanie (Channels & Embed), znajdź opcję Zalogowani odwiedzający (Signed-in visitors) i kliknij Wygeneruj klucz tajny (Generate secret). Skopiuj klucz tożsamości. Przechowuj go wyłącznie na swoim serwerze; nigdy nie umieszczaj go bezpośrednio na stronie.

2. Gdy Twój serwer renderuje stronę dla zalogowanego klienta, oblicz HMAC-SHA256 identyfikatora tego klienta przy użyciu klucza tajnego, w postaci ciągu szesnastkowego zapisanego małymi literami:

// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()

3. Umieść identyfikator i skrót w bloku ustawień, obok imienia i adresu e-mail, które już przekazujesz:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Osadzenie inline przyjmuje tę samą wartość co data-visitor-hash w <div>, a window.chatWidget.setVisitor({ visitor: { id, hash } }) działa w przypadku aplikacji, które logują użytkowników bez przeładowywania strony.

Co się dzieje po zweryfikowaniu podpisu:

• Czat klienta jest przechowywany na jego koncie, a nie w przeglądarce, więc jest to ta sama rozmowa na każdym urządzeniu i w każdej przeglądarce, w której jest zalogowany, oraz jeden kontakt w Twojej skrzynce odbiorczej.
• Jego wcześniejsze wiadomości ładują się na nowym urządzeniu, a sztuczna inteligencja kontynuuje rozmowę od miejsca, w którym została przerwana.
• Jeśli podpis jest nieprawidłowy, widżet po cichu zachowuje się tak jak wcześniej, jako zwykły czat przypisany do przeglądarki, i wypisuje przyczynę w konsoli przeglądarki, aby programista mógł ją zidentyfikować. Twoi odwiedzający nigdy nie zobaczą błędu.
• Identyfikator jest porównywany dokładnie tak, jak go przesłałeś, więc podpisuj tę samą wartość, którą przekazujesz jako id, i używaj tego samego identyfikatora dla tej samej osoby wszędzie.

Warto wiedzieć o dwóch rzeczach:

• Wygeneruj ponownie w panelu Zarządzaj daje nowy klucz tajny. Strony nadal podpisujące starym kluczem wracają do normalnych czatów przypisanych do przeglądarki, dopóki Twój serwer nie zacznie używać nowego klucza. Istniejące rozmowy zostają zachowane; są one powiązane z identyfikatorem klienta, a nie z kluczem tajnym.
• Rozmowa, którą ktoś prowadził przed zalogowaniem jako anonimowy odwiedzający, pozostaje oddzielnym czatem. Rozmowa oparta na koncie rozpoczyna się od pierwszej wiadomości wysłanej po zalogowaniu.

Zmiana ustawień widżetu z poziomu własnego kodu (API) #

Wszystkie opcje dostępne w panelu Zarządzaj widżetem można również zmieniać za pomocą REST API, co jest przydatne, jeśli zarządzasz wieloma stronami internetowymi lub chcesz automatycznie wyłączyć przycisk załącznika dla klienta. Wyślij PATCH do https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID wraz ze swoim kluczem API oraz polami, które chcesz zmienić — na przykład {"show_upload_button": false} ukrywa przycisk załącznika, {"show_emoji_button": false} ukrywa wybór emoji, a {"launcher_icon": "chat-dots"} zmienia ikonę uruchamiania. CONFIG_ID to ten sam identyfikator, co w skrypcie osadzania. Pełna lista akceptowanych pól (nazwa, wiadomość powitalna, kolory, ikona uruchamiania, dozwolone domeny, formularz informacji o odwiedzającym, informacja o prywatności, motyw, styl narożników i czcionki) znajduje się w Dokumentacji API w sekcji Widżet czatu. Strony internetowe uwzględnią zmiany przy następnym załadowaniu.

Czego się spodziewać po instalacji #

Po dodaniu skryptu do swojej witryny, widżet czatu automatycznie utworzy przycisk czatu w rogu strony (domyślnie w prawym dolnym). Widżet pozostaje w stałej pozycji podczas przewijania stron przez użytkowników, dzięki czemu jest zawsze dostępny.

Gdy odwiedzający klikną ten przycisk, rozwinie się on w pełne okno czatu, w którym mogą rozpocząć rozmowę, widząc Twoją wiadomość powitalną. Jeśli opcja zbierania informacji o odwiedzających (Collect visitor info) jest włączona, najpierw pojawi się krótki formularz z prośbą o podanie imienia i adresu e-mail (oraz opcjonalnie numeru telefonu), zanim użytkownik będzie mógł pisać.

Interfejs czatu automatycznie dostosowuje się do różnych rozmiarów ekranu, dzięki czemu działa bezproblemowo zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych.

Testowanie wdrożenia #

Po dodaniu widżetu do swojej witryny sprawdź, czy działa:

1. Otwórz swoją witrynę w przeglądarce.
2. Kliknij przycisk czatu, aby otworzyć widżet.
3. Wyślij wiadomość testową i potwierdź, że otrzymujesz odpowiedź.
4. Powtórz czynność na innym urządzeniu lub w innej przeglądarce, aby upewnić się, że działa wszędzie.

Jeśli widżet czatu nie pojawia się na Twojej stronie, sprawdź następujące kwestie:

1. Upewnij się, że zastąpiłeś CONFIG_ID swoim rzeczywistym identyfikatorem konfiguracji.
2. Upewnij się, że tag skryptu został umieszczony przed zamykającym tagiem </body>.
3. Sprawdź kod pod kątem literówek.
4. W Shopify upewnij się, że edytowałeś opublikowany motyw i kliknąłeś Zapisz. Edycja wykonana w wersji roboczej lub zduplikowanym motywie nigdy nie trafi do Twojego aktywnego sklepu.

Za firmową zaporą sieciową (firewall) #

Jeśli widżet ładuje się dla użytkowników publicznych, ale nie dla pracowników w sieci biurowej, sieć prawie na pewno blokuje domenę, z której jest ładowany. Poproś swój zespół IT o zezwolenie na ruch przez standardowy protokół HTTPS na porcie 443 dla:

• Domeny w Twoim fragmencie kodu osadzania — adresu w linii <script src="...">, który skopiowano z panelu zarządzania.
• api.youraiconnector.com — widżet wysyła swoje wiadomości również tutaj.

Żadne inne ustawienia nie wymagają zmian: nie potrzeba dodatkowych portów ani reguł przychodzących. Jeśli po wykonaniu tych kroków widżet nadal się nie pojawia, otwórz konsolę programisty w przeglądarce na danej stronie i prześlij nam raport — zablokowane żądanie wskazuje domenę, której odmówiono dostępu, co zazwyczaj stanowi pełną odpowiedź na problem.