Как добавить кнопку WhatsApp на сайт (HTML, PHP, WordPress)

Кнопка связи WhatsApp — практичный способ дать посетителю возможность сразу связаться с вами. В руководстве с примерами кода объясняется добавление кнопки на разные платформы, от HTML до WordPress.

Добавление WhatsApp на сайт HTML или PHP

Для сайта на HTML или PHP выполните следующие действия.

Создайте базовую ссылку WhatsApp

<a href="https://wa.me/905xxxxxxxxx" target="_blank">
  WhatsApp ile Bize Ulaşın
</a>

Примечание:905xxxxxxxxx замените своим номером с кодом страны. Для Türkiye используйте префикс «90», без плюса, пробелов и скобок.

Добавьте фиксированную кнопку с иконкой

<a href="https://wa.me/905xxxxxxxxx" target="_blank"
  style="position: fixed; bottom: 20px; right: 20px;
  background-color: #25D366; color: white; border-radius: 50px;
  padding: 12px 20px; text-decoration: none; font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
  📱 WhatsApp
</a>

Этот пример закрепляет кнопку справа внизу. Цвет, отступы, тень и положение можно изменить под дизайн сайта.

Разместите код внизу страницы

Код можно добавить в файл footer.php или непосредственно перед закрывающим тегом </body> . При добавлении в общий footer кнопка появится на всех страницах.

Добавление WhatsApp в WordPress

В WordPress WhatsApp можно подключить плагином или вручную добавленным кодом.

Установка через плагин

Click to Chat

• Откройте панель WordPress.
• Плагины → Добавить новый — нужный раздел.
• Найдите и установите «Click to Chat».
• Активируйте плагин.
• В настройках задайте номер телефона и оформление кнопки.

Альтернативные плагины

• WP Social Chat — прежнее название WhatsApp Chat
• Join.chat

Ручное добавление кода в WordPress

<a href="https://wa.me/905xxxxxxxxx" target="_blank"
  style="position: fixed; bottom: 20px; right: 20px;
  background-color: #25D366; color: white; border-radius: 50px;
  padding: 12px 20px; text-decoration: none; font-weight: bold;">
  📞 Bize WhatsApp'tan Yazın
</a>

Добавьте код в footer.php вашей темы либо вставьте его в блок произвольного HTML в Elementor или Gutenberg.

При прямом изменении файла темы код может исчезнуть после обновления. Для постоянного использования выберите дочернюю тему, инструмент добавления кода или подходящий плагин.

Добавление WhatsApp в Shopify

• В панели Shopify откройте Online Store → Themes → Customize .
• Откройте пользовательский код или Custom Liquid в параметрах темы.
• Добавьте код кнопки и сохраните.

Добавление WhatsApp в Wix

• В Wix Editor используйте Add → Button .
• В качестве ссылки кнопки укажите https://wa.me/905xxxxxxxxx .
• Выберите открытие в новой вкладке и проверьте мобильную версию.

Добавление WhatsApp в Squarespace

Settings → Advanced → Code Injection позволяет добавить HTML в footer. Возможно, ваш тариф Squarespace должен поддерживать внедрение кода.

Предустановленное сообщение WhatsApp

Чтобы при нажатии посетитель видел готовый текст, используйте параметр ?text= . Пробелы и турецкие символы нужно кодировать для URL.

<a href="https://wa.me/905xxxxxxxxx?text=Merhaba,%20web%20sitenizden%20ulaşıyorum."
  target="_blank">
  WhatsApp ile İletişime Geç
</a>

Проверки после установки

• Проверьте номер и код страны.
• Проверьте открытие WhatsApp Web на компьютере и приложения WhatsApp на телефоне.
• Убедитесь, что кнопка не закрывает меню, уведомление о cookies и другие фиксированные элементы.
• Проверьте контраст и доступный текст ссылки.
• Измеряйте клики через Google Analytics или менеджер тегов.

После кнопки: путь контакта и получения заявок

Открытие WhatsApp не означает, что сообщение отправлено или бизнес получил настоящую заявку. Сначала оцените, с какой страницы услуги начат контакт, затем когда и как ответила команда. В первом сообщении запрашивайте лишь нужные сведения; не передавайте персональные данные в события аналитики или параметры URL.

• Клик: Нажатия WhatsApp, телефона и email — отдельные взаимодействия.
• Доставка обращения: Если есть форма, успешную отправку должен подтвердить сервер или принимающая система.
• Реальная заявка: Разговор, в котором команда связалась с человеком и уточнила потребность, оценивается отдельно по записям бизнеса.

Чтобы совместно организовать кнопку, мобильную страницу и шаги обращения, изучите нашу услугу веб-дизайна и контактного опыта . Направление рекламного посетителя на нужную страницу рассматривается в руководстве по Google Ads и посадочным страницам .

Заключение

Кнопка WhatsApp помогает быстро общаться с посетителями и упрощает путь связи. Подходящий для вашей платформы метод позволяет добавить функцию за несколько минут.