Shoper: Osadzenie Asystent AI

Widget Asystent AI dodasz do sklepu Shoper na dwa sposoby. Zalecamy Google Tag Manager (GTM) — działa w każdym abonamencie i omija czyszczenie kodu HTML przez sklep. Jeśli korzystasz z Shoper Premium, możesz zamiast tego użyć modułu własnego w Storefroncie.

Swój kod widgetu znajdziesz w panelu Asystent AI — przejdź do zakładki Chatbot i skopiuj 8-znakowy kod z sekcji “Umieść chatbota na swojej stronie”.

Którą metodę wybrać?

Metoda	Dla kogo	Abonament
Google Tag Manager (zalecana) ⭐	Każdy sklep Shoper i Shoper Storefront	Dowolny
Moduł własny (Storefront)	Sklepy na Shoper Storefront	Tylko Shoper Premium

Nie masz jeszcze Google Tag Managera na sklepie? To nie problem — Shoper pozwala go podłączyć w każdym abonamencie. Poniżej pokazujemy, jak to zrobić.

Metoda 1: Google Tag Manager (ZALECANA) ⭐

Ta metoda ma dwa etapy: najpierw podłączasz kontener GTM do sklepu Shoper, a potem dodajesz w GTM widget Asystent AI. Działa w każdym abonamencie Shoper.

Etap 1: Podłącz Google Tag Manager do sklepu Shoper

Utwórz kontener GTM

Jeśli nie masz jeszcze konta, załóż je na tagmanager.google.com i utwórz kontener dla swojej domeny. Skopiuj identyfikator kontenera w formacie GTM-XXXXXXXX.

Dodaj GTM w panelu Shoper

Panel klasyczny: przejdź do Aplikacje i integracje → Własne integracje i wklej kody kontenera GTM w polach Nagłówek strony (<head>) oraz Stopka strony, przed zamknięciem (<body>).Shoper Storefront: przejdź do Wygląd i treści → Wygląd sklepu → Edycja szablonu graficznego, otwórz edytor szablonu, wejdź w zakładkę Integracje i w module „Google Analytics i Google Tag Manager” wpisz identyfikator GTM-XXXXXXXX.

Jeśli w polach integracji jest już jakiś kod (np. Google Analytics) — nie usuwaj go. Dopisz kody GTM na końcu każdego pola.

Instrukcja Shopera: instalacja kodu GTM

Oficjalny poradnik Shoper Learn krok po kroku — wraz z metodą dla Storefrontu. Zobacz też: Jak zintegrować sklep z Google Tag Manager?

Gdy kontener GTM działa już na sklepie, dodaj w nim widget jako tag Custom HTML z wyzwalaczem All Pages (Wszystkie strony). Pełną instrukcję krok po kroku znajdziesz w naszym artykule: Osadzenie przez Google Tag Manager. W polu Custom HTML wklej poniższy kod (podmień TWOJ_KOD na swój kod z panelu):

<script>
  (function() {
    if (window.__asystentCloudLoaded) return;
    window.__asystentCloudLoaded = true;

    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://widget.wenetasystent.ai/?code=TWOJ_KOD';
    document.body.appendChild(s);
  })();
</script>

Pamiętaj, aby na końcu opublikować kontener w GTM (Submit → Publish). Sam podgląd (Preview) nie sprawi, że widget będzie widoczny dla odwiedzających.

Metoda 2: Moduł własny w Shoper Storefront

Tworzenie modułów własnych jest dostępne wyłącznie w abonamencie Shoper Premium. Jeśli nie masz Premium — użyj Metody 1 (Google Tag Manager), która działa w każdym planie.

Otwórz edytor szablonu

Przejdź do Wygląd i treści → Wygląd sklepu → Edycja szablonu graficznego i otwórz edytor układu i stylu szablonu.

Dodaj moduł własny

Wejdź w zakładkę Moduły własne i kliknij Dodaj moduł. Nadaj nazwę (np. „Asystent AI”), wybierz typ modułu oraz zakres stron (dowolna strona), aby widget pojawił się na całym sklepie.

Wklej kod widgetu

W sekcji Kod źródłowy, w polu JavaScript, wklej poniższy skrypt (podmień TWOJ_KOD na swój kod z panelu):

(function() {
  if (window.__asystentCloudLoaded) return;
  window.__asystentCloudLoaded = true;
  var s = document.createElement('script');
  s.async = true;
  s.src = 'https://widget.wenetasystent.ai/?code=TWOJ_KOD';
  document.body.appendChild(s);
})();

Zapisz i umieść moduł

Kliknij ZAPISZ, a następnie umieść moduł w układzie strony (Visual Editor), zgodnie z instrukcją Shopera.

Shoper Learn: Storefront — Moduły własne

Oficjalna instrukcja Shopera: jak utworzyć i umieścić moduł własny w Storefroncie.

Ważne: „Wyłącz czyszczenie kodu HTML”

Shoper domyślnie czyści (usuwa) kod HTML wklejany we własne pola — ze względów bezpieczeństwa. Jeśli po zapisaniu widzisz, że kod widgetu zniknął albo widget się nie ładuje, wyłącz to czyszczenie:

