Your AI Connector Docs

Widżet WhatsApp

Integracja widżetu WhatsApp

Dodaj pływający przycisk czatu WhatsApp do swojej witryny, korzystając z tego prostego przewodnika.

Warto wiedzieć. Widżet WhatsApp to prosty przycisk typu „kliknij, aby porozmawiać” — kliknięcie go otwiera WhatsApp dla odwiedzającego, dzięki czemu może on wysłać do Ciebie wiadomość. Nie powoduje on przesyłania wiadomości do skrzynki odbiorczej czatów ani samodzielnego uruchamiania sztucznej inteligencji. Aby uzyskać czat AI osadzony bezpośrednio na stronie, użyj zamiast tego osobnego widżetu czatu.

Wolisz zwykły link lub własny przycisk? Jeśli nie chcesz pływającego widżetu i wolisz podlinkować własny przycisk (lub fragment tekstu) bezpośrednio do czatu WhatsApp, przejdź do sekcji Wolisz zwykły link lub przycisk? (wa.me) poniżej. Odpowiednik dla wiadomości SMS znajdziesz w sekcji Dodawanie linku typu „kliknij, aby wysłać SMS”.

Instalacja

  1. Otwórz plik HTML swojej witryny w edytorze tekstu.
  2. Znajdź tag </body> (zazwyczaj znajduje się na końcu pliku HTML).
  3. Wklej poniższy skrypt tuż przed tagiem </body>:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  1. W powyższym kodzie zastąp:
    • NUMBER swoim numerem WhatsApp
    • Na przykład: dla numeru +1 555 123 4567 użyj po prostu: 15551234567

Dodawanie własnej wiadomości

Jeśli chcesz, aby po kliknięciu przycisku przez użytkownika pojawiła się wstępnie wypełniona wiadomość:

  1. Użyj zamiast tego tego kodu:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. Przykład z prawdziwym numerem i wiadomością:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

Co otrzymujesz

Po instalacji automatycznie zobaczysz:

  • Zielony przycisk WhatsApp w prawym dolnym rogu witryny
  • Przycisk pozostaje widoczny podczas przewijania
  • Przycisk działa bezproblemowo na urządzeniach mobilnych
  • Subtelną animację pojawiającą się po najechaniu kursorem na przycisk

Dodatkowe informacje

  • Twój numer telefonu można zapisać z lub bez:
    • Znaku plus (+)
    • Spacji
    • Myślników (-)
    • Zostaną one automatycznie przetworzone poprawnie
  • Wiadomość może naturalnie zawierać spacje
  • Nie są wymagane żadne dodatkowe pliki ani instalacje
  • Przycisk automatycznie dostosowuje się do ekranów urządzeń mobilnych

Kompletny przykład strony internetowej 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>

Powyższy widżet zapewnia gotowy pływający przycisk. Jeśli jednak masz już własny przycisk (lub link w menu, obrazek albo fragment tekstu) i chcesz tylko, aby otwierał czat WhatsApp z Twoim numerem, w ogóle nie potrzebujesz widżetu — wystarczy, że podlinkujesz go do adresu URL wa.me.

Format jest następujący:

https://wa.me/NUMBER

Zastąp NUMBER swoim pełnym numerem w formacie międzynarodowym — tylko cyfry, bez znaku plus, spacji i myślników. Na przykład dla +31 6 5801 5937 użyjesz:

https://wa.me/31658015937

Wstępne wypełnianie wiadomości

Aby wiadomość była już wpisana w momencie otwarcia czatu, dodaj ?text=, a po nim swoją wiadomość:

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

Spacje w wiadomości muszą być zapisane jako %20 (w ten sposób linki obsługują spacje).

Umieszczanie na przycisku

Podlinkuj dowolny przycisk do tego adresu URL — dokładnie w taki sam sposób, w jaki linkujesz przycisk do dowolnego innego adresu internetowego. W czystym kodzie HTML wygląda to tak:

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

W kreatorze stron internetowych (Wix, Squarespace, WordPress, Webflow itp.) dodaj przycisk w zwykły sposób i wklej adres URL wa.me w pole „link” / „URL”.

Chcesz mieć jeden krótki link, który rotuje między kilkoma numerami, zapamiętuje powracających odwiedzających i śledzi kliknięcia? Użyj krótkich linków (w sekcji Ustawienia → Kanały) zamiast surowego adresu URL wa.me.