Dodaj swoja domene w panelu
Zaloguj sie do panelu PeekDesk i dodaj swoja domene w zakladce Domeny. Domena jest weryfikowana automatycznie — klucz API nie jest potrzebny w kodzie.
Wybierz swoja platforme
Kliknij w zakladke odpowiadajaca Twojej platformie, aby zobaczyc instrukcje krok po kroku.
Otworz swoj plik HTML
Znajdz plik HTML swojej strony (np. index.html) w dowolnym edytorze kodu. Wyszukaj zamykajacy tag </body>.
Wklej kod widgetu przed </body>
Skopiuj ponizszy fragment i wklej go tuz przed zamykajacym tagiem </body>:
<script async src="//peekdesk.com/w.js"></script>
Domena jest weryfikowana automatycznie na podstawie ustawien w panelu. Klucz API nie jest potrzebny.
Zapisz i sprawdz
Po zapisaniu pliku odswież strone. W prawym dolnym rogu powinien pojawic sie zielony przycisk "Pomoc na zywo".
Pelny przyklad pliku HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Website</title> </head> <body> <h1>Welcome to our website</h1> <script async src="//peekdesk.com/w.js"></script> </body> </html>
Przejdz do edytora motywow
W panelu WordPress przejdz do Wyglad → Edytor motywow → wybierz plik footer.php (lub Stopka).
Wklej kod widgetu
Znajdz zamykajacy tag </body> w pliku footer.php i wklej przed nim:
<script async src="//peekdesk.com/w.js"></script>
Zapisz plik i sprawdz strone
Kliknij Zaktualizuj plik, a nastepnie przejdz na swoja strone. Powinien pojawic sie zielony przycisk w rogu.
Jesli nie chcesz edytowac plikow motywu, mozesz uzyc darmowej wtyczki WPCode (Insert Headers and Footers):
1. Zainstaluj wtyczke WPCode z repozytorium WordPress
2. Przejdz do Code Snippets → Header & Footer
3. Wklej kod widgetu w sekcji Footer
4. Zapisz zmiany
Otworz edytor kodu motywu
W panelu Shopify przejdz do Sklep online → Motywy → kliknij Akcje → Edytuj kod.
Znajdz plik theme.liquid
W panelu plikow po lewej stronie znajdz i kliknij Layout → theme.liquid.
Wklej kod przed </body>
Przewin na sam dol pliku theme.liquid, znajdz </body> i wklej przed nim:
<script async src="//peekdesk.com/w.js"></script>
Kliknij Zapisz w prawym gornym rogu.
Przejdz do ustawien niestandardowego kodu
W panelu Wix przejdz do Ustawienia → Niestandardowy kod (Custom Code).
Dodaj nowy fragment kodu
Kliknij przycisk "+ Dodaj kod niestandardowy" w prawym gornym rogu.
Wklej kod i ustaw pozycje
Wklej ponizszy kod w pole tekstowe. W sekcji "Umiejscowienie kodu" wybierz: Tresc (body) — koniec. Kliknij Zastosuj.
<script async src="//peekdesk.com/w.js"></script>
Otworz kontener GTM
Zaloguj sie do Google Tag Manager i wybierz swoj kontener.
Utworz nowy tag Custom HTML
Kliknij Tagi → Nowy. Jako typ tagu wybierz Niestandardowy kod HTML (Custom HTML).
Wklej kod widgetu
W polu HTML wklej:
<script async src="//peekdesk.com/w.js"></script>
Dodaj regule wyzwalajaca
W sekcji Regula (Triggering) wybierz All Pages (Wszystkie strony), aby widget wyswietlal sie na kazdej podstronie.
Zapisz i opublikuj
Kliknij Zapisz, a nastepnie Opublikuj (przycisk w prawym gornym rogu), aby zmiany byly widoczne na stronie.
Otworz edytor szablonu
W panelu PrestaShop przejdz do Wyglad → Szablon. Znajdz i edytuj plik footer.tpl (sciezka: themes/twoj-motyw/templates/_partials/footer.tpl).
Dodaj kod widgetu
Na koncu pliku footer.tpl (przed zamykajacymi tagami) wklej:
<script async src="//peekdesk.com/w.js"></script>
Zapisz i wyczysc cache
Zapisz plik, a nastepnie przejdz do Zaawansowane → Wydajnosc i kliknij Wyczysc cache, aby zmiany byly widoczne.
Utworz hook lub komponent
W aplikacjach SPA (React, Next.js, Vue, Angular) widget nalezy zaladowac dynamicznie. Ponizej przyklad dla React z hookiem useEffect:
// components/PeekDeskWidget.jsx import { useEffect } from 'react'; export default function PeekDeskWidget() { useEffect(() => { const script = document.createElement('script'); script.src = '//peekdesk.com/w.js'; script.async = true; document.body.appendChild(script); return () => { // Cleanup przy odmontowaniu document.body.removeChild(script); const widget = document.getElementById('peekdesk-widget'); if (widget) widget.remove(); }; }, []); return null; }
Uzyj komponentu w aplikacji
Dodaj komponent do glownego layoutu (np. App.jsx lub layout.tsx):
// App.jsx lub layout.tsx import PeekDeskWidget from './components/PeekDeskWidget'; function App() { return ( <> {/* reszta aplikacji */} <PeekDeskWidget /> </> ); }
Gotowe — bez dodatkowej konfiguracji
Widget PeekDesk automatycznie obsluguje zmiany URL w aplikacjach SPA (nasluchuje na popstate i mutacje DOM), wiec nie musisz niczego dodatkowego konfigurowac.
W Next.js mozesz uzyc komponentu <Script> zamiast useEffect:
// app/layout.tsx import Script from 'next/script'; export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="//peekdesk.com/w.js" strategy="afterInteractive" /> </body> </html> ); }
Po instalacji
Weryfikacja
Po dodaniu kodu odswież strone. Jesli widget dziala poprawnie, zobaczysz zielony przycisk "Pomoc na zywo" w rogu strony. Kliknij go, aby przetestowac polaczenie.
Personalizacja
Wszystkie ustawienia widgetu (tekst przycisku, pozycja, kolor, ikona, jezyk, motyw) konfiguruje sie w Panelu → Klucz API. Snippet jest minimalny i nie wymaga zadnych atrybutow.
Autoryzacja domeny
Pamietaj o dodaniu domeny swojej strony w panelu PeekDesk (Dashboard → Domeny). Widget bedzie dzialal tylko na autoryzowanych domenach.
Potrzebujesz pomocy?
Jesli masz problem z integracja, napisz do nas na hello@peekdesk.com — odpowiadamy w ciagu 24h.
Nie masz jeszcze konta?
Zaloz darmowe konto i dodaj co-browsing na swoja strone w kilka minut.
Stworz konto — za darmo