Czat Shopify najprościej dodasz, wklejając kod widżetu do pliku układu motywu, tak aby ładował się na stronach sklepu. Nie potrzebujesz do tego aplikacji z App Store ani integracji z zamówieniami: widżet Meetlead działa jako osobny skrypt w przeglądarce klienta. Instrukcja dotyczy sklepu Online Store z motywem, który możesz edytować. Pokazuje, gdzie wkleić kod, jak zabezpieczyć się przed zmianą i co sprawdzić na telefonie po publikacji.
Zanim zaczniesz, wyznacz jedną osobę odpowiedzialną za wdrożenie i wybierz jedną metodę osadzenia. Jeśli dopiero decydujesz, gdzie czat ma się pojawiać i kto będzie odpowiadał, zacznij od poradnika o live chacie w sklepie internetowym. Tutaj zajmujemy się techniką: kodem, motywem, domenami i testem.
Gdzie w Shopify wkleić kod czatu
Kod czatu wklejasz do pliku theme.liquid w folderze Layout, tuż przed zamknięciem sekcji head. To domyślny układ motywu, więc jeden wpis zwykle obejmuje stronę główną, kolekcje, karty produktów i koszyk. Jeśli motyw ma dodatkowe układy, na przykład dla strony chronionej hasłem, sprawdź je osobno. Skrypt Meetlead ma atrybut async, dlatego nie wstrzymuje wyświetlania treści sklepu.
Dokumentacja Shopify dla twórców motywów opisuje theme.liquid jako domyślny układ dla stron poza kasą. Nie mówi nic o konkretnych narzędziach czatu ani o tym, jak twój motyw ułożył pozostałe pliki. Shopify.dev: Layouts.
Wniosek praktyczny: widżet osadzony w motywie nie pojawi się w procesie kasy. Pytania o płatność i dostawę musisz więc obsłużyć wcześniej: zostaw jasną drogę kontaktu na karcie produktu i w koszyku.
Przed zmianą: dostęp, kopia motywu i domeny
Edycja kodu wymaga odpowiednich uprawnień w Shopify. Od kwietnia 2023 roku edytor kodu ma osobne uprawnienie Edit code, niezależne od zarządzania motywami, więc pracownik widzący motywy nie musi mieć dostępu do kodu. Jeśli wdrożenie robi zewnętrzny wykonawca, nadaj mu tylko potrzebny zakres i zapisz, kto zmieniał plik.
Pomoc Shopify zaleca zduplikowanie motywu przed edycją kodu, pozwala przywrócić wcześniejszą wersję pojedynczego pliku w widoku Timeline i ostrzega, że niezgodne zmiany mogą zniknąć przy aktualizacji motywu. Strona nie opisuje instalacji narzędzi firm trzecich. Shopify Help Center.
- Masz konto z uprawnieniem do edycji kodu albo osobę, która je ma.
- Motyw jest darmowy lub kupiony; kod płatnego motywu Shopify pozwala edytować dopiero po zakupie.
- Kopia motywu jest zrobiona opcją Duplicate i ma datę w nazwie.
- W Meetlead masz witrynę z własnym clientId i skopiowany kod osadzenia.
- Na liście dozwolonych domen są wszystkie dokładne hosty sklepu: domena z www i bez www oraz adres myshopify.com, jeśli z niego korzystasz.
Ostatni punkt najczęściej blokuje start. Meetlead nie obsługuje symboli wieloznacznych w domenach, dlatego każdy host wpisujesz osobno, bez ścieżek. Każdy wpis liczy się do limitu domen w twoim planie, więc sprawdź go przed dodaniem hostów. Domenę testową dodaj na czas wdrożenia, a po zakończeniu usuń te, których nie używasz.
Instalacja krok po kroku
Poniższa kolejność zakłada, że po zrobieniu kopii wklejasz kod do opublikowanego motywu. Możesz też najpierw zmienić kopię, sprawdzić ją i dopiero wtedy opublikować; pamiętaj wówczas o ograniczeniu podglądu opisanym w dalszej części.
- Skopiuj kod z Meetlead.W ustawieniach witryny skopiuj bazowy skrypt z właściwym clientId. Identyfikator jest publiczny, ale musi należeć do tej witryny, inaczej rozmowy trafią w niewłaściwe miejsce.
- Otwórz edytor kodu.W panelu Shopify przejdź do Online Store, otwórz menu przy motywie i wybierz Edit code. Nazwy pozycji zależą od języka panelu.
- Znajdź theme.liquid.Plik leży w folderze Layout. Wyszukaj zamknięcie sekcji head i ustaw kursor tuż przed nim.
- Wklej i zapisz.Wklej skrypt w osobnej linii, dodaj nad nim krótki komentarz z nazwą narzędzia i datą, a potem zapisz plik.
- Otwórz sklep w oknie prywatnym.Sprawdź stronę główną, kartę produktu i koszyk. Launcher powinien się pojawić bez logowania do Shopify.
- Wyślij wiadomość testową.Napisz z telefonu i odpowiedz z panelu. Dopiero odpowiedź, która wróciła do klienta, potwierdza, że wdrożenie działa.
Wygląd, języki i teksty widżetu zmieniasz później w Widget Studio, bez ponownej edycji motywu. Kod w theme.liquid odpowiada tylko za załadowanie widżetu, a konfiguracja przychodzi z Meetlead. Dzięki temu zmiana koloru czy powitania nie wymaga osoby z dostępem do kodu.
Jeden widżet zamiast dwóch
Najczęstszy błąd przy zmianie narzędzia to dwa launchery w rogu ekranu, z których jeden nie odpowiada. W Shopify stary czat może się ładować z kilku miejsc naraz. Sprawdź je wszystkie, zanim uznasz wdrożenie za zakończone.
Przesuń tabelę w bok, aby zobaczyć wszystkie kolumny.
| Źródło starego czatu | Gdzie sprawdzić | Co zrobić |
|---|---|---|
| Aplikacja osadzona w motywie | Edytor motywu, sekcja App embeds | Wyłącz osadzenie, zapisz, potem rozważ odinstalowanie |
| Kod wklejony ręcznie | theme.liquid i pliki w folderze Snippets | Usuń stary skrypt i zostaw komentarz o zmianie |
| Menedżer tagów | Kontener tagów prowadzony przez marketing | Wstrzymaj tag czatu tego samego dnia |
Ta sama zasada obowiązuje na innych platformach; przy WordPressie opisujemy ją w poradniku o czacie na stronie WordPress. Zapisz w dokumentacji sklepu, gdzie jest kod i w którym motywie. Według pomocy Shopify aplikacje dodane do motywu trzeba po zmianie opublikowanego motywu ponownie aktywować w nowym. Ręcznie wklejony skrypt też należy do konkretnego motywu, więc w nowym dodajesz go od nowa. Na stronie Squarespace kod czatu trafia do jednego pola w panelu Code Injection, a nie do pliku motywu, co opisuje poradnik o czacie na stronie Squarespace.
Test na telefonie i w podglądzie motywu
Podgląd motywu bywa mylący. Link udostępniany osobom spoza panelu działa pod adresem w domenie shopifypreview.com, którego zwykle nie ma na liście dozwolonych hostów. Widżet może się tam nie wczytać, choć na właściwej domenie zadziała poprawnie. Ostateczny test rób więc na domenie, którą widzą klienci.
Pomoc Shopify podaje, że linki podglądu dla odwiedzających używają domeny shopifypreview.com i wygasają po dwóch dniach. Nie opisuje, jak zachowują się w nich skrypty zewnętrznych narzędzi. Shopify Help Center.
Na telefonie sprawdź, czy launcher nie zasłania przycisku dodania do koszyka, paska z ceną ani banera zgód. Testuj na prawdziwym urządzeniu, w pionie i w poziomie. Jeśli przycisk zakupu znika pod ikoną, zmień pozycję lub odsunięcie widżetu; metodę szukania takich kolizji opisuje poradnik o przyklejonych elementach zasłaniających przyciski. O różnicach między telefonem a komputerem piszemy w tekście o konwersji na urządzeniach mobilnych.
- Widżet otwiera się na pełnym ekranie i daje się łatwo zamknąć.
- Klawiatura nie zasłania pola wiadomości ani przycisku wysyłania.
- Launcher nie przykrywa przycisku zakupu na karcie produktu.
- Baner zgód i widżet nie nachodzą na siebie.
- Wiadomość wysłana z telefonu dociera do panelu, a odpowiedź wraca do klienta.
Co ustawić po pierwszym teście
Działający kod to dopiero połowa wdrożenia. W Meetlead ustawisz reguły widoczności: wszystkie strony, tylko wskazane prefiksy ścieżek albo wszystkie poza wskazanymi, a do tego wybrane urządzenia. Pozwala to na przykład ukryć widżet w koncie klienta bez zmiany kodu motywu. Ustaw też grafik dostępności i tryb offline, żeby klient poza godzinami pracy nie czekał na odpowiedź, która nie nadejdzie.
Pamiętaj o granicy: widżet osadzony w motywie nie łączy się z zamówieniami Shopify. Operator nie zobaczy w rozmowie statusu przesyłki ani historii zakupów, jeśli klient sam ich nie poda, więc przygotuj wzór pytania o numer zamówienia. Jeśli widżet ma nagrywać sesje, najpierw ustal podstawę i tryb startu; pytania o dane opisujemy w artykule live chat a RODO. Ten tekst nie jest poradą prawną.
Czat: Meetlead, witryna [nazwa], clientId z panelu. Kod w theme.liquid motywu [nazwa], przed zamknięciem sekcji head, dodany [data] przez [osoba]. Kopia motywu: [nazwa kopii]. Hosty na liście: [domena], [www.domena], [adres myshopify.com]. Stary czat wyłączony w: [miejsce].
Najczęstsze pytania
Czy czat pojawi się na stronie płatności? Nie, jeśli osadzasz go w theme.liquid, bo ten układ nie obejmuje kasy Shopify. Klient zobaczy widżet na stronach produktów, kolekcji i koszyka. Jeśli pytania o płatność są częste, odpowiedz na nie przed kasą: na karcie produktu, w koszyku i w wiadomości po zamówieniu.
Czy po aktualizacji motywu muszę wkleić kod ponownie? Możliwe. Shopify ostrzega, że niezgodne zmiany w kodzie mogą zniknąć w zaktualizowanej kopii motywu, a nowy motyw nie przejmuje ręcznych wpisów ze starego. Po każdej aktualizacji lub zmianie motywu otwórz sklep w oknie prywatnym i wyślij jedną wiadomość testową. To krótki test, który chroni przed dniami bez rozmów.
