Przycisk WhatsApp na stronę internetową: kod, wtyczka lub widget

SendSeven Team, Editorial Team

Przycisk WhatsApp na stronie internetowej: kod HTML do skopiowania, poprawny link wa.me z polskimi znakami, wdrożenie w WordPressie, Shopify i Wix, zachowanie na komputerze, RODO, pomiar i to, co dzieje się po kliknięciu. Z demo na żywo.

Wielu klientów woli napisać niż zadzwonić, a WhatsApp i tak mają na smartfonie. Przycisk WhatsApp na stronie zamienia ten nawyk w kanał kontaktu: jedno kliknięcie i czat z Twoją firmą jest otwarty. Dodanie przycisku zajmuje kilka minut. Ten artykuł pokazuje kod do skopiowania, drogę w WordPressie, Shopify i Wix oraz miejsca, w których przycisk w praktyce zawodzi: na komputerze, przy ochronie danych, przy pomiarze i w skrzynce odbiorczej.

Czym jest przycisk WhatsApp na stronie internetowej?

Przycisk WhatsApp to przycisk lub link na Twojej stronie, który od razu otwiera czat WhatsApp z numerem Twojej firmy. Technicznie stoi za nim Click-to-Chat z WhatsApp: link do wa.me z Twoim numerem i, jeśli chcesz, tekstem, który czeka już w polu wiadomości. Na smartfonie link otwiera aplikację WhatsApp, na komputerze WhatsApp Web lub aplikację desktopową.

Odwiedzający nie musi przepisywać ani zapisywać Twojego numeru. Widzi gotowy tekst, uzupełnia go lub wysyła, a Ty dostajesz do skrzynki zapytanie wraz z numerem telefonu. To, czy przycisk jest zielony, w kolorach Twojej marki, czy okrągły na brzegu ekranu, jest wyłącznie kwestią projektu. Link pod spodem zawsze jest taki sam.

Demo na żywo

Wypróbuj: te przyciski otwierają prawdziwy czat

Każdy przycisk tutaj to zwykły link wa.me do naszego wsparcia. Na smartfonie otworzy się aplikacja WhatsApp, na komputerze WhatsApp Web lub aplikacja desktopowa.

1. Klasyczny, w zieleni WhatsApp

Zapytaj na WhatsApp

Od razu zwraca uwagę, ten kolor zna każdy.

2. W kolorach Twojej marki

Rozpocznij czat na WhatsApp

Przycisk ma Twój kolor, logo WhatsApp pozostaje bez zmian.

3. Pływający w prawym dolnym rogu

www.twoja-strona.pl

Pytania? Napisz do nas

Pozostaje widoczny podczas przewijania, na każdej podstronie.

4. Kod QR dla komputera

Siedzisz przy komputerze? Zeskanuj kod aparatem smartfona, a czat otworzy się od razu w Twojej aplikacji WhatsApp.

Wszystkie warianty wypełniają tę samą wiadomość: Dzień dobry SendSeven, mam jeszcze kilka pytań o przyciski WhatsApp na mojej stronie internetowej. Wiadomość zostanie wysłana dopiero, gdy naciśniesz Wyślij. Dopiero wtedy zobaczymy Twój numer, a nasz zespół wsparcia odpowie Ci na czacie.

Jak poprawnie zbudować link wa.me?

Link składa się z https://wa.me/, Twojego pełnego numeru w formacie międzynarodowym bez znaku plus, bez zera na początku i bez spacji oraz znaków specjalnych, a opcjonalnie z ?text= z wiadomością zakodowaną jako URL. Tak opisuje to WhatsApp w oficjalnej pomocy do Click-to-Chat.

Z numeru +49 (0) 821 7898-8853 powstaje w ten sposób 4982178988853: numer kierunkowy kraju 49, zero z numeru kierunkowego odpada, podobnie jak nawiasy, myślniki i spacje. Gotowy link to https://wa.me/4982178988853.

