Добавляем кнопки WhatsApp и Telegram на сайт без плагинов

Если вы хотите, чтобы посетители сайта могли связаться с вами через мессенджеры, добавление кнопок WhatsApp и Telegram — отличное решение. И это можно сделать без использования дополнительных плагинов, виджетов или сторонних сервисов. Достаточно всего пары строк HTML и CSS.

Преимущества прямых кнопок

• Минимальная нагрузка на сайт
• Безопасность — никакие сторонние скрипты не загружаются
• Полный контроль над внешним видом и поведением
• Отличная адаптация для мобильных пользователей

1. Как работает кнопка WhatsApp

WhatsApp позволяет открыть чат с определённым номером телефона по ссылке:

https://wa.me/ВАШ_НОМЕР

Пример с кнопкой:

<a title="Whatsapp" href="https://wa.me/ВАШ_НОМЕР" target="_blank"><img src="/wp-content/uploads/2025/06/whatsapp.svg" alt="Написать в Whatsapp" /></a>

2. Как работает кнопка Telegram

Ссылка на Telegram-аккаунт или бота имеет вид:

https://t.me/ВАШ_ЮЗЕРНЕЙМ

Пример с кнопкой:

<a title="Telegram" href="https://t.me/ВАШ_ЮЗЕРНЕЙМ" target="_blank"><img src="/wp-content/uploads/2025/06/telegram.svg" alt="Написать в Telegram" /></a>

3. Расположение кнопок и их размер

Чтобы наши кнопки на сайте имели аккуратный и завершенный вид, расположим их списком в одну строку и добавим CSS-стили, финальный HTML код будет выглядеть следующим образом:

<ul class="custom-social-icons">
<li class="custom-social-icons-list-item"><a title="Whatsapp" href="https://wa.me/ВАШ_НОМЕР" target="_blank"><img src="/wp-content/uploads/2025/06/whatsapp.svg" alt="Написать в Whatsapp" /></a></li>
<li class="custom-social-icons-list-item"><a title="Telegram" href="https://t.me/ВАШ_ЮЗЕРНЕЙМ" target="_blank"><img src="/wp-content/uploads/2025/06/telegram.svg" alt="Написать в Telegram" /></a></li>
</ul>

И не забудьте добавить CSS-стили:

.custom-social-icons-list-item {
display: inline;
margin-right: 3px;
}

.custom-social-icons-list-item img{
height: 40px;
}

4. Где взять иконки WhatsApp и Telegram

Скачать whatsapp.svg

Скачать telegram.svg

5. Заказать установку кнопок WhatsApp и Telegram на сайт

Если у Вас возникли сложности с добавлением кнопок мессенджеров на сайт, Вы всегда можете написать нам!