WAButton

Uniwersalne osadzenie w 1 linii

Przycisk WhatsApp dla HTML & Custom Websites

Dodaj pływający przycisk WhatsApp do swojej strony HTML & Custom Websites. Wybierz powitanie i pozwól odwiedzającym pisać na numer twojej firmy.

Utwórz darmowy przycisk

Konfiguracja: 1 min Cel: index.html (before </body>) or root layout component

Instalacja w HTML & Custom Websites krok po kroku

Wykonaj te kroki, aby dodać kod instalacyjny WAButton do swojej strony HTML & Custom Websites.

  1. 1

    Skopiuj swój kod osadzania

    Skopiuj swój unikalny fragment skryptu z panelu widżetu WAButton lub z ekranu wdrożenia.

    Wskazówka: Zostaw włączony atrybut async, aby przeglądarka ładowała skrypt asynchronicznie, bez blokowania strony.

  2. 2

    Wklej przed zamykającym tagiem </body>

    Wklej kod do głównego pliku HTML (np. index.html) lub głównego komponentu układu (np. layout.tsx, App.vue, base.blade.php) tuż przed </body>.

    Wskazówka: Umieszczenie skryptu tuż przed </body> sprawia, że treść strony ładuje się jako pierwsza. 

    <script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
  3. 3

    Otwórz w przeglądarce

    Zapisz plik i odśwież przeglądarkę. Pływający przycisk WhatsApp od razu pojawi się w dolnym rogu.

Dlaczego właściciele sklepów i agencje wybierają WAButton dla HTML & Custom Websites

Jeden uniwersalny tag skryptu

Jeden mały, asynchroniczny loader, który działa tak samo w statycznym HTML, SSR i frameworkach SPA.

Style w wydzielonym zakresie

Każdy styl jest ograniczony do klas z prefiksem wabutton-, więc nie zmienia wyglądu twoich klas Tailwind, Bootstrap ani własnego CSS.

Samodzielny skrypt

Zbudowany w Preact i dostarczany wewnątrz samego skryptu, więc twoja strona nie potrzebuje jQuery, React ani fontów z ikonami.

Obsługa nawigacji SPA

Automatycznie zachowuje stan widżetu przy przejściach między trasami po stronie klienta (React Router, Next.js, Vue Router).

Najczęściej zadawane pytania

Czy WAButton działa z aplikacjami jednostronicowymi (SPA), takimi jak React, Next.js czy Vue?

Tak! WAButton inicjalizuje się w obiekcie window i działa dalej przy nawigacji routera po stronie klienta, bez ponownego uruchamiania przy każdej zmianie trasy.

Czy WAButton obniży mój wynik w Google Lighthouse lub PageSpeed Insights?

WAButton to asynchroniczny skrypt poniżej 40KB (po kompresji gzip), serwowany z sieci brzegowej Cloudflare, więc nie blokuje pierwszego renderowania strony. Okno czatu ładuje się dopiero wtedy, gdy odwiedzający je otworzy. Wpływ na twój wynik zależy od twojej strony, więc uruchom PageSpeed Insights przed dodaniem skryptu i po nim.

Powiązane darmowe narzędzia

Twórz linki WhatsApp, kody QR i wiadomości dla swojej firmy.

Więcej instrukcji instalacji

Dodaj WhatsApp do .

Daj odwiedzającym sposób, by zapytali o produkty, ceny lub dostępność. Odpowiadaj z WhatsApp, którego już używasz.

Utwórz darmowy przycisk Zobacz podgląd przycisku

Dostępny plan darmowy. Bez karty kredytowej.