Wypełniona wiadomość musi być zakodowana jako URL. Litery, cyfry, myślnik, kropka, podkreślnik i tylda zostają, wszystko inne zamienia się w kod procentowy. Właśnie polskie znaki diakrytyczne łatwo źle zakodować, bo w UTF-8 składają się z dwóch bajtów:

Przykład z naszego demo na żywo: „pytań” zamienia się w pyta%C5%84. Kompletny link do naszego wsparcia wygląda tak:

https://wa.me/4982178988853?text=Dzie%C5%84%20dobry%20SendSeven%2C%20mam%20jeszcze%20kilka%20pyta%C5%84%20o%20przyciski%20WhatsApp%20na%20mojej%20stronie%20internetowej.

Najczęstsze błędy to znak plus lub zero po numerze kierunkowym kraju (wa.me/+49… lub wa.me/490170…), niezakodowane spacje oraz ampersand lub krzyżyk w tekście, które ucinają resztę wiadomości. Jeśli brakuje numeru, WhatsApp otworzy tylko wybór kontaktu. Jeśli nie chcesz niczego kodować ręcznie, nasz bezpłatny generator linków WhatsApp stworzy link razem z kodem QR.

Jakie są sposoby dodania przycisku WhatsApp?

Są trzy drogi: link wa.me jako własny kod HTML, gotowa wtyczka do Twojego systemu strony albo widget czatu, który łączy WhatsApp z innymi kanałami i wspólną skrzynką odbiorczą. Kod jest najlżejszy, wtyczka nie wymaga znajomości kodu, a widget się opłaca, gdy odpowiada więcej niż jedna osoba.

Do jednego przycisku na stronie kontaktowej wystarczy kod HTML. Wtyczka się opłaca, gdy chcesz pokazać przycisk na wszystkich podstronach bez znajomości kodu. Widget to właściwa droga, gdy zapytania z kilku kanałów mają trafiać do jednego zespołu.

Jak wygląda kod HTML przycisku WhatsApp?

Najprostszy przycisk WhatsApp to zwykły link HTML do wa.me z target="_blank", dzięki któremu Twoja strona pozostaje otwarta w przeglądarce. W przykładzie widnieje numer naszego wsparcia. Zastąp go własnym i dopasuj tekst:

<a href="https://wa.me/4982178988853?text=Dzie%C5%84%20dobry%2C%20mam%20pytanie%20dotycz%C4%85ce%20Pa%C5%84stwa%20oferty."
   target="_blank" rel="noopener">
  Zapytaj na WhatsApp
</a>

Do pływającego przycisku, który na każdej podstronie siedzi w prawym dolnym rogu, dochodzi trochę CSS. Kod wstawiasz raz przed zamykającym tagiem </body> w swoim szablonie:

<a href="https://wa.me/4982178988853?text=Dzie%C5%84%20dobry%2C%20mam%20pytanie."
   class="wa-float" target="_blank" rel="noopener"
   aria-label="Rozpocznij czat na WhatsApp">
  <img src="/obrazy/whatsapp-icon.svg" alt="" width="28" height="28">
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  }
</style>

Liczą się trzy szczegóły. Po pierwsze aria-label: przycisk, który pokazuje tylko logo, potrzebuje nazwy dla czytników ekranu. Po drugie rozmiar: w 56 pikseli łatwo trafić na smartfonie, poniżej 44 pikseli robi się ciasno. To także minimalny rozmiar, który Apple i WCAG zalecają dla elementów dotykowych. Po trzecie ikona: pobierz logo WhatsApp z oficjalnych zasobów marki WhatsApp, nie zmieniaj go, także w kolorze, i umieść je na własnym serwerze. Ikona z cudzego serwera przy każdym wyświetleniu strony przesyła adres IP Twoich odwiedzających.

Jak dodać przycisk WhatsApp w WordPressie, Shopify lub Wix?

We wszystkich popularnych systemach obowiązuje ta sama zasada: pojedynczy przycisk trafia na stronę jako blok HTML, a przycisk pływający raz do stopki, przed </body>. Różnią się tylko nazwy menu.

WordPress

