Jak dodać darmowy widget czatu WhatsApp do dowolnej strony internetowej w kilka minut: podejście z użyciem zwykłego linku wa.me oraz generator, który generuje gotowy, konfigurowalne fragmenty kodu bez konieczności pisania kodu.
Istnieją dwa uczciwe sposoby na dodanie widgetu czatu WhatsApp do strony internetowej bez płacenia za niego: wklejenie zwykłego linku wa.me i ostylizowanie go samodzielnie, lub użycie generatora, który daje gotowy, konfigurowalny fragment kodu. Oba podejścia są naprawdę darmowe i oba zajmują kilka minut. Prowadzą jednak do zupełnie różnych sytuacji sześć miesięcy później.
W tym przewodniku omówię oba podejścia, zaczynając od zwykłego linku, abyś wiedział dokładnie, z czego rezygnujesz, gdy go pominiesz.
Absolutnym minimum jest jedna linia HTML:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>Zastąp 15551234567 swoim numerem w pełnym formacie międzynarodowym, bez znaku plus, bez spacji, bez zera na początku. Parametr text to wstępnie wypełniana wiadomość, kodowana w URL, więc %20 to spacja, a %2C to przecinek. Gdy klikniesz na niego, WhatsApp otwiera się z wiadomością już wpisaną w polu, czekając na wysłanie przez odwiedzającego.
wa.me to własny krótki link Meta dla tego połączenia, więc zachowanie po drugiej stronie jest spójne: na telefonie otwiera aplikację WhatsApp bezpośrednio, jeśli jest zainstalowana, lub wysyła odwiedzającego do sklepu z aplikacjami, jeśli jej tam nie ma. Na pulpicie przeglądarki bez zainstalowanej aplikacji otwiera zamiast tego web.whatsapp.com na nowej karcie. Nie musisz sam budować tego wykrywania, co jest jedynym aspektem tego podejścia, który jest naprawdę rozwiązany za ciebie.
Wszystko inne nie jest. Ten jeden link to po prostu podkreślony niebieski tekst gdziekolwiek go umieścisz. Aby zamienić go w pływający przycisk w dolnym rogu, którym ludzie naprawdę myślą, mówiąc o “widgecie czatu WhatsApp”, musisz samodzielnie napisać CSS:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>To działa, ale teraz potrzebujesz także pliku ikony, z-index wystarczająco wysokiego, aby siedział powyżej twojego baneru cookies i wszelkich modali bez zakrywania własnego menu nawigacyjnego na urządzeniach mobilnych, oraz planu na wypadek, gdyby ktoś chciał zmienić tekst wiadomości za miesiąc, co oznacza ponowne otworzenie tego samego bloku znaczników gdziekolwiek go wkleiłeś, na każdej stronie lub szablonie, który go zawiera.
Generator Widget Rozmowy WhatsApp wykonuje tę samą pracę co link powyżej, plus stylowanie, pozycjonowanie i ikonę, a następnie zwraca jeden tag skryptu zamiast bloku niestandardowego CSS, za który odpowiadasz. Jest darmowy, nie wymaga konta i nie korzysta z WhatsApp Business API, więc nie ma kroku weryfikacji przed jego użyciem.
Oto właściwy przebieg procesu:
#25D366) jest domyślny, ale pole przyjmuje dowolną wartość szesnastkową, jeśli chcesz, aby pasowała do koloru marki twojej witryny.text w zwykłym linku, ale edytowalny z formularza zamiast kodowanego w URL.Podczas wypełniania formularza, na żywo renderuje się podgląd przycisku po prawej stronie strony, a panel kodu obok niego aktualizuje się w czasie rzeczywistym z gotowym fragmentem:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>Kliknij Kopiuj, wklej ten jeden tag gdziekolwiek przed znacznikiem zamykającym </body> na twojej witrynie, a widget jest aktywny. Nic innego nie trzeba przesyłać, brak pliku ikony, brak osobnego arkusza stylów. Każde ustawienie z formularza (kolor, pozycja, przesunięcia, powitanie, wyskakujące okno) jest zakodowane jako atrybut data- na tym jednym tagu, więc cała rzecz podróżuje jako jeden wklejenie.
Oba wyjścia wyglądają podobnie na pierwszy rzut oka, przycisk w rogu, który otwiera WhatsApp, ale starzeją się inaczej.
W wersji ręcznej każde ustawienie to wartość ukryta wewnątrz stylów wbudowanych lub osobnego pliku CSS. Zmiana powitania oznacza znalezienie i edycję parametru text w kodowanym URL. Przeniesienie przycisku, ponieważ nowy baner cookies go teraz zasłania, oznacza ponowną edycję CSS na każdej stronie lub szablonie, gdzie go wkleiłeś, a jeśli zapomniałeś o jednym, ta strona cicho ma uszkodzony wygląd widgetu, dopóki ktoś go nie zauważy. Nic z tego nie kończy się porażką głośnie, po prostu dryf poza synchronizacją strona po stronie.
Wygenerowany fragment kodu trzyma każde z tych ustawień jako oznaczony atrybut na jednej linii, którą możesz ponownie skopiować z formularza w sekundy, a następnie znaleźć i zastąpić na całej witrynie, jeśli nie używasz udostępnianego nagłówka lub stopki. A ponieważ logika właściwego przycisku żyje w hostowanym pliku skryptu, na który wskazuje tag, a nie w kodzie, który wkleiłeś, poprawki błędów i ulepszenia zachowania samego widgetu wydają się bez dotykania twojej witryny ponownie.
Mechanika jest taka sama wszędzie: umieść fragment gdziekolwiek renderuje się na każdej stronie, najlepiej tuż przed </body>.
theme.liquid, tuż nad zamykającym znacznikiem </body>, poprzez Online Store → Themes → Edit Code.Każdy z nich ma swoje własne dziwactwa warte bardziej szczegółowego spojrzenia samodzielnie, omówimy WordPress bardziej szczegółowo oddzielnie, ale krok wklejenia jest identyczny wszędzie: jeden tag skryptu, jedno miejsce, zastosowany do każdej strony na raz.
Załaduj witrynę w oknie incognito, aby buforowane style nie ukryły rzeczywistego problemu, i sprawdź przycisk zarówno na pulpicie, jak i na prawdziwym telefonie, nie tylko w oknie przeglądarki zmienionego rozmiaru. Kliknij go raz z każdego i potwierdź, że otwiera WhatsApp (aplikacja na mobilnym, web.whatsapp.com na pulpicie) z twoim numerem i wiadomością powitania już wypełnioną. Następnie przewiń stronę z dowolnymi banerami cookies lub lepkimi elementami widocznymi, najczęstszą porażką w tym momencie jest konflikt z-index, gdzie widget renderuje się za innym elementem o stałej pozycji zamiast na jego wierzchu.
Czy to naprawdę darmowe, czy jest haczyk? Generator jest darmowy bez wymaganego konta. Skrypt widgetu, na który wskazuje, jest hostowany i serwowany bez kosztów. Jeśli później zainstalujesz The Chat Quotient rozszerzenie Chrome, aby zarządzać rozmowami przychodzącymi przez widget, ma ono własny darmowy plan, ale to osobny, opcjonalny krok, a nie warunek wstępny do użycia widgetu.
Czy widget WhatsApp to to samo co WhatsApp Web?
Nie, i to częste zamieszanie. WhatsApp Web (web.whatsapp.com) to interfejs, którego używasz, aby czytać i wysyłać wiadomości WhatsApp z przeglądarki. Element widgetu sieci WhatsApp to mały przycisk, który dodajesz do swojej witryny, który po kliknięciu otwiera rozmowę, albo w aplikacji WhatsApp na mobilnym, albo w WhatsApp Web na pulpicie, który nie ma zainstalowanej aplikacji desktopowej. Widget to coś, co osadzasz; WhatsApp Web to miejsce, w którym wynikająca rozmowa otwiera się.
Czy widget działa, jeśli odwiedzający nie ma zainstalowanego WhatsApp? Na urządzeniu mobilnym kliknięcie bez zainstalowanej aplikacji wysyła odwiedzającego do sklepu z aplikacjami, aby najpierw zainstalować WhatsApp. Nie ma sposobu na obejście tego kroku, ponieważ link tylko wie, jak oddać WhatsApp, a nie zastąpić inny kanał komunikacyjny.
Czy mogę mieć więcej niż jeden numer WhatsApp, na przykład sprzedaż i wsparcie, w jednym widgecie? Nie na jednym przycisku. Widget został zbudowany wokół jednego numeru WhatsApp na instancję. Jeśli potrzebujesz dwóch punktów wejścia, dodałbyś dwa widgety z różnymi pozycjami i powitaniami, chociaż w tym momencie dedykowana strona kontaktowa z oboma wymienionymi osobno jest zwykle jaśniejsza dla odwiedzających niż dwa pływające przyciski ułożone w tym samym rogu.
Czy muszę umieć programować, aby używać generatora? Nie. Każde ustawienie to pole formularza, a jedyne, co wklejasz, to jeden tag skryptu, który generuje, ten sam krok kopiowania i wklejania niezależnie od tego, na jakiej platformie działa twoja witryna.
Link wa.me to naprawdę wszystko, czego potrzebujesz, jeśli czujesz się komfortowo pisząc i utrzymując własny CSS i nie masz nic przeciwko ponownym odwiedzinach tego kodu za każdym razem, gdy coś wymaga zmiany. Generator Widget Rozmowy WhatsApp tworzy ten sam wynik, pływający przycisk, który otwiera wstępnie wypełnioną rozmowę WhatsApp, bez CSS, pliku ikony, ani konserwacji, która towarzyszy ręcznej budowie, i to jest nadal darmowe.
Dodaj rozszerzenie Chrome i zmień sposób zarządzania rozmowami WhatsApp w swoim biznesie.