My Website

` 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 ` ``` {% endcode %} Fragment kodu dla wersji inline zawiera je w `

`, dzięki czemu jedna strona może zawierać kilka czatów kierowanych do różnych miejsc: {% code overflow="wrap" %} ```html

``` {% endcode %} W przypadku agenta brzmienie zmienia się na `?agent=AGENT_ID` lub `data-agent="AGENT_ID"`. Kilka rzeczy, które warto wiedzieć: - Użyj przycisku kopiowania zamiast wpisywać identyfikator ręcznie. Jeśli identyfikator nie pasuje do żadnej kampanii lub agenta na Twoim koncie, czat nadal będzie działać, ale przełączy się na domyślne reguły routingu. - Osoba, która jest już w trakcie rozmowy, pozostaje z tym samym rozmówcą, nawet jeśli później trafi na stronę wskazującą gdzie indziej. Zapobiega to zmianie „osobowości” czatu w trakcie trwania rozmowy. - Miejsce docelowe przypisane do konkretnej strony ma pierwszeństwo przed domyślnymi ustawieniami konta oraz 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: {% code overflow="wrap" %} ```html ``` {% endcode %} Twoja strona powinna uzupełnić te wartości po stronie serwera, na podstawie danych aktualnie zalogowanego użytkownika. 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 `

`, co jest przydatne, gdy na jednej stronie znajduje się kilka czatów: {% code overflow="wrap" %} ```html

``` {% endcode %} 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: {% code overflow="wrap" %} ```html ``` {% endcode %} 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 DM Champ 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. ::: master-only

Wiersz Zalogowani odwiedzający w panelu Zarządzaj widżetu czatu, pokazujący zamaskowany klucz tożsamości z przyciskami Pokaż, Kopiuj i Wygeneruj ponownie, oraz fragment ustawień z polami id i hash poniżej — Wiersz Zalogowani odwiedzający w sekcji Kanały i osadzanie. Klucz pozostaje ukryty, dopóki nie klikniesz Pokaż; fragment poniżej pokazuje, gdzie na stronie umieścić identyfikator i jego podpis.

::: 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: {% code overflow="wrap" %} ```js // Node.js const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex"); ``` {% endcode %} {% code overflow="wrap" %} ```php // PHP $hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET); ``` {% endcode %} {% code overflow="wrap" %} ```python # Python import hmac, hashlib hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest() ``` {% endcode %} 3. Umieść identyfikator i skrót w bloku ustawień, obok imienia i adresu e-mail, które już przekazujesz: {% code overflow="wrap" %} ```html ``` {% endcode %} Osadzenie inline przyjmuje tę samą wartość co `data-visitor-hash` w `

`, 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](../api/reference.md), 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.dmchamp.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](../api/reference.md) 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. ::: master-only

Pływająca dymek czatu w prawym dolnym rogu strony internetowej, zanim odwiedzający go kliknie — Oto co widzą odwiedzający na Twojej stronie przed otwarciem czatu — tylko pływający przycisk, umieszczony zgodnie z ustawieniami wyglądu.

::: 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ć. ::: master-only

Otwarty panel czatu pokazujący wiadomość powitalną w tle oraz formularz pozyskiwania leadów „Zanim zaczniemy” (Imię, E-mail, Telefon) na pierwszym planie — Otwarty panel czatu. Tutaj opcja zbierania informacji o odwiedzających jest włączona, więc formularz „Zanim zaczniemy...” pojawia się nad rozmową — odwiedzający wypełniają go raz, a następnie czatują normalnie.

::: 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. ::: master-only

Panel czatu po wysłaniu przez odwiedzającego wiadomości testowej, pokazujący dymek z jego wiadomością wychodzącą pod wiadomością powitalną — Po wysłaniu wiadomości pojawia się ona jako dymek wychodzący w wątku — Twoja sztuczna inteligencja lub zespół odpowiada w tym samym oknie.

::: 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 tagiem zamykającym ``. 3. Sprawdź kod pod kątem literówek. ### 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 `