Jak dodać czat na stronę internetową: 3 sposoby

Jak dodać czat na stronę: czego potrzebujesz zanim zaczniesz

Zanim otworzysz panel sklepu albo edytor szablonu, warto rozłożyć sobie tę instrukcję na czynniki pierwsze. Jak dodać czat na stronę internetową bez programisty? Właściwie są trzy drogi i każda z nich pasuje do innej sytuacji: własna strona na kodzie, sklep na gotowej platformie e-commerce albo strona z wdrożonym Google Tag Managerem.

Zanim wybierzesz metodę, sprawdź kilka rzeczy:

Dostęp do panelu administracyjnego strony lub sklepu. Potrzebujesz loginu z uprawnieniami do edycji szablonu albo przynajmniej do pola na własny kod w stopce.
Konto w narzędziu do czatu. Zanim wkleisz cokolwiek, musisz mieć wygenerowany fragment kodu z panelu dostawcy czatu. Zwykle to kilka linijek JavaScriptu do skopiowania.
Informację, na jakiej platformie stoi strona. WordPress, WooCommerce, PrestaShop, Shopify, Shoper, IdoSell, Sky-Shop, Magento, a może autorski kod bez CMS-a. Od tego zależy, które pole w panelu będziesz szukać.
Opcjonalnie: konto Google Tag Manager. Jeśli już go używasz do mierzenia reklam czy Analytics, instalacja czatu przez GTM zajmie dosłownie kilka minut.
Godziny pracy i tekst powitania. Zanim czat zacznie działać, dobrze mieć gotową odpowiedź na pytanie: co ma napisać osoba odwiedzająca stronę jako pierwsza wiadomość.

Masz to wszystko? To przechodzimy do konkretów. Omówimy trzy sposoby po kolei, a potem pokażemy, jak sprawdzić, że czat faktycznie działa, i co ustawić zaraz po instalacji.

Krok 1: Wklej fragment kodu bezpośrednio w szablonie strony

To najbardziej uniwersalna metoda. Działa wszędzie tam, gdzie masz dostęp do kodu HTML strony, niezależnie od tego, czy to WordPress, strona autorska czy landing page zrobiony w kreatorze z opcją edycji kodu.

Schemat jest zawsze podobny: logujesz się do panelu dostawcy czatu, przechodzisz do sekcji instalacji widżetu i kopiujesz gotowy fragment kodu JavaScript. Jak opisuje instrukcja LiveChat, kod trzeba wkleić w kodzie źródłowym witryny tuż przed znacznikiem zamykającym body, a po dodaniu kodu odświeżyć stronę, żeby widget pojawił się w prawym dolnym rogu. To samo dotyczy właściwie każdego narzędzia tego typu, zmienia się tylko miejsce, z którego kopiujesz kod.

Jeśli Twoja strona działa na WordPressie bez sklepu, najczęściej znajdziesz w panelu motywu opcję edycji nagłówka i stopki albo plik szablonu, w którym możesz dopisać kod ręcznie. Ważne: wklejaj kod we wszystkich plikach, które renderują stopkę strony, a nie tylko na stronie głównej. To błąd, który regularnie wraca przy instalacjach skryptów śledzących i tak samo dotyczy czatu, jak zwraca uwagę poradnik wdrożeniowy opisujący podobny problem przy Google Tag Managerze.

Osobna uwaga dotyczy szybkości strony. Skrypt czatu najlepiej ładować asynchronicznie albo umieścić go tuż przed zamykającym body, tak żeby uruchamiał się dopiero po wczytaniu reszty strony, jak radzi poradnik designcart.pl poświęcony wdrażaniu czatu w sklepie internetowym. Dzięki temu widżet nie blokuje ładowania zdjęć produktów ani reszty treści, a klient nie czeka dodatkowe sekundy na to, aż strona się w ogóle pokaże.

Wyobraź sobie sklep z ubraniami, który dokleja czat ręcznie do szablonu motywu. Jeśli motyw ma osobny plik dla strony produktu i osobny dla bloga, trzeba wkleić kod w obu miejscach, inaczej czat zniknie z części podstron i klienci przeglądający asortyment zostaną bez możliwości dopytania o rozmiar.

Krok 2: Wklej kod w polu na własny skrypt w ustawieniach sklepu

Jeśli prowadzisz sklep na gotowej platformie, prawdopodobnie nie musisz w ogóle dotykać plików szablonu. Większość systemów e-commerce ma wbudowane pole przeznaczone właśnie do takich wklejek.

Jak zauważa poradnik designcart.pl, w systemach takich jak WooCommerce, OpenCart, PrestaShop czy Magento kod czatu najczęściej wkleja się w ustawieniach motywu, w sekcji własnego kodu w stopce, po czym czat zaczyna działać automatycznie na wszystkich podstronach sklepu. To duża wygoda, bo nie musisz pamiętać o każdej podstronie z osobna, system sam dołącza ten fragment wszędzie.