• Przycisk na jednej stronie: w edytorze blokowym wstaw blok „Własny HTML” i skopiuj do niego kod linku.
• Przycisk pływający na wszystkich stronach: najbezpieczniej za pomocą wtyczki do kodu nagłówka i stopki, takiej jak WPCode. Tam wklejasz kod w obszarze stopki. Jeśli w klasycznym motywie edytujesz bezpośrednio footer.php, użyj motywu potomnego (child theme), inaczej kod zniknie po następnej aktualizacji motywu. Motywy blokowe nie mają footer.php, tam WPCode jest prostszą drogą.
• Gotowe wtyczki WhatsApp: w katalogu wtyczek jest ich wiele. Przed instalacją sprawdź, czy wtyczka ładuje pliki z obcych serwerów, kiedy ostatnio była aktualizowana i czy współgra z Twoim banerem cookie.

Shopify

• Przycisk pływający w całym sklepie: w sekcji Sklep internetowy > Motywy kliknij przy aktualnym motywie menu z trzema kropkami, a potem „Edytuj kod”. Otwórz plik layout/theme.liquid i wstaw kod bezpośrednio przed </body>. Wcześniej zduplikuj motyw z tego samego menu.
• Przycisk na stronie lub na stronie produktu: w motywach Online Store 2.0, takich jak Dawn, dodaj w edytorze motywu sekcję „Własny Liquid” i wklej kod linku.

Wix i Webflow

• Wix: do przycisku na jednej stronie użyj w edytorze elementu do osadzania kodu HTML. Wix pokazuje osadzony kod we własnej ramce. Przycisk pływający na całej witrynie należy więc umieścić w „Settings > Development & integrations > Custom code”. Z tego obszaru korzystasz tylko z opublikowaną witryną, podłączoną domeną, a więc w planie Premium.
• Webflow: dla całej witryny wpisz kod w ustawieniach witryny („Site settings”) w sekcji „Custom code”, w polu „Footer code”, co wymaga płatnego planu witryny. Dla pojedynczego przycisku użyj elementu „Code Embed”.

Dodanie widgetu czatu z WhatsApp

Widget taki jak ten z SendSeven dodaje się tak samo: wstawiasz raz fragment skryptu przed </body>. W WordPressie robisz to przez stopkę lub WPCode, w Shopify przez theme.liquid, a w Wix i Webflow przez obszar kodu niestandardowego, jak opisano wyżej. Wszystkie ustawienia opisuje szczegółowo nasz poradnik do widgetu na stronę.

Co się dzieje, gdy ktoś kliknie przycisk na komputerze?

Na komputerze link wa.me otwiera najpierw stronę WhatsApp, z której przechodzi się do aplikacji desktopowej lub WhatsApp Web. Jeśli odwiedzający nie jest tam zalogowany, musi najpierw sparować smartfon i właśnie w tym miejscu wielu rezygnuje.

Na smartfonie droga jest krótka: kliknięcie, aplikacja się otwiera, wiadomość czeka. Na komputerze wszystko zależy od tego, czy WhatsApp jest tam już skonfigurowany. Zwłaszcza w B2B, gdzie wielu odwiedzających szuka informacji przy biurku, często tak nie jest.

Rozwiązaniem jest kod QR: odwiedzający skanuje go smartfonem i trafia prosto do czatu w swojej aplikacji. W demo na żywo powyżej widzisz go na komputerze jako wariant czwarty. W samym HTML zrobisz to regułą CSS, która pokazuje kod QR tylko na dużych ekranach. Widget SendSeven przejmuje to przejście sam: gdy ktoś kliknie WhatsApp na komputerze, widget pokazuje kod QR i oferuje WhatsApp Web jako drugą drogę. Na smartfonie aplikacja otwiera się od razu. Funkcja jest włączona w nowych widgetach, istniejące widgety zachowują dotychczasowe działanie. Dotyczy także Telegrama, Messengera, Instagrama i SMS-ów. Gdzie używać kodów QR poza stroną, pokazuje nasz artykuł o sześciu miejscach na kod QR WhatsApp.

