Czat na stronę internetową: jak dodać kod przez HTML, Google Tag Manager, Wix i Squarespace

Żeby dodać czat na stronę internetową, kopiujesz fragment kodu ze swojego narzędzia do czatu i sprawiasz, że ładuje się na każdej podstronie. Masz cztery sposoby: wkleić go tuż przed zamykającym znacznikiem </body> we wspólnym szablonie strony, dodać go w Google Tag Managerze jako tag Niestandardowy kod HTML z regułą Wszystkie strony albo użyć pola na kod w swoim kreatorze stron (Wix: Custom Code, pozycja Body - end; Squarespace: Code Injection, pole Footer). Potem otwórz stronę w oknie prywatnym i wyślij sobie wiadomość testową. Czat, który się ładuje, ale nikogo nie powiadamia, jest gorszy niż brak czatu.

WordPress, Shopify i ikas mają własne ścieżki, z niewielką ilością kodu albo bez niego; znajdziesz je na końcu. Przykłady pokazują Messenger Shopxare, ale metoda jest taka sama w prawie każdym narzędziu do czatu, które daje fragment kodu.

Który sposób pasuje do Twojej strony

Moja rada: jeśli możesz edytować szablon, wklej kod tam. Tag Manager to dobre wyjście awaryjne, gdy tylko w nim możesz dodawać kod, ale tworzy zależność. Osoba, która zarządza kontenerem, może wyłączyć czat, nawet o tym nie wiedząc, a konfiguracja zgód może ukryć go przed wszystkimi, którzy odrzucą cookies.

Zanim zaczniesz: skopiuj kod

1. Załóż konto Shopxare i przejdź do Ustawienia → Messenger → Instalacja.
2. Skopiuj kod dla dowolnej strony. Z Twoim App ID wygląda tak:

<script>
  window.Shopxare = window.Shopxare || function () { (Shopxare.q = Shopxare.q || []).push(arguments) };
  Shopxare('boot', { app_id: 'YOUR_APP_ID' });
</script>
<script async src="https://app.shopxare.com/widget/v1/loader.js"></script>

3. Gdy czat już działa, wejdź w Ustawienia → Messenger → Bezpieczeństwo → Dozwolone strony i wpisz swoje domeny. Przy pustej liście Messenger ładuje się na każdej stronie; po jej uzupełnieniu Twój kod działa tylko na Twoich stronach.

Wszystkie szczegóły znajdziesz w Instalacji Messengera.

Sposób 1: wklej kod do HTML strony

1. Znajdź plik, z którego korzystają wszystkie podstrony. Zwykle to szablon layoutu albo stopki, na przykład footer.php, layout.html lub fragment stopki. Prosta strona statyczna z osobnymi plikami HTML nie ma wspólnego pliku, więc wklejasz kod do każdego z nich.
2. Wklej kod tuż przed zamykającym znacznikiem </body>.
3. Wgraj zmianę na serwer i odśwież stronę z wyczyszczoną pamięcią podręczną.

Jeśli Twój CMS ma pole w rodzaju „skrypty w stopce” albo „własny kod”, robi ono to samo. Użyj go zamiast edytować pliki.

Aplikacje jednostronicowe w React, Vue i podobnych nie wymagają niczego więcej. Wklej kod raz do index.html; Messenger sam wykrywa zmiany podstron, więc Twój zespół nadal widzi, na której podstronie jest klient.

Sposób 2: czat na stronę przez Google Tag Manager

1. Otwórz swój kontener na tagmanager.google.com i przejdź do Tagi > Nowy.
2. Kliknij Konfiguracja tagu i wybierz Niestandardowy kod HTML. Wklej cały kod, oba bloki <script>. Sam Google zaleca, żeby JavaScript zawsze był w znacznikach <script> (Pomoc Menedżera tagów).
3. Kliknij Reguły i wybierz Wszystkie strony.
4. Otwórz ustawienia zaawansowane, a w nich ustawienia zgody (Advanced Settings > Consent Settings). Domyślnie dodatkowe sprawdzanie zgody ma wartość Not set. Jeśli Twój baner cookies steruje tagami według typów zgody, możesz wybrać Require additional consent for tag to fire i dodać typ, którego baner używa dla plików cookie funkcjonalnych (Pomoc Menedżera tagów). Który typ jest właściwy, ustal z osobą odpowiedzialną za baner cookies i RODO. Pamiętaj o skutku: przy wymaganej zgodzie osoby, które odrzucą cookies, nie zobaczą czatu.
5. Kliknij Podgląd, wpisz adres strony i kliknij Connect (Pomoc Menedżera tagów). W widoku debugowania sprawdź, czy tag czatu się uruchomił, a na stronie, czy pojawił się przycisk czatu.
6. Kliknij Prześlij, a potem Opublikuj.