Na WooCommerce szukaj tej opcji w ustawieniach motywu albo w ustawieniach samego WordPressa, jeśli motyw nie ma własnego pola. Na PrestaShop zwykle znajdziesz sekcję z kodem w konfiguracji sklepu, podobnie na Shoperze i IdoSell, choć nazwy zakładek różnią się między wersjami panelu. Na Shopify pole na dodatkowy kod znajdziesz w ustawieniach motywu, w plikach layoutu. Zasada jest wspólna: szukaj miejsca opisanego jako kod własny, kod zewnętrzny albo skrypty w stopce.

Ta metoda jest o tyle bezpieczniejsza od ręcznej edycji szablonu, że aktualizacja motywu zwykle nie kasuje treści tego pola, podczas gdy zmiana plików szablonu po aktualizacji może zniknąć razem z nową wersją motywu. Jeśli prowadzisz sklep odzieżowy i co jakiś czas zmieniasz wygląd strony pod sezon, to pole na własny kod jest zdecydowanie wygodniejsze niż grzebanie w plikach za każdym razem.

Warto też sprawdzić, czy platforma, na której stoi Twój sklep, ma gotową instrukcję integracji z konkretnym narzędziem do czatu. Panel narzędzia zwykle ma osobne wskazówki dla WooCommerce, PrestaShop, Shopify, Shoper, IdoSell, Sky-Shop i Magento 2, co oszczędza czas na szukanie właściwego pola po omacku.

Krok 3: Zainstaluj czat przez Google Tag Managera

Trzecia droga przyda się, jeśli masz już wdrożony Google Tag Manager, na przykład do mierzenia kampanii reklamowych albo konwersji w sklepie. Zaletą tej metody jest to, że nie dotykasz kodu strony w ogóle, wszystko dzieje się w panelu GTM.

Aby zainstalować czat przez Google Tag Managera, w zakładce Tagi tworzysz nowy tag typu niestandardowy kod HTML, wklejasz kod widżetu, ustawiasz regułę uruchamiania na wszystkich stronach i publikujesz kontener, jak opisuje helpdesk Czater.pl. Cały proces zajmuje dosłownie kilka minut, jeśli wiesz, gdzie kliknąć.

Ogólne wdrożenie GTM polega na umieszczeniu dwóch fragmentów kodu: pierwszy, czyli skrypt ładujący gtm.js, trafia jak najwyżej w sekcji head strony, a drugi, czyli ramka iframe, bezpośrednio po otwierającym tagu body, jak tłumaczy poradnik wdrożeniowy Google Tag Managera. Jeśli ten etap masz już za sobą, dodanie czatu to tylko kolejny tag w tym samym kontenerze, nic więcej nie trzeba zmieniać w kodzie strony.

Tu też pojawia się częsty błąd: wklejenie kodu tylko na stronie głównej, podczas gdy musi on być obecny na każdej podstronie serwisu, jak zwraca uwagę poradnik hypercrew.pl. W przypadku GTM to akurat prostsze do upilnowania, bo reguła uruchamiania na wszystkich stronach załatwia sprawę jednym kliknięciem, zamiast ręcznego wklejania kodu w każdym pliku szablonu.

Czy warto inwestować w GTM tylko po to, żeby dodać czat? Niekoniecznie, jeśli nie masz go jeszcze wdrożonego z innych powodów. Ale jeśli już korzystasz z GTM do innych skryptów, to zdecydowanie najwygodniejsza opcja z całej trójki. Frazę Google Tag Manager Polacy wpisują w wyszukiwarkę średnio 18 100 razy miesięcznie, jak podaje analiza online-partners.pl, co pokazuje, że coraz więcej właścicieli stron samodzielnie zarządza skryptami bez pomocy programisty.

Jak sprawdzić, że czat na stronie internetowej działa?

Po wklejeniu kodu nie wystarczy założyć, że wszystko poszło dobrze. Sprawdź to w kilku prostych krokach:

Otwórz stronę w trybie incognito albo prywatnym przeglądarki. Dzięki temu masz pewność, że widzisz stronę tak, jak zobaczy ją nowy odwiedzający, bez zapisanych ciasteczek i cache.
Odśwież stronę po wklejeniu kodu, nie poleganiu na starej wersji w pamięci podręcznej przeglądarki.
Sprawdź widoczność widżetu na kilku różnych podstronach, nie tylko na stronie głównej, zwłaszcza jeśli instalowałeś kod ręcznie w szablonie.
Otwórz stronę na telefonie, najlepiej przez osobną sieć komórkową, a nie tylko w tym samym Wi-Fi co komputer, z którego instalowałeś kod.
Jeśli instalowałeś przez GTM, użyj wtyczki Tag Assistant do Chrome, która po odświeżeniu strony pokazuje, jakie skrypty zostały wywołane, jak podaje poradnik bettersteps.pl.

Ta weryfikacja zajmuje góra kilka minut, a oszczędza sytuacji, w której czat „jest zainstalowany”, ale realnie nikt go nie widzi, bo kod trafił tylko do jednego pliku szablonu albo reguła w GTM była ustawiona na złą stronę.

