WAButton

Универсальная вставка в 1 строку

Кнопка WhatsApp для HTML & Custom Websites

Добавьте плавающую кнопку WhatsApp на свой сайт HTML & Custom Websites. Выберите приветствие, и посетители смогут писать на рабочий номер вашей компании.

Создать кнопку бесплатно

Установка: 1 мин Куда: index.html (before </body>) or root layout component

Пошаговая установка для HTML & Custom Websites

Выполните эти шаги, чтобы добавить код установки WAButton на свой сайт HTML & Custom Websites.

  1. 1

    Скопируйте код встраивания

    Скопируйте ваш уникальный фрагмент скрипта из панели виджета WAButton или с экрана первоначальной настройки.

    Совет: Не отключайте атрибут «async», чтобы браузер загружал скрипт асинхронно, без блокировки.

  2. 2

    Вставьте перед закрывающим тегом </body>

    Вставьте код в корневой HTML-файл (напр. index.html) или корневой компонент макета (напр. layout.tsx, App.vue, base.blade.php) прямо перед </body>.

    Совет: Если скрипт стоит прямо перед </body>, содержимое страницы загружается первым. 

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

    Откройте в браузере

    Сохраните файл и обновите страницу в браузере. Плавающая кнопка WhatsApp сразу появится в нижнем углу.

Почему владельцы магазинов и агентства выбирают WAButton для HTML & Custom Websites

Один универсальный тег <script>

Один крошечный асинхронный загрузчик, который одинаково работает на статическом HTML, с серверным рендерингом и в одностраничных приложениях.

Изолированные стили

Каждый стиль ограничен именами классов с префиксом «wabutton-», поэтому скрипт не меняет оформление ваших классов Tailwind, Bootstrap или собственного CSS.

Самодостаточный скрипт

Собран на Preact и поставляется внутри самого скрипта, поэтому вашей странице не нужны ни jQuery, ни React, ни иконочные шрифты.

Учитывает навигацию в одностраничных приложениях

Автоматически сохраняет состояние виджета при переходах между маршрутами на стороне клиента (React Router, Next.js, Vue Router).

Частые вопросы

Работает ли WAButton с одностраничными приложениями на React, Next.js или Vue?

Да! WAButton инициализируется в объекте «window» и сохраняется при навигации маршрутизатора на стороне клиента, не перезапускаясь при каждой смене маршрута.

Снизит ли WAButton оценку Google Lighthouse или PageSpeed Insights?

WAButton — это асинхронный скрипт размером меньше 40KB (в gzip), который отдаётся с периферийных серверов Cloudflare, поэтому он не блокирует первую отрисовку. Панель чата загружается, только когда посетитель её открывает. Влияние на вашу оценку зависит от сайта, поэтому запустите PageSpeed Insights до и после установки.

Похожие бесплатные инструменты

Создавайте ссылки WhatsApp, QR-коды и сообщения для бизнеса.

Другие инструкции по установке

Добавьте WhatsApp на .

Дайте посетителям возможность спросить о товарах, ценах или наличии. Отвечайте в том WhatsApp, которым вы уже пользуетесь.

Создать кнопку бесплатно Посмотреть кнопку

Есть бесплатный тариф. Банковская карта не нужна.