Shopify
Zainstaluj widżet Agentkit w motywie Shopify, używając pełnego wygenerowanego kodu.
Dodaj widżet Agentkit do sklepu Shopify, wklejając pełny wygenerowany kod osadzania do pliku theme.liquid.
W Agentkit otwórz Kanały → Wtyczka na stronę → Widżet czatu, włącz kanał i skopiuj cały kod. Zawiera dwa znaczniki script: inicjalizację inline i asynchroniczny moduł ładujący. Zachowaj oba. Shopify zaleca powielenie motywu przed edycją kodu.
Metoda 1: edycja theme.liquid
Dodaj widżet do całej witryny, edytując opublikowany motyw:
- W panelu administracyjnym Shopify przejdź do Online Store → Themes.
- W wierszu aktywnego motywu kliknij menu ... (Actions) → Edit code.
- W folderze Layout po lewej stronie otwórz
theme.liquid. - Przewiń na sam dół i wklej kod do osadzenia tuż przed zamykającym tagiem
</body>. - Kliknij Save.
Wklej skopiowany kod bez zmian. Po zapisaniu sprawdź, czy oba znaczniki <script> są w wyrenderowanym kodzie źródłowym sklepu.
Widżet pojawia się na każdej stronie sklepu — produktu, kolekcji, koszyka i strony głównej.
Metoda 2: najpierw zduplikuj, potem edytuj (zalecana)
Jeśli chcesz mieć możliwość bezpiecznego wycofania zmian:
- Online Store → Themes.
- Na aktywnym motywie kliknij menu ... (trzy kropki) → Duplicate. Kopia pojawi się na dole listy motywów.
- Edytuj plik
theme.liquidduplikatu tak jak powyżej. - Kliknij menu ... przy duplikacie → Preview, aby przetestować.
- Gdy wszystko działa poprawnie, kliknij menu ... → Publish, aby opublikować zmiany.
Umieszczenie na jednej stronie
Aby pokazać widżet tylko na jednej stronie, poproś programistę motywu o ograniczenie obu wygenerowanych znaczników do szablonu strony. Sprawdź, czy są tylko tam. Edytor treści stron Shopify nie jest zweryfikowaną metodą instalacji tego widżetu.
Wymagania
- Potrzebujesz dostępu do kodu motywu. Płatnego motywu w okresie próbnym nie można edytować przed zakupem. Rola musi mieć uprawnienia Themes i Edit code. Zobacz instrukcję Shopify dotyczącą kodu motywu.
- Podczas testowania publicznego sklepu pozostaw włączony kanał Widżet czatu w Agentkit.
- Jeśli używasz ograniczeń domen, zezwól na dokładny adres podglądu motywu i publicznego sklepu. Po testach usuń tymczasowy adres podglądu.
Po opublikowaniu
Jeśli widżet nie pojawia się w publicznym sklepie:
- Wykonaj twarde odświeżenie strony (⌘+Shift+R na Macu, Ctrl+F5 na Windows).
- Otwórz witrynę w oknie incognito.
- Sprawdź konsolę przeglądarki pod kątem błędów.
Rozwiązywanie problemów
Widżet się nie pojawia.
- Upewnij się, że edytowałeś motyw aktywny (lub opublikowałeś duplikat).
- Sprawdź, czy oba wygenerowane znaczniki script są przed
</body>w wyrenderowanym kodzie źródłowym sklepu. - Zweryfikuj, czy domena Twojego sklepu jest dozwolona w Agent > Kanały > Zabezpieczenia.
Widżet nakłada się na czat Shopify lub panel koszyka.
- Dostosuj pozycję widżetu w ustawieniach Wygląd swojego agenta.
Widżet pojawia się w edytorze, ale nie w aktywnym sklepie.
- Upewnij się, że po wklejeniu kliknięto Save — edytor kodu nie zapisuje automatycznie.
Testowanie
- Otwórz swój sklep w oknie incognito.
- Sprawdź, czy w rogu widoczny jest dymek czatu.
- Kliknij, aby go otworzyć, i wyślij testową wiadomość.
- Sprawdź, czy oba wygenerowane znaczniki script są w kodzie źródłowym strony.
Połącz sklep, aby wyszukiwać zamówienia i produkty
Osadzenie widżetu i połączenie sklepu to dwie osobne sprawy. Powyższy kod do osadzenia umieszcza widżet czatu w Twoim sklepie. Osobne połączenie z Shopify — utworzone z zakładki Akcje → Integracje Twojego agenta — dodatkowo pozwala agentowi przeszukiwać Twój aktywny katalog i sprawdzać status zamówienia w trakcie rozmowy.
Możesz skorzystać z każdej z tych opcji osobno. Użyj samego osadzenia, jeśli agent ma odpowiadać wyłącznie na podstawie treści treningowych, i dodaj połączenie ze sklepem, gdy chcesz mieć dostęp do danych o produktach i zamówieniach na żywo.
Połączenie sklepu dostarcza tylko dane uwierzytelniające i samo w sobie niczego nie włącza: następnie dodaj w zakładce Akcje swojego agenta akcje Wyszukiwanie produktów i Status zamówienia, i włącz każdą z nich, której agent ma używać.
Kolejne kroki
- Dostosuj wygląd w ustawieniach Wygląd
- Skonfiguruj dozwolone domeny (dodaj domenę
.myshopify.comoraz domenę niestandardową) - Dodaj sugerowane wiadomości dla często zadawanych pytań o produkty
- Połącz Shopify, aby sprawdzać zamówienia