Czy przycisk WhatsApp na stronie jest zgodny z RODO?

Tak, własny link wa.me można osadzić zgodnie z RODO: nie przesyła do WhatsApp żadnych danych podczas ładowania Twojej strony, dopiero kliknięcie odwiedzającego prowadzi tam użytkownika. Dokładniej przyjrzyj się wtyczkom i widgetom, które ładują skrypty, czcionki lub ikony z obcych serwerów, oraz temu, gdzie czat jest potem przetwarzany.

• Przed kliknięciem: przycisk hostowany u Ciebie, z własną ikoną, niczego nie ładuje od osób trzecich. Wtyczki, które pobierają pliki z obcych serwerów, przesyłają przy tym adres IP, dlatego należą do Twojej oceny i w razie potrzeby do banera cookie.
• Polityka prywatności: zwykle zawiera wzmiankę o WhatsApp jako kanale kontaktu i o danych, które otrzymujesz na czacie. Dokładne sformułowanie najlepiej omówić z inspektorem ochrony danych.
• Po kliknięciu: jeśli czat działa przez aplikację WhatsApp Business na telefonie służbowym, aplikacja może uzyskać dostęp do książki adresowej, jeśli jej na to pozwolisz, a tym samym do numerów kontaktów, które nigdy się nie zgodziły. Przez WhatsApp Business Platform i dostawcę z umową powierzenia przetwarzania danych (DPA) książka adresowa pozostaje poza grą, a Twój zespół pracuje w jednym interfejsie z rolami i uprawnieniami.

Ta część nie zastępuje porady prawnej. Szczegóły dotyczące zgody, okresów przechowywania i wyboru dostawcy znajdziesz w poradniku o WhatsApp Business i RODO.

Jak mierzyć kliknięcia przycisku WhatsApp?

Kliknięcia przycisku w Google Analytics 4 najłatwiej zmierzysz przez Google Tag Manager: wyzwalacz reaguje na linki, których adres zawiera wa.me, i wysyła własne zdarzenie. W UE taki pomiar wymaga zwykle zgody w banerze cookie, dlatego tag uruchamia się dopiero po jej wyrażeniu.

1. W Tag Managerze włącz wbudowane zmienne kliknięć, w tym Click URL.
2. Utwórz wyzwalacz typu „Kliknięcie – tylko linki”, który uruchamia się, gdy Click URL zawiera wa.me.
3. Połącz go z tagiem zdarzenia GA4, na przykład o nazwie whatsapp_click, i przekaż stronę jako parametr.
4. Powiąż tag ze zgodą z banera cookie, aby bez zgody nie działał.

W Wix Tag Managera dodajesz przez integracje marketingowe, a nie przez kod niestandardowy. Tego, co dzieje się potem na czacie, Google Analytics nie widzi. WhatsApp nie przekazuje ani parametrów UTM, ani strony źródłowej. Prosty trik daje jasność: nadaj każdemu przyciskowi własną wypełnioną wiadomość, na przykład „Mam pytanie o ceny” na stronie z cennikiem. Wtedy na czacie widzisz, skąd pochodzi zapytanie. W widgecie SendSeven statystyki widgetu dodatkowo pokazują kliknięcia według kanałów, na przykład ile razy odwiedzający wybrali WhatsApp, a także wyświetlenia i interakcje. Jak śledzić rozmowy na WhatsApp aż do przychodu, gdy w grę wchodzą reklamy, pokazuje poradnik o reklamach Click-to-WhatsApp i wa.me.

Co dzieje się po kliknięciu w Twojej firmie?

Po kliknięciu wiadomość trafia pod numer stojący za przyciskiem. W aplikacji WhatsApp Business jest to smartfon. Gdy odpowiada kilku współpracowników albo napływa wiele czatów, opłaca się wspólna skrzynka odbiorcza zespołu, w której pracujecie razem. Tu rozstrzyga się, czy przycisk przynosi klientów, czy tylko wiadomości, których nikt nie przeczyta na czas.