W tym miejscu warto wspomnieć, że w Chateo wklejasz jeden fragment kodu bez żadnych wtyczek, a sam panel sprawdza, czy skrypt faktycznie działa na Twojej stronie, więc nie musisz zgadywać ani szukać osobnego narzędzia do weryfikacji.

Jeśli po wszystkich tych krokach widżet nadal się nie pojawia, sprawdź, czy inny skrypt na stronie (np. blokada ciasteczek albo wtyczka do optymalizacji ładowania) nie usuwa automatycznie zewnętrznych skryptów. To częsty, choć mniej oczywisty powód, dla którego czat „znika” mimo poprawnie wklejonego kodu.

Co ustawić zaraz po instalacji, żeby czat działał dobrze?

Sam widżet na stronie to dopiero połowa sukcesu. Zanim ogłosisz klientom, że mogą pisać na czacie, ustaw jeszcze kilka rzeczy:

Godziny pracy. Określ, w jakich godzinach ktoś realnie odpisuje. Poza tymi godzinami czat powinien pokazywać informację, kiedy można spodziewać się odpowiedzi, zamiast ciszy po drugiej stronie.
Tekst powitania. Krótka, konkretna wiadomość działa lepiej niż ogólnikowe „w czym mogę pomóc”. Spróbuj czegoś w stylu: „Cześć, jestem tu, jeśli masz pytanie o rozmiar, dostawę albo zwrot”.
Pierwszą odpowiedź na typowe pytania. Status zamówienia, czas dostawy, zasady zwrotów to pytania, które wracają najczęściej. Jeśli masz gotową odpowiedź zapisaną, nie musisz pisać jej za każdym razem od nowa.
Sposób powiadomień. Sprawdź, czy dostajesz informację o nowej wiadomości na telefon albo mail, żeby nie odkryć po trzech dniach, że ktoś czekał na odpowiedź.

Warto pamiętać, że klienci naprawdę doceniają możliwość rozmowy na żywo. Jak wynika z danych Gorgias cytowanych przez live-agent.pl, wdrożenie czatu na żywo może zwiększyć konwersje witryny średnio o 12%, a z badań Software Advice przytoczonych w tym samym artykule wynika, że 63% kupujących woli robić zakupy na stronach oferujących obsługę w czasie rzeczywistym. Do tego dochodzi satysfakcja: jak podaje Skalium, aż 73% osób korzystających z czatu na żywo deklaruje pełne zadowolenie z tej formy kontaktu. Przy średnim współczynniku konwersji w polskim e-commerce na poziomie 2,7 do 2,9%, jak wskazuje analiza kreacja.ai, każdy dodatkowy procent zrobiony dzięki rozmowie z klientem ma realne znaczenie dla wyniku sklepu.

Nie trzeba od razu rozbudowywać czatu o skomplikowane scenariusze. Na początek wystarczy dobre powitanie, jasne godziny pracy i gotowe odpowiedzi na kilka najczęstszych pytań. Resztę, czyli reguły zapraszania do rozmowy czy automatyczne ścieżki, można dodawać stopniowo, kiedy zobaczysz, o co ludzie faktycznie pytają.

Najczęściej zadawane pytania

Czy dodanie czatu na stronę spowolni jej ładowanie?

To zależy od sposobu instalacji i wagi samego skryptu. Jeśli kod ładuje się asynchronicznie i jest lekki, różnica jest praktycznie niezauważalna, dlatego warto sprawdzać wagę skryptu przed wyborem narzędzia.

Który sposób instalacji jest najbezpieczniejszy przy aktualizacjach strony?

Pole na własny kod w ustawieniach sklepu jest zwykle bezpieczniejsze niż ręczna edycja plików szablonu, bo aktualizacja motywu rzadziej je kasuje. Przy ręcznej edycji szablonu warto zapisać sobie kopię wklejonego fragmentu na wszelki wypadek.

Czy mogę mieć czat na stronie bez znajomości kodu?

Tak, wszystkie trzy opisane metody nie wymagają pisania kodu od zera, a jedynie skopiowania gotowego fragmentu do odpowiedniego pola. Najwięcej technicznej wiedzy wymaga ręczna edycja plików szablonu, reszta to kopiuj i wklej.

Co zrobić, jeśli po instalacji czat nie pojawia się na telefonie?

Sprawdź stronę na telefonie w osobnej sieci komórkowej, odśwież ją i upewnij się, że żaden inny skrypt blokujący reklamy lub ciasteczka nie usuwa widżetu. Warto też sprawdzić, czy wersja mobilna strony korzysta z tego samego szablonu co wersja desktopowa.

Czy czat trzeba instalować osobno na każdej podstronie sklepu?

Nie, jeśli kod wkleisz w odpowiednim miejscu: w stopce szablonu obecnej na wszystkich podstronach, w polu na własny kod w ustawieniach sklepu albo przez regułę GTM ustawioną na wszystkie strony. Ręczne dodawanie kodu osobno na każdej podstronie jest niepotrzebne i zwiększa ryzyko pominięcia którejś z nich.

Tagiinstalacja czatu