> ## Documentation Index > Fetch the complete documentation index at: https://pomoc.wenetasystent.ai/llms.txt > Use this file to discover all available pages before exploring further. # Shoper: Osadzenie Asystent AI > Jak dodać widget Asystent AI do sklepu Shoper (i Shoper Storefront) — przez Google Tag Manager lub moduł własny 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 Jeśli nie masz jeszcze konta, załóż je na [tagmanager.google.com](https://tagmanager.google.com) i utwórz kontener dla swojej domeny. Skopiuj identyfikator kontenera w formacie `GTM-XXXXXXXX`. **Panel klasyczny:** przejdź do **Aplikacje i integracje → Własne integracje** i wklej kody kontenera GTM w polach **Nagłówek strony** (``) oraz **Stopka strony, przed zamknięciem** (``). **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. Oficjalny poradnik Shoper Learn krok po kroku — wraz z metodą dla Storefrontu. Zobacz też: [Jak zintegrować sklep z Google Tag Manager?](https://www.shoper.pl/learn/artykul/jak-zintegrowac-sklep-z-narzedziem-google-tag-manager) ### Etap 2: Dodaj widget Asystent AI w 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](gtm). W polu **Custom HTML** wklej poniższy kod (podmień `TWOJ_KOD` na swój kod z panelu): ```html theme={null} ``` 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. Przejdź do **Wygląd i treści → Wygląd sklepu → Edycja szablonu graficznego** i otwórz edytor układu i stylu szablonu. 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. W sekcji **Kod źródłowy**, w polu **JavaScript**, wklej poniższy skrypt (podmień `TWOJ_KOD` na swój kod z panelu): ```js theme={null} (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); })(); ``` Kliknij **ZAPISZ**, a następnie umieść moduł w układzie strony (Visual Editor), zgodnie z instrukcją Shopera. 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: Przejdź do **Ustawienia → Zaawansowane → Bezpieczeństwo**. 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ą. Oficjalne wyjaśnienie Shopera wraz z lokalizacją opcji. ## Najczęstsze problemy 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. **Sprawdź kolejno:** * Czy podmieniłeś `TWOJ_KOD` na prawdziwy kod z panelu? * Jeśli używasz GTM — czy **opublikowałeś** kontener (Submit → Publish)? Sam Preview nie wystarczy. * Wyczyść cache przeglądarki (Ctrl+Shift+R lub Cmd+Shift+R) oraz cache sklepu. * Otwórz stronę w trybie prywatnym (incognito). * Sprawdź konsolę przeglądarki (F12) — czy nie ma błędów? Kod jest dodany w **dwóch miejscach** (np. przez GTM i dodatkowo w module/integracji). Usuń jedną instancję. Zabezpieczenie `window.__asystentCloudLoaded` w naszym skrypcie chroni przed duplikatem w obrębie GTM. To normalne zachowanie! Widget automatycznie otwiera się przy pierwszej wizycie (po 3 sekundach). Przy kolejnych odwiedzinach w ciągu 15 minut trzeba kliknąć ikonę czatu ręcznie. Aby przetestować ponowne auto-otwarcie, otwórz stronę w **nowym oknie prywatnym** (incognito). Jeśli w konsoli przeglądarki (F12) widzisz błąd „Refused to load the script": * Dodaj `widget.wenetasystent.ai` do dozwolonych źródeł skryptów (`script-src`) w nagłówkach CSP. * Skontaktuj się z administratorem serwera, jeśli nie masz dostępu do konfiguracji CSP. 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ń. ## Jak usunąć widget? **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): ```html theme={null} ``` Wersja do **Google Tag Manager** (tag Custom HTML, wyzwalacz All Pages): ```html theme={null} ``` Nie wiesz, czy widget działa? Sprawdź naszą instrukcję [weryfikacji instalacji](verify-installation).