Najważniejsze wnioski
- Do uruchomienia wystarcza jedna linia kodu otrzymana po zakupie.
- Widget działa niezależnie od technologii strony, w tym na WordPressie, Shopify i stronie HTML.
- Po instalacji trzeba przetestować panel klawiaturą, na telefonie oraz z głównymi formularzami.
- Widget jest warstwą wspierającą użytkownika, a nie zamiennikiem audytu kodu i treści.
Dla zarządzającego
Uruchomienie jest szybkie i nie wymaga przebudowy serwisu, ale powinno być częścią szerszego planu dostępności.
Dla sprzedaży
Najlepsza demonstracja to wspólny test kilku funkcji na stronie potencjalnego klienta.
Instalacja WCAGbot sprowadza się do wklejenia jednej linii kodu. To prawdziwa część opowieści marketingowej i zajmuje mniej czasu niż zaparzenie kawy. Fałszywa jest druga część: przekonanie, że po wklejeniu skryptu temat jest zamknięty. Panel trzeba jeszcze sprawdzić w miejscach, w których najczęściej koliduje z istniejącym interfejsem — w nawigacji, w formularzu i na małym ekranie.
Poniżej znajdziesz właściwą kolejność działań: gdzie wkleić kod na najpopularniejszych platformach, co przetestować zaraz po instalacji i jakie konflikty pojawiają się najczęściej.
Co dostajesz po zakupie
Po zakupie otrzymujesz fragment kodu z indywidualnym identyfikatorem instalacji. Wygląda on jak pojedynczy znacznik script ładowany asynchronicznie. Identyfikator wiąże panel z Twoją domeną, dlatego ten sam kod nie zadziała poprawnie na innym serwisie — dla drugiej domeny potrzebujesz osobnej instalacji.
Skrypt nie wymaga zmian w szablonie, systemie budowania ani w bazie danych. Nie modyfikuje też kodu źródłowego strony na stałe: działa w przeglądarce użytkownika i nakłada preferencje prezentacji na istniejący dokument.
Gdzie wkleić kod
Miejsce jest zawsze to samo: tuż przed zamykającym znacznikiem </body>, na każdej podstronie serwisu. Różni się tylko droga do tego miejsca w konkretnym systemie.
| Platforma | Gdzie wkleić | Na co uważać |
|---|---|---|
| WordPress | Wygląd → Edytor motywu → footer.php albo wtyczka do wstawiania kodu | Edycja pliku motywu znika po aktualizacji; użyj motywu potomnego lub wtyczki |
| Shopify | Sklep online → Motywy → Edytuj kod → theme.liquid | Kod musi trafić do wspólnego layoutu, nie do pojedynczego szablonu |
| PrestaShop | Szablon footer.tpl lub moduł na hook displayFooter | Po zmianie wyczyść cache Smarty |
| Webflow | Project settings → Custom code → Footer code | Wymaga ponownej publikacji projektu |
| Strona HTML | Bezpośrednio w pliku, przed </body> | Trzeba dodać do każdego pliku albo do wspólnego include |
Jeżeli serwis korzysta z menedżera tagów, kuszące jest wrzucenie skryptu właśnie tam. To działa, ale ma jeden koszt: panel pojawi się dopiero po akceptacji zgód, a część użytkowników zobaczy stronę bez niego. Dla funkcji wspierających dostępność lepszy jest zwykły znacznik w szablonie.
Pięć minut testu, które decydują o wszystkim
Instalacja bez testu to zgadywanie. Po wklejeniu kodu przejdź przez pięć sprawdzeń — każde zajmuje kilkadziesiąt sekund.
- Klawiatura. Naciśnij Tab od góry strony. Przycisk otwierający panel powinien dać się osiągnąć i uruchomić klawiszem Enter lub spacją, a po zamknięciu panelu fokus powinien wrócić w to samo miejsce.
- Widoczność fokusu. Sprawdź, czy obramowanie aktywnego elementu jest widoczne także po włączeniu trybu wysokiego kontrastu.
- Telefon. Otwórz stronę na realnym urządzeniu. Przycisk panelu nie może zasłaniać koszyka, przycisku „dodaj do koszyka”, chatu ani paska cookies.
- Formularz. Wypełnij i wyślij najważniejszy formularz z włączonym panelem — kontakt, rejestrację albo zamówienie.
- Powrót do stanu wyjściowego. Wyłącz wszystkie funkcje i odśwież stronę. Layout powinien wrócić do pierwotnej postaci.
Najczęstsze konflikty
Cztery sytuacje odpowiadają za większość zgłoszeń po instalacji.
Polityka bezpieczeństwa treści (CSP). Jeżeli serwis wysyła nagłówek Content-Security-Policy z ograniczoną listą źródeł, skrypt zostanie zablokowany. W konsoli przeglądarki zobaczysz komunikat o odrzuconym zasobie. Rozwiązaniem jest dopisanie domeny panelu do dyrektyw script-src i connect-src.
Cache. Wtyczki cache’ujące i CDN potrafią serwować starą wersję stopki jeszcze przez kilkanaście minut. Zanim uznasz, że kod nie działa, wyczyść cache po stronie serwera i CDN, a stronę otwórz w trybie prywatnym.
Nakładanie się elementów. Pływające elementy — chat, pasek zgód, przycisk powrotu do góry — walczą o ten sam róg ekranu. Jeżeli dwa elementy się przykrywają, przesuń jeden z nich, zamiast zmniejszać oba do rozmiaru, w którym nikt w nie nie trafi palcem.
Pojedyncza podstrona. W aplikacjach jednostronicowych panel czasem znika po przejściu między widokami, bo skrypt został podpięty tylko do pierwszego renderowania. Kod musi być częścią trwałego layoutu.
Wklejenie skryptu jest zdarzeniem. Dostępność jest procesem. Mylenie jednego z drugim to najdroższy błąd na tej drodze.
Scenariusz wdrożenia: sklep na WooCommerce
Rozważmy typowy scenariusz. Sklep z asortymentem odzieżowym wkleja kod przez wtyczkę do wstawiania skryptów, czyści cache i przechodzi test. Panel otwiera się poprawnie, ale na telefonie jego przycisk zasłania przycisk „dodaj do koszyka” w widoku produktu. Zespół przesuwa przycisk panelu na przeciwną stronę ekranu. Przy teście formularza zamówienia okazuje się dodatkowo, że pola „ulica” i „numer domu” nie mają etykiet — panel tego nie naprawi, bo brak etykiety jest w kodzie sklepu.
Pięć kroków uruchomienia widgetu
Efekt po godzinie pracy: użytkownicy dostają działające funkcje wspierające, a zespół ma pierwszy konkretny punkt na liście napraw źródłowych. To dobry wynik pierwszego dnia — pod warunkiem, że lista napraw nie trafia do szuflady.
Co zrobić po instalacji
Panel jest warstwą prezentacji. Nie zmienia struktury nagłówków, nie dodaje etykiet do pól formularza, nie opisuje zdjęć produktów i nie naprawia kolejności fokusu. Granicę między tym, co widget realnie załatwia, a tym, co wymaga pracy w kodzie, rozkładamy na czynniki pierwsze w tekście o tym, czym widget dostępności różni się od zgodności z WCAG.
Jeżeli prowadzisz sklep, kolejnym krokiem jest przejście checklisty dostępności sklepu internetowego na własnej ścieżce zakupowej. Jeżeli szukasz punktu odniesienia dla wymagań technicznych, zacznij od różnic między WCAG 2.1, WCAG 2.2 i EN 301 549. Kontekst prawny dla handlu elektronicznego opisuje przewodnik po Polskim Akcie o Dostępności, a same możliwości panelu — tekst o kontraście, powiększaniu tekstu i czytaniu treści.
Kilka domen, środowisko testowe i praca zespołowa
Identyfikator instalacji wiąże panel z konkretną domeną, więc każdy serwis potrzebuje własnego kodu. Dotyczy to również sytuacji, w których marka prowadzi sklep i osobną stronę informacyjną — to dwie instalacje, nie jedna.
Ze środowiskiem testowym bywa inaczej. Jeżeli sprawdzasz wdrożenie na kopii serwisu pod adresem roboczym, panel może się tam nie uruchomić, bo domena nie zgadza się z identyfikatorem. W takiej sytuacji test warto zrobić na produkcji poza godzinami szczytu albo poprosić o tymczasowe dopisanie domeny testowej.
Warto też ustalić w zespole, kto jest właścicielem tej linijki kodu. Skrypty w stopce mają tendencję do znikania przy migracjach, zmianie motywu i porządkach w menedżerze tagów. Jeden wpis w dokumentacji wdrożenia oszczędza późniejszego zgadywania, dlaczego panel przestał się pokazywać.
Jak zmierzyć, czy panel jest używany
Instalacja bez pomiaru daje złudzenie działania. Minimum to odpowiedź na trzy pytania: ilu użytkowników otwiera panel, które funkcje włączają najczęściej i czy sesje z włączonym panelem kończą się konwersją porównywalnie do pozostałych.
Pierwsze dwie liczby mówią o realnej potrzebie i bywają zaskakujące — powiększenie tekstu zwykle wygrywa z egzotycznymi trybami kolorystycznymi. Trzecia liczba pilnuje, żeby udogodnienie nie zamieniło się w przeszkodę: jeżeli konwersja z włączonym panelem wyraźnie spada, to sygnał, że coś w układzie strony nie znosi zmienionej prezentacji i wymaga poprawki w kodzie.
Najczęstsze pytania
Czy instalacja wymaga programisty?
Nie, jeżeli masz dostęp do panelu administracyjnego i możesz dodać kod do stopki. Programista bywa potrzebny dopiero przy restrykcyjnej polityce CSP albo w aplikacji jednostronicowej.
Czy skrypt spowolni stronę?
Skrypt ładuje się asynchronicznie, więc nie blokuje renderowania treści. Realny wpływ sprawdzisz sam: zmierz stronę narzędziem do audytu wydajności przed instalacją i po niej, na tej samej podstronie i tym samym łączu.
Czy panel będzie widoczny dla wszystkich użytkowników?
Tak, przycisk otwierający panel jest widoczny domyślnie. Użytkownik decyduje, czy z niego skorzysta i które funkcje włączy.
Czy muszę wkleić kod na każdej podstronie?
Kod musi działać na każdej podstronie, ale w praktyce wystarczy dodać go raz do wspólnego szablonu stopki. Osobne wklejanie dotyczy tylko stron statycznych bez wspólnego layoutu.
Co zrobić, gdy panel nie pojawia się po instalacji?
Sprawdź kolejno: czy kod faktycznie jest w wygenerowanym źródle strony, czy cache został wyczyszczony i czy konsola przeglądarki nie pokazuje błędu blokady zasobu. Te trzy przyczyny wyjaśniają zdecydowaną większość zgłoszeń.
Czy widget zmienia kod źródłowy mojej strony?
Nie. Zmiany zachodzą w przeglądarce użytkownika i dotyczą sposobu wyświetlania. Po wyłączeniu funkcji i odświeżeniu strona wraca do pierwotnego wyglądu.
Czy po instalacji strona jest zgodna z WCAG?
Nie. Instalacja dodaje funkcje wspierające użytkownika, ale zgodność ocenia się dla całego serwisu, na podstawie kryteriów sukcesu WCAG i testów obejmujących kod, treść i procesy. Widget nie zastępuje audytu ani napraw źródłowych.
Jak sprawdzić, czy instalacja niczego nie zepsuła?
Przejdź najważniejszą ścieżkę konwersji z włączonym panelem i bez niego, na komputerze i na telefonie. Jeżeli obie ścieżki kończą się tak samo, instalacja jest neutralna dla sprzedaży.
