Как добавить кнопку WhatsApp на WordPress

от

В каталоге плагинов для WordPress насчитывается множество решений, позволяющих добавить кнопку WhatsApp на сайт. В следующих статьях мы подробно рассмотрим некоторые из них. В этой публикации мы создадим плавающую кнопку WhatsApp, не прибегая к использованию плагинов. У этого метода есть несколько преимуществ:

  1. Бесплатная реализация.
  2. Полная настраиваемость внешнего вида.
  3. Легкость в реализации без лишних функций.

Перед тем как начать, давайте обсудим, что мы хотим получить в итоге. Мы создадим плавающую кнопку с логотипом WhatsApp, которая будет перенаправлять пользователей на сайт WhatsApp или открывать приложение на мобильных устройствах. Также мы сформируем шаблон сообщения, который будет автоматически вставляться в текстовое поле. Для привлечения внимания к кнопке, добавим анимацию. Вы можете увидеть пример такой кнопки в правом нижнем углу этого экрана ↘️

Что нам потребуется?

  1. Редактор кода
  2. Доступ по FTP к файлам вашего сайта
  3. Базовые знания PHP и умение просто скопировать и вставить код 😊

Теперь, когда мы определились с целями, давайте разберем шаги, чтобы реализовать кнопку:

  1. Шаг 1: Откройте файл footer.php вашей темы через FTP. Он обычно находится в каталоге wp-content/themes/ваша-тема/.
  2. Шаг 2: Вставьте следующий код перед закрывающим тегом </body>:
<div id="whatsapp-button" style="position:fixed;bottom:20px;right:20px;z-index:1000;">
<a href="https://wa.me/ваш_номер_телефона?text=Ваш%20шаблон%20сообщения" target="_blank" style="background-color:#25D366;padding:10px;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,0.2);">
<img src="ссылка_на_иконку_whatsapp.png" alt="WhatsApp" style="width:50px;height:50px;" />
</a>
</div>

Замените ваш_номер_телефона на ваш номер в международном формате, а Ваш%20шаблон%20сообщения на текст, который хотите предварительно задать. Не забудьте заменить ссылка_на_иконку_whatsapp.png на актуальную ссылку на изображение иконки WhatsApp.

  1. Шаг 3: Добавьте стиль для кнопки. В файле style.css вашей темы добавьте следующий CSS-код:
#whatsapp-button a:hover {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

Это добавит анимацию при наведении курсора на кнопку.

Теперь у вас есть полностью функциональная кнопка WhatsApp на сайте! Вы можете настроить внешние параметры по своему усмотрению и сделать её более привлекательной для ваших пользователей. Удачи!

Ссылка на чат в WhatsApp

Мы будем использовать функцию WhatsApp, называемую «Прямая связь». Она дает возможность начать разговор с пользователем, даже если его номер не сохранен в ваших контактах. Чтобы воспользоваться этой функцией, необходимо создать специальную ссылку. Эта ссылка включает номер телефона и, при желании, текст сообщения, который автоматически появится в поле ввода.

Чтобы сгенерировать нужную ссылку, вы можете воспользоваться генератором:

Формат ссылки имеет следующую структуру: https://wa.me/номер_телефона. Например, если номер телефона +7 123 456 78 90, ссылка будет https://wa.me/71234567890. Обратите внимание, что необходимо использовать только номер телефона без символов «+», «-» и пробелов.

Если вы хотите, чтобы при открытии ссылки автоматически появилось сообщение, добавьте его к ссылке следующим образом: https://wa.me/номер_телефона?text=Ваше%20сообщение. Не забудьте кодировать пробелы и специальные символы. Например, для сообщения «Здравствуйте!» ссылка будет выглядеть как https://wa.me/71234567890?text=Здравствуйте!.

Таким образом, вы можете упростить процесс общения с клиентами и сделать его более удобным. Используйте эту функцию для повышения вовлеченности и быстрого ответа на запросы!

Использование плагинов для интеграции мессенджера

Выбор плагина может значительно упростить процесс интеграции мессенджера. Плагины предлагают множество готовых решений, позволяющих быстро настроить связь с посетителями. Среди наиболее популярных решений – плагин WP Social Chat. Его минималистичный интерфейс и гибкие настройки делают его отличным вариантом для большинства сайтов.

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

Важно помнить, что качественно работающий плагин – это залог вашего успешного общения с клиентами.

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

Применение коротких кодов – еще одна удобная функция, обеспечиваемая многими плагинами. Например, с помощью простого кода вы можете разместить иконку мессенджера в нужном месте на странице. Вот пример кода для использования с WP Social Chat:

[wp-social-chat]

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

Оставьте комментарий