Jedna skrzynka odbiorcza dla Twojego zespołu

W skrzynce odbiorczej zespołu SendSeven czaty WhatsApp lądują obok e-maili, SMS-ów, Instagrama, Messengera, live chatu i Telegrama. Twój zespół przypisuje czaty, widzi, kto właśnie odpowiada, i pisze notatki wewnętrzne, których klient nie widzi. Jak to wygląda na co dzień, opisuje nasz artykuł o WhatsApp Business z wieloma użytkownikami.

Odpowiedzi wieczorem i w weekend

Część zapytań przez przycisk przychodzi po godzinach pracy. Agent AI od razu odpowiada na powtarzające się pytania o godziny otwarcia, dostawę czy ceny z Twojej bazy wiedzy, a całą resztę przekazuje Twojemu zespołowi. Następnego ranka przekazana rozmowa z całą historią czeka w skrzynce odbiorczej.

Jeden widget dla WhatsApp i innych kanałów

Nie każdy odwiedzający chce korzystać z WhatsApp. W widgecie SendSeven decydujesz, które kanały się pojawiają: tylko WhatsApp albo WhatsApp obok live chatu, e-maila, Telegrama i innych kanałów. Jeśli wyłączysz live chat, nowy widget pokazuje kanały jako listę z logo. Dzięki szybkiemu wyborowi, dostępnemu dla widgetów typu bubble, okrągła bubble rozwija kanały po kliknięciu. WhatsApp jest wtedy o dwa kliknięcia dalej. Do bubble dostępnych jest 15 ikon, wśród nich logo WhatsApp.

Jeśli potrzebujesz tylko pojedynczych przycisków, na przykład do wpisu na blogu, landing page lub stopki e-mail, w sekcji Widgety w zakładce „Promotion” znajdziesz gotowe linki i kody QR jako PNG lub SVG oraz fragmenty HTML dla przycisków kanałów, plakietek i stopek e-mail. Wypełnioną wiadomość ustawiasz tam samodzielnie. W ten sposób zbudujesz przycisk WhatsApp przez gotowy fragment, bez samodzielnego kodowania linku. Więcej o kanale znajdziesz na naszej stronie o WhatsApp dla firm.

Ile kosztuje przycisk WhatsApp?

Sam przycisk nic nie kosztuje: link wa.me jest bezpłatny, niezależnie od tego, czy korzystasz z aplikacji WhatsApp Business, czy z API. Koszty powstają dopiero przy odpowiedziach przez WhatsApp Business Platform oraz przez oprogramowanie, w którym pracuje Twój zespół.

• Wiadomości przychodzące są zawsze bezpłatne.
• Gdy klient pisze pierwszy, otwiera się okno 24-godzinne na Twoje odpowiedzi.
• Od 1 października 2026 r. Meta nalicza opłaty także za wiadomości serwisowe, czyli Twoje odpowiedzi w oknie 24-godzinnym. Pierwsze 1000 na numer telefonu i miesiąc pozostaje bezpłatnych, od 1001. obowiązuje stawka Utility, w Niemczech 0,0456 € za dostarczoną wiadomość. Szczegóły znajdziesz w naszym zestawieniu cen WhatsApp w 2026 roku oraz w cenniku Meta.
• W aplikacji WhatsApp Business nie ma kosztów wiadomości. W zamian odpowiada tylko ten, kto obsługuje smartfon i powiązane z nim urządzenia.

W SendSeven widgety na stronę są wliczone w plan Basic za 49 € miesięcznie, a agenci AI i Flow Builder od planu Professional za 79 € miesięcznie. Użycie AI rozliczane jest w kredytach AI. Wszystkie ceny są cenami netto, bez VAT, zestawienie znajdziesz na stronie z cennikiem. SendSeven możesz testować bezpłatnie przez 14 dni, ze 100 wiadomościami testowymi i bez karty kredytowej.

Masz jeszcze pytanie o swój przycisk? Skorzystaj z demo na żywo powyżej, a trafi ono prosto do naszego wsparcia.

Najczęściej zadawane pytania