Wejdź w ustawienia bezpieczeństwa

Przejdź do Ustawienia → Zaawansowane → Bezpieczeństwo.

Włącz opcję

Zaznacz (przesuń suwak) opcję „Wyłącz czyszczenie kodu HTML” i zapisz zmiany.

Metoda przez Google Tag Manager (Metoda 1) nie podlega temu czyszczeniu — kod ładuje się po stronie przeglądarki. Dlatego GTM jest ścieżką zalecaną.

Shoper Learn: Dlaczego sklep wycina znaczniki HTML?

Oficjalne wyjaśnienie Shopera wraz z lokalizacją opcji.

Najczęstsze problemy

Kod widgetu znika po zapisaniu

To domyślne czyszczenie kodu HTML w Shoperze. Włącz opcję „Wyłącz czyszczenie kodu HTML” w Ustawienia → Zaawansowane → Bezpieczeństwo i zapisz — albo (zalecane) dodaj widget przez Google Tag Manager, gdzie problem nie występuje.

Widget nie pojawia się po publikacji

Widget pojawia się dwa razy

Widget pojawił się raz i zniknął

Widget zablokowany przez Content Security Policy (CSP)

Używam adblocka lub rozszerzenia prywatności

Niektóre rozszerzenia przeglądarki (uBlock Origin, Ghostery, AdBlock) mogą blokować skrypt widgetu.Rozwiązanie: dodaj widget.wenetasystent.ai do wyjątków w ustawieniach rozszerzenia lub otwórz stronę w trybie prywatnym bez rozszerzeń.

Metoda 1 (GTM): w Google Tag Manager znajdź tag „Asystent AI Widget” → Pause (Wstrzymaj) lub usuń tag → Submit → Publish. Metoda 2 (moduł własny): w edytorze szablonu Storefront usuń moduł z układu strony lub skasuj moduł własny → zapisz. Jeśli wklejałeś kod bezpośrednio we Własne integracje — usuń go z pól Nagłówek strony / Stopka strony, przed zamknięciem i zapisz. Po usunięciu wyczyść cache przeglądarki oraz cache sklepu.

Gotowy kod do skopiowania

Kod widgetu (podmień TWOJ_KOD na swój kod z panelu Asystent AI):

<!-- Asystent AI widget -->
<script async src="https://widget.wenetasystent.ai/?code=TWOJ_KOD"></script>

Wersja do Google Tag Manager (tag Custom HTML, wyzwalacz All Pages):

<!-- Asystent AI widget przez GTM -->
<script>
  (function() {
    // Zabezpieczenie przed podwójnym załadowaniem
    if (window.__asystentCloudLoaded) return;
    window.__asystentCloudLoaded = true;

    // Podmień TWOJ_KOD na swój kod z panelu
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://widget.wenetasystent.ai/?code=TWOJ_KOD';
    document.body.appendChild(s);
  })();
</script>

Nie wiesz, czy widget działa? Sprawdź naszą instrukcję weryfikacji instalacji.

Pierwsze kroki

Instalacja widgetu

Profil firmowy

Konfiguracja chatbota

Integracje

Generowanie ofert

Konwersacje

Konto i zespół

Rozwiązywanie problemów

Shoper: Osadzenie Asystent AI

Którą metodę wybrać?

Metoda 1: Google Tag Manager (ZALECANA) ⭐

Etap 1: Podłącz Google Tag Manager do sklepu Shoper

Instrukcja Shopera: instalacja kodu GTM

Etap 2: Dodaj widget Asystent AI w Google Tag Manager

Metoda 2: Moduł własny w Shoper Storefront

Shoper Learn: Storefront — Moduły własne

Ważne: „Wyłącz czyszczenie kodu HTML”

Shoper Learn: Dlaczego sklep wycina znaczniki HTML?

Najczęstsze problemy

Jak usunąć widget?

Gotowy kod do skopiowania

​Którą metodę wybrać?

​Metoda 1: Google Tag Manager (ZALECANA) ⭐

​Etap 1: Podłącz Google Tag Manager do sklepu Shoper

Instrukcja Shopera: instalacja kodu GTM

​Etap 2: Dodaj widget Asystent AI w Google Tag Manager

​Metoda 2: Moduł własny w Shoper Storefront

Shoper Learn: Storefront — Moduły własne

​Ważne: „Wyłącz czyszczenie kodu HTML”

Shoper Learn: Dlaczego sklep wycina znaczniki HTML?

​Najczęstsze problemy

​Jak usunąć widget?

​Gotowy kod do skopiowania

Którą metodę wybrać?

Metoda 1: Google Tag Manager (ZALECANA) ⭐

Etap 1: Podłącz Google Tag Manager do sklepu Shoper

Etap 2: Dodaj widget Asystent AI w Google Tag Manager

Metoda 2: Moduł własny w Shoper Storefront

Ważne: „Wyłącz czyszczenie kodu HTML”

Najczęstsze problemy

Jak usunąć widget?

Gotowy kod do skopiowania