Tag Manager minifikuje niestandardowy kod HTML i może zamienić apostrofy na cudzysłowy. Temu kodowi to nie szkodzi, więc nie przejmuj się, jeśli zapisana wersja wygląda trochę inaczej.

Kiedy nie używać Tag Managera

• Chcesz rozpoznawać zalogowanych klientów. Weryfikacja tożsamości wymaga user_hash, który Twój serwer oblicza tajnym kluczem, a ten klucz musi zostać na serwerze. Tag Manager nie policzy tej wartości, więc Twój szablon i tak musi ją wygenerować. W takim przypadku umieść kod startowy w szablonie i przekaż tam user_id, user_hash, email i name (API JavaScript).
• Twoja strona działa na Wix. Wix podaje, że narzędzia śledzące, takie jak Google Tag Manager, nie działają przez funkcję własnego kodu (Centrum pomocy Wix). Wklej kod czatu bezpośrednio w Custom Code (sposób 3).
• Kod jest już w Twoim motywie. Ładuj go z jednego miejsca. Dwie kopie utrudniają szukanie błędów, a później nie wiesz, którą zmienić.

Sposób 3: czat na stronę w Wix

Wix stawia dwa warunki: strona musi być opublikowana i mieć podłączoną domenę (Centrum pomocy Wix).

1. W panelu strony przejdź do Settings (Ustawienia).
2. W sekcji Development & integrations kliknij Custom Code.
3. Kliknij + Add Custom Code, wklej kod i nadaj mu nazwę, na przykład „Czat na żywo”.
4. W Add Code to Pages wybierz All pages.
5. W Place Code in wybierz Body - end.
6. Kliknij Apply i otwórz opublikowaną stronę.

Dwa szczegóły Wix, na których wiele osób się potyka. Własny kod jest przypisany do domeny: jeśli ustawisz inną domenę główną, Wix usunie Twoje fragmenty kodu i trzeba je dodać od nowa. Wix zaznacza też, że od grudnia 2025 roku jego zabezpieczenia frontendu mogą blokować niektóre fragmenty kodu firm trzecich, dopóki dostawca ich nie zaktualizuje. Jeśli przycisk czatu się nie pojawia, napisz do dostawcy czatu; Wix nie wspiera kodu firm trzecich.

Sposób 4: czat na stronę w Squarespace

Wstrzykiwanie kodu jest dostępne w planach Core, Plus i Advanced oraz w niektórych starszych planach (Centrum pomocy Squarespace).

1. Otwórz panel Code Injection. Artykuł pomocy powyżej prowadzi do niego bezpośrednio.
2. Wklej kod w pole Footer. Squarespace umieszcza ten kod tuż przed zamykającym znacznikiem </body> na każdej podstronie.
3. Kliknij Save i odśwież stronę.

Strony płatności w Squarespace nie obsługują własnego kodu, więc czatu tam nie będzie. Zaplanuj to: odpowiadaj na pytania o płatność i dostawę na stronach koszyka i produktów, gdzie czat się ładuje.

WordPress, WooCommerce, Shopify i ikas

Na tych platformach jest lepsza droga niż sam fragment kodu, bo integracja może też przesyłać do skrzynki dane klienta i koszyka. Wtyczka WooCommerce i kod dla Shopify automatycznie wysyłają dane sklepu, takie jak liczba zamówień i wartość koszyka; widać je na karcie sklepu obok rozmowy.

• WordPress i WooCommerce: zainstaluj wtyczkę. Krok po kroku w artykule Czat na stronę WordPress za darmo i w dokumentacji WordPress.
• Shopify: wklej kod motywu do theme.liquid. Zobacz Czat na żywo w Shopify.
• ikas: zainstaluj aplikację w jednym kroku, bez kodu (dokumentacja ikas).

Przetestuj w pięć minut

