Kod HTML widgetu WhatsApp do skopiowania i wklejenia, od zwykłego linku wa.me po pełny pływający przycisk, plus to, czego sam surowy kod nie zrobi za Ciebie.
Jeśli szukałeś samego kodu HTML, oto on, bez konieczności rejestracji:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>Zastąp 15551234567 swoim numerem w pełnym formacie międzynarodowym: najpierw kod kraju, bez znaku plus, bez spacji, bez zera na początku. Sam ten link wystarczy, aby otworzyć czat WhatsApp z Twoją firmą. To również cała uczciwa odpowiedź na “daj mi kod HTML widgetu”, ponieważ wszystko, co następuje dalej, to Ty (lub generator) budujący elementy, których ta jedna linia nie obejmuje.
Odwiedzający trafia na link z pustym polem wiadomości. Dodaj parametr text, aby wiadomość czekała już w polu, gdy czat się otworzy:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>Wiadomość musi być zakodowana w URL: %20 to spacja, %2C to przecinek, %27 to apostrof. Najpierw napisz zdanie, które chcesz umieścić, a następnie przepuść je przez dowolny koder URL, zanim wkleisz je jako wartość text, ponieważ surowa spacja lub znak interpunkcyjny w środku ciągu zapytania zepsuje link w niektórych przeglądarkach.
Zwykły link tekstowy to nie to, co większość osób ma na myśli, mówiąc “widget WhatsApp”. Przycisk w rogu to CSS nałożony na ten sam link:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>Ta wersja pomija osobny plik ikony, umieszczając glif telefonu/czatu bezpośrednio jako SVG, więc jest to naprawdę jeden samowystarczalny blok: wklej go przed </body> i nie ma nic więcej do przesłania. Wciąż jednak zostawia cztery rzeczy do ręcznej obsługi, i właśnie tam prawdziwy generator pokazuje swoją wartość.
Telefon i komputer nie zachowują się tak samo, a nic w tym fragmencie kodu tego nie kontroluje. Kliknięcie linku wa.me na telefonie z zainstalowanym WhatsApp otwiera aplikację bezpośrednio. Bez zainstalowanej aplikacji odwiedzający zostaje wysłany do sklepu z aplikacjami, i nie ma żadnej wiadomości zapasowej ani alternatywnej metody kontaktu, którą można skonfigurować z poziomu samego linku. W przeglądarce na komputerze otwiera się web.whatsapp.com na nowej karcie, co działa tylko wtedy, gdy odwiedzający jest już zalogowany do WhatsApp Web w tej przeglądarce, w przeciwnym razie widzi kod QR bez żadnego kontekstu, dlaczego. Wszystkie trzy rezultaty wynikają z tego samego atrybutu href. Nie da się wykryć, który z nich zaraz nastąpi, ani przechwycić go za pomocą zwykłego HTML.
Wstępnie wypełniona wiadomość żyje w adresie URL, a nie w polu formularza. Aby ją zmienić, musisz ponownie ręcznie zakodować nowy ciąg znaków, znaleźć każdą stronę, na której wklejony jest link, i zastąpić go tam również, jeśli nie masz udostępnianego szablonu.
Nie ma pliku ikony, który można podmienić bez ręcznej edycji ścieżki SVG, ani sposobu na zmianę pozycji, rozmiaru czy koloru przycisku bez bezpośredniego dotknięcia bloku stylów wbudowanych, linia po linii.
Nic tutaj nie przechwytuje leada, zanim czat się otworzy. Link (lub przycisk) prowadzi wprost do WhatsApp w momencie kliknięcia. Jeśli chcesz uzyskać imię i powód kontaktu, zanim rozmowa się zacznie, to osobny formularz, który musiałbyś sam zbudować, podłączyć i jakoś przekazać do parametru text.
Generator Widgetu Czatu WhatsApp to darmowe narzędzie, które zamienia te same kilka ustawień w jeden tag skryptu zamiast bloku CSS, który musisz samodzielnie utrzymywać. Ustaw swój numer, wybierz kolor, ustaw pozycję i przesunięcia, napisz powitanie i opcjonalnie włącz formularz przed czatem (krótkie pytanie, z adresem e-mail lub telefonem oznaczonym jako wymagany lub nie), który zbiera kontekst, zanim okno WhatsApp w ogóle się otworzy. Narzędzie generuje to:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Każde ustawienie to oznaczony atrybut data- w jednej linii, więc zmiana powitania lub przeniesienie przycisku do innego rogu oznacza ponowne skopiowanie tagu z formularza, a nie przeszukiwanie pliku CSS. Ikona, logika pozycjonowania, obsługa deep-linków dla urządzeń mobilnych i komputerów oraz formularz przed czatem, wszystko to żyje w hostowanym skrypcie, na który wskazuje tag, czego surowy kod HTML powyżej nie potrafi zrobić samodzielnie bez napisania tego przez Ciebie.
Jeśli wklejasz wygenerowany fragment kodu i chcesz wiedzieć, co kontroluje każda linia, zanim zmienisz ją ręcznie, oto co akceptuje ten tag:
| Atrybut | Kontroluje |
|---|---|
data-widget-id | Unikalny identyfikator nadany przez generator, nie edytuj go |
data-whatsapp-number | Numer docelowy, format międzynarodowy, bez + |
data-color | Tło przycisku, dowolna wartość szesnastkowa |
data-position-vertical | top lub bottom |
data-position-horizontal | left lub right |
data-offset-vertical / data-offset-horizontal | Odległość w pikselach od tej krawędzi |
data-z-index | Kolejność w warstwach, zwiększ, jeśli inny element o stałej pozycji zakrywa przycisk |
data-greeting | Tekst wstępnie wypełnionej wiadomości, bez konieczności ręcznego kodowania URL |
data-prechat | true, aby pokazać krótki formularz przed otwarciem czatu |
data-prechat-title / data-prechat-description / data-prechat-question | Treść wyświetlana w formularzu przed czatem |
Zarówno surowy kod HTML, jak i wygenerowany tag skryptu trafiają w to samo miejsce: gdziekolwiek renderuje się na każdej stronie, najlepiej tuż przed </body>.
theme.liquid, tuż nad </body>, poprzez Online Store → Themes → Edit Code.Czy surowy link HTML wymaga konta WhatsApp Business?
Nie. Prywatny numer WhatsApp działa z linkiem wa.me tak samo jak numer Business. Funkcje specyficzne dla Business, takie jak katalog czy automatyczne odpowiedzi, nie są częścią samego linku.
Dlaczego mój przycisk pokazuje uszkodzony obrazek zamiast ikony?
Dzieje się tak, gdy kod HTML odwołuje się do zewnętrznego pliku ikony (<img src="/whatsapp-icon.svg">), który nie został przesłany pod tę ścieżkę. Wersja z wbudowanym SVG powyżej całkowicie eliminuje ten problem, ponieważ ikona jest zapisana bezpośrednio w kodzie HTML.
Czy mogę zamiast tego umieścić kod HTML widgetu wewnątrz znacznika <head>?
Technicznie sam znacznik kotwicy musi renderować się w <body>, ponieważ zawartość <head> nie jest wyświetlana. Skrypty mogą ładować się z <head>, ale umieszczenie fragmentu tuż przed </body> unika blokowania renderowania i jest wzorcem, którego oczekuje większość kreatorów stron.
Czy jest limit tego, ile widgetów WhatsApp mogę dodać do jednej strony? Nic nie stoi na przeszkodzie, aby wkleić dwa, ale dwa pływające przyciski ułożone w tym samym rogu zwykle wyglądają jak błąd, a nie funkcja. Jeśli potrzebujesz dwóch numerów (na przykład sprzedaż i wsparcie), przypisz każdemu odrębną pozycję zamiast je nakładać.
Czy to działa tak samo w Squarespace? Panel Code Injection w Squarespace (w Settings → Advanced) akceptuje obie wersje tak samo jak blok Custom HTML w WordPressie, wstrzyknięcie w stopce stosuje to na całej witrynie w jednym miejscu.
Dosłowny kod HTML widgetu WhatsApp to jeden tag <a href="https://wa.me/...">, i teraz go masz. Zamiana go w pływający, markowy przycisk przechwytujący leady, który większość osób ma na myśli, oznacza albo samodzielne napisanie i utrzymywanie CSS oraz przypadków brzegowych deep-linków, albo pozwolenie, aby Generator Widgetu Czatu WhatsApp wygenerował gotowy tag skryptu w jednym wklejeniu, za darmo, bez konieczności zakładania konta.
Dodaj rozszerzenie Chrome i zmień sposób zarządzania rozmowami WhatsApp w swoim biznesie.