Когда человек кликает по вашей рекламе, он уже готов задать вопрос или уточнить детали. Но если форма заявки длинная, кнопка «Позвонить» спрятана, а до менеджера не добраться в пару касаний — вы теряете часть трафика.
Поэтому на этапе подготовки сайта к запуску рекламы стоит добавить простой, но крайне полезный элемент — плавающий виджет связи, который открывается из любого места страницы.
Что это такое
В правом нижнем углу сайта появляется аккуратная белая кнопка. При нажатии она раскрывается в четыре кружка:
- 💬 Telegram
- 📞 Viber
- ☎️ Звонок
Пользователь сам выбирает удобный способ связи — в одно касание открывается чат или номер телефона.
Такой виджет:
- повышает конверсию сайта с контекстной рекламы, особенно на мобильных устройствах;
- убирает лишние шаги между клиентом и менеджером;
- работает бесплатно, без сторонних сервисов, лицензий и видимых логотипов;
- совместим с любыми сайтами: лендинги, WordPress, Tilda, MODX и т.д.
Почему это важно для контекстной рекламы
Контекстная реклама приводит людей с конкретным запросом — и они хотят ответ здесь и сейчас. Даже если форма обратной связи настроена, часть пользователей всё равно предпочитает писать в мессенджере.
Простой пример:
человек ищет «клининг Минск», переходит на ваш лендинг и видит кнопку Telegram. Он жмёт — и уже через минуту пишет вам напрямую. Без потери времени, без ожидания звонка.
Такие детали сильно влияют на итоговую стоимость лида. Иногда добавление одного виджета снижает CPL (стоимость обращения) на 20–30%.
Как установить. Инструкция по шагам.
Виджет полностью на чистом коде: HTML + CSS + JS.
Не требует регистрации, сторонних скриптов или плагинов.
Всё, что нужно:
- Скопировать HTML-блок перед закрывающимся тегом
</body>. - Подключить CSS и JS-файлы.
- Указать свои ссылки: Telegram, Viber, WhatsApp, телефон.
- Заменить иконки (если нужно) — можно поставить любые SVG или PNG.
Через 2–3 минуты всё готово.
Код HTML
Скопировать и вставить перед закрывающимся тегом </body>
<!-- Contact FAB -->
<div class="contact-fab" id="contactFab" aria-live="polite">
<!-- Главная кнопка -->
<button class="fab-btn" id="fabToggle" aria-expanded="false" aria-controls="fabList" aria-label="Открыть контакты">
<img src="img/chat.gif" alt="Открыть контакты" width="28" height="28" loading="lazy" />
</button>
<!-- Список кнопок -->
<div class="fab-list" id="fabList">
<!-- Telegram -->
<a class="fab-item" href="https://t.me/YOUR_TELEGRAM" target="_blank" rel="noopener" title="Telegram" aria-label="Написать в Telegram">
<img src="img/tg.png" alt="Telegram" width="28" height="28" loading="lazy" />
</a>
<!-- Viber -->
<a class="fab-item" href="viber://chat?number=%2B375291112233" target="_blank" rel="noopener" title="Viber" aria-label="Написать в Viber">
<img src="img/viber.png" alt="Viber" width="28" height="28" loading="lazy" />
</a>
<!-- WhatsApp -->
<a class="fab-item" href="https://wa.me/375291112233" target="_blank" rel="noopener" title="WhatsApp" aria-label="Написать в WhatsApp">
<img src="img/whatsapp.png" alt="WhatsApp" width="28" height="28" loading="lazy" />
</a>
<!-- Звонок -->
<a class="fab-item" href="tel:+375291112233" title="Позвонить" aria-label="Позвонить">
<img src="img/call-in.png" alt="Звонок" width="28" height="28" loading="lazy" />
</a>
</div>
</div>
<!-- /Contact FAB -->
<!-- Подключение файлов -->
<link rel="stylesheet" href="css/contact-widget.css">
<script src="js/contact-widget.js" defer></script>
Код CSS
Создайте файл CSS с именем contact-widget.css по пути: имя-вашего-сайта.рф/css
Или вставьте код в тело сайта между <style>код</style>
:root{
--fab-size: 56px; /* размер главной кнопки */
--item-size: 48px; /* размер дочерних кнопок */
--gap: 10px; /* расстояние между кружками */
--corner: 20px; /* отступ от края экрана */
--bg: #ffffff; /* фон кружков */
--shadow: 0 8px 24px rgba(0,0,0,.2);
--z: 9999; /* поверх почти всего */
}
/* Контейнер */
.contact-fab{
position: fixed;
right: var(--corner);
bottom: var(--corner);
width: var(--fab-size);
height: var(--fab-size);
z-index: var(--z);
font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
/* Кнопки-кружки */
.fab-btn, .fab-item{
display: grid;
place-items: center;
border-radius: 50%;
background: var(--bg);
border: none;
cursor: pointer;
outline: none;
box-shadow: var(--shadow);
transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
-webkit-tap-highlight-color: transparent;
}
.fab-btn{
width: var(--fab-size);
height: var(--fab-size);
}
.fab-btn img{ width: 60%; height: 60%; }
.fab-list{
position: absolute;
right: 0;
bottom: calc(var(--fab-size) + var(--gap));
display: grid;
gap: var(--gap);
justify-items: end;
pointer-events: none; /* пока скрыто — не ловим клики */
}
.fab-item{
width: var(--item-size);
height: var(--item-size);
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(.96);
pointer-events: auto;
}
.contact-fab.open .fab-item{
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Лёгкая ступенчатая задержка */
.fab-item:nth-child(1){ transition-delay: 40ms; }
.fab-item:nth-child(2){ transition-delay: 80ms; }
.fab-item:nth-child(3){ transition-delay: 120ms; }
.fab-item:nth-child(4){ transition-delay: 160ms; }
/* Нажатие */
.fab-btn:active, .fab-item:active{ transform: scale(.96); }
/* Фокус (доступность) */
.fab-btn:focus-visible, .fab-item:focus-visible{
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Анимации можно отключить системно */
@media (prefers-reduced-motion: reduce){
.fab-btn, .fab-item{ transition: none !important; }
}
/* На очень узких экранах — чуть компактнее */
@media (max-width: 380px){
:root{
--fab-size: 52px;
--item-size: 44px;
--corner: 16px;
}
}
Код JS
Создайте файл JS с именем contact-widget.js по пути: имя-вашего-сайта.рф/js
Или вставьте код в тело сайта между <script>код</script>
;(function () {
var root = document.getElementById('contactFab');
if (!root) return;
var toggle = document.getElementById('fabToggle');
var list = document.getElementById('fabList');
function openMenu() {
root.classList.add('open');
if (toggle) {
toggle.setAttribute('aria-expanded', 'true');
toggle.setAttribute('aria-label', 'Закрыть контакты');
}
}
function closeMenu() {
root.classList.remove('open');
if (toggle) {
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-label', 'Открыть контакты');
}
}
if (toggle) {
toggle.addEventListener('click', function (e) {
e.stopPropagation();
root.classList.contains('open') ? closeMenu() : openMenu();
});
}
// Клик вне виджета — закрыть
document.addEventListener('click', function (e) {
if (!root.contains(e.target)) closeMenu();
});
// ESC — закрыть
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') closeMenu();
});
// Защита от "ловли" табом скрытых кнопок
function syncTabIndex() {
var items = root.querySelectorAll('.fab-item');
var isOpen = root.classList.contains('open');
items.forEach(function (el) {
el.tabIndex = isOpen ? 0 : -1;
});
}
// Синхронизируем при открытии/закрытии
var observer = new MutationObserver(syncTabIndex);
observer.observe(root, { attributes: true, attributeFilter: ['class'] });
syncTabIndex();
})();
Картинки
Скачайте картинки и поместите в папку сайта img/
https://disk.yandex.by/d/HN85zjpNWaZJ_w
Что вы получаете
✅ Простую точку контакта в один клик.
✅ Единый стиль с сайтом (цвет, размер, отступы можно подстроить).
✅ Бесплатную интеграцию без зависимостей.
✅ Улучшение поведения пользователей: больше обращений, меньше отказов.
Если вы готовите сайт к контекстной рекламе — не оставляйте посетителя без быстрого способа написать вам.
Маленькая кнопка в углу способна вернуть десятки клиентов, которых раньше вы просто теряли.