1. Otwórz stronę w oknie prywatnym, na komputerze i na telefonie. Przycisk czatu powinien pojawić się w rogu. Na telefonie sprawdź, czy nie zasłania przycisku „Dodaj do koszyka” ani banera cookies. Pozycję zmienisz w Dostosowaniu Messengera.
2. Wyślij sobie wiadomość testową i odpowiedz z telefonu. Shopxare Mobile jest bezpłatne w każdym planie (aplikacje mobilne i desktopowe). Jeśli powiadomienie nie dociera, napraw to, zanim ogłosisz czat klientom.
3. Przejdź na inną podstronę w trakcie rozmowy. Rozmowa powinna nadal być widoczna.
4. Odrzuć cookies w banerze i odśwież stronę. Czy nadal widzisz czat? Obie odpowiedzi mogą być dobre, ale to ma być decyzja, a nie niespodzianka.
5. Sprawdź, czy kod ładuje się tylko raz. Zajrzyj do źródła strony albo użyj Tag Assistant. Jedna kopia w szablonie i druga w Tag Managerze to błąd, który łatwo popełnić.

Przykład: mała palarnia kawy online

Fikcyjna palarnia sprzedaje kawę ziarnistą na stronie zrobionej na zamówienie, na której działa już Google Tag Manager. Właścicielka dodaje Messenger jako tag z niestandardowym kodem HTML we wtorek rano i testuje go z telefonu. O 14:10 ktoś pisze ze strony produktu:

„Ta kawa jest ziarnista czy mielona?”

Odpowiada z aplikacji:

„Domyślnie wysyłamy ziarnistą. Jeśli wolisz mieloną, wybierz »Mielona do przelewu« w menu mielenia nad przyciskiem Dodaj do koszyka, a zmielimy ją w dniu wysyłki.”

Dwa miesiące później dodaje konta klientów. To właśnie wtedy przenosi kod z Tag Managera do szablonu strony, żeby serwer mógł przekazać user_id i user_hash, a powracający klienci byli rozpoznawani w skrzynce.

Gdy czat już działa

• Ustaw godziny pracy i wiadomość o nieobecności, żeby osoby piszące wieczorem wiedziały, kiedy dostaną odpowiedź. Skopiuj jeden z naszych szablonów wiadomości poza godzinami pracy.
• Zapisz odpowiedzi na pięć najczęstszych pytań i wstawiaj je przez „/” (zapisane odpowiedzi). Nasze gotowe odpowiedzi dla klientów dadzą Ci zestaw na start.
• Jeśli w nocy nikt nie może odpowiadać, Are AI odpowie na podstawie Twoich artykułów pomocy i stron, a gdy trzeba, przekaże rozmowę zespołowi.

Shopxare ma dziś jeden plan i jest on bezpłatny, bez karty kredytowej. Możesz założyć konto i mieć Messenger na stronie w czasie, w którym znajdziesz plik stopki.

Najczęściej zadawane pytania

Jak dodać darmowy czat na stronę internetową?

Załóż konto w bezpłatnym narzędziu do czatu na żywo, skopiuj fragment kodu i wklej go tuż przed </body> we wspólnym szablonie strony albo dodaj przez Google Tag Manager lub pole na własny kod w kreatorze stron. Potem wyślij sobie wiadomość testową.

Czy można dodać czat przez Google Tag Manager?

Tak. Utwórz tag Niestandardowy kod HTML, wklej cały kod, ustaw regułę Wszystkie strony, sprawdź w Podglądzie, a potem Prześlij i Opublikuj. Zrezygnuj z Tag Managera, jeśli chcesz rozpoznawać zalogowanych klientów albo Twoja strona działa na Wix.

Gdzie wkleić kod czatu?

Tuż przed zamykającym znacznikiem </body>, w pliku lub polu używanym przez wszystkie podstrony: w szablonie stopki, w polu na skrypty w stopce, w Custom Code w Wix (Body - end) lub w Code Injection w Squarespace (Footer).

Dlaczego czat nie wyświetla się na stronie?

Typowe przyczyny to nieopublikowana zmiana (w kontenerze Tag Managera albo w kreatorze stron), ustawienie zgody blokujące tag do czasu akceptacji cookies, brak domeny na liście dozwolonych stron albo strona z pamięci podręcznej. Sprawdź w oknie prywatnym po wyczyszczeniu pamięci podręcznej.

Czy czat na żywo spowalnia stronę?

Każdy dodatkowy skrypt to trochę pracy przy ładowaniu. Loader Messengera jest ładowany z async, więc przeglądarka nie czeka na niego z wyświetleniem strony. Jeśli zależy Ci na szybkości, zmierz stronę produktu przed instalacją i po niej.