Виджет мессенджеров для сайта бесплатно
Знакомая ситуация? Заходите на сайт конкурента, а там красивые кнопочки мессенджеров выезжают сбоку. Думаете: «Надо бы и себе такое». Лезете искать — а там подписка от 500 рублей в месяц. За три кнопки. Серьёзно?
Сегодня покажу, как сделать такой виджет бесплатно. Без сервисов, без плагинов, без ежемесячных платежей. Просто кусок кода, который работает на любом сайте.
Что получится в итоге
Виджет выглядит так: через 5 секунд после загрузки страницы снизу справа выезжает плашка «Мы на связи» и аккуратно прячется обратно. При наведении мышкой появляются кнопки:
- Телефон — при наведении показывает номер, на мобильном сразу открывает звонилку
- Telegram — переход в ваш профиль или бот
- Max — прямой переход в чат
На мобильном всё работает адаптивно. Кнопки не выскакивают сами — чтобы не закрывать контент. Аккуратненько висят в углу.
Куда вставлять код
Работает везде:
- Elementor — через виджет HTML
- Tilda — через блок с кодом
- Любой конструктор — ищите блок «вставить HTML»
- Чистый сайт — вставляете перед закрывающим тегом </body>
Я обычно кидаю в футер. Один раз вставил — работает на всех страницах.
Как настроить ссылки
Max
Открываете Max, идёте в профиль → «Пригласить друзей» → «Скопировать ссылку».
Важный момент: когда копируете ссылку, иногда захватывается лишний текст. Проверяйте — должен быть только адрес, никаких слов типа «Присоединяйтесь».
Telegram
Самый простой способ — загуглить «генератор ссылки на Telegram». Вводите свой номер или username — получаете готовую ссылку вида t.me/ваш_ник.
Телефон
Тут два места для редактирования:
- Сам номер для звонилки — пишется слитно: +79182377272
- Номер для отображения — можно красиво разрядить: +7 (918) 237-72-72
Как поменять цвета
В коде есть блок со стилями. Цвета задаются в формате HEX (шестизначный код).
Шпаргалка:
Хотите корпоративные цвета? Откройте любой онлайн-пипетку, ткните в свой логотип — получите нужный код.
Про иконки
В коде уже зашиты иконки мессенджеров. Но если хотите свои — легко.
- Скачиваете иконку в формате SVG (на том же flaticon.com полно бесплатных)
- Загружаете к себе на сайт через медиабиблиотеку
- Копируете ссылку на файл
- Вставляете в код вместо старой
Кстати, иконку Max я тоже приложу к исходникам. Она пока не везде есть в бесплатных наборах.
Где забрать код
Просто копируйте! Если код не отображается ниже ссылка.
<div class="contact-widget-container">
<div class="sub-buttons">
<a href="https://max.ru/u/f9LHodD0cOKaEynhV63iey1SKV2a2S-HnKMPz7XVp67eJrlYsPLNMFsRaMs"
class="sub-button max-btn"
target="_blank"
rel="noopener noreferrer"
title="Написать в MAX">
<img src="https://e-integrate.ru/wp-content/uploads/2026/03/MAX.svg" alt="MAX">
</a>
<a href="https://t.me/+79181823872"
class="sub-button tg-btn"
target="_blank"
rel="noopener noreferrer"
title="Telegram">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/>
</svg>
</a>
<div class="phone-wrapper">
<a href="tel:+7123456789"
class="sub-button phone-btn"
title="Позвонить">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill="currentColor" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
</svg>
</a>
<div class="phone-tooltip">+7 (123) 456-789</div>
</div>
</div>
<button class="main-contact-btn" id="mainContactBtn" type="button" aria-label="Контакты">
<span class="contact-label">Мы на связи</span>
<span class="main-icon">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill="white" d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
</svg>
</span>
</button>
</div>
<style>
:root {
--widget-main: #ff0000;
--widget-dark: #3E4A40;
--widget-light: #667368;
--widget-soft: rgba(76, 89, 79, 0.22);
--widget-shadow: rgba(0, 0, 0, 0.18);
}
.contact-widget-container {
position: fixed;
right: 30px;
bottom: 70px;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: flex-end;
font-family: sans-serif;
}
/* Блок дополнительных кнопок */
.contact-widget-container .sub-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 14px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(16px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.contact-widget-container:hover .sub-buttons,
.contact-widget-container.active .sub-buttons {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Основная кнопка */
.contact-widget-container .main-contact-btn {
appearance: none;
-webkit-appearance: none;
border: 0;
outline: none;
display: inline-flex;
align-items: center;
justify-content: flex-end;
cursor: pointer;
background: var(--widget-main);
padding: 0;
width: 58px;
height: 58px;
border-radius: 999px !important;
overflow: hidden !important;
box-shadow: 0 8px 24px var(--widget-shadow);
transition: width 0.35s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
animation: widgetPulse 2.8s infinite;
-webkit-tap-highlight-color: transparent;
}
.contact-widget-container .main-contact-btn:hover {
background: var(--widget-dark);
transform: translateY(-1px);
}
.contact-widget-container.active .main-contact-btn {
background: var(--widget-dark);
}
/* Раскрытое состояние надписи */
.contact-widget-container.label-visible .main-contact-btn,
.contact-widget-container:hover .main-contact-btn {
width: 178px;
padding-left: 18px;
}
/* Надпись */
.contact-widget-container .contact-label {
color: #fff;
font-weight: 600;
font-size: 14px;
line-height: 1;
white-space: nowrap;
letter-spacing: 0.2px;
opacity: 0;
max-width: 0;
overflow: hidden;
transform: translateX(8px);
transition: opacity 0.25s ease, transform 0.25s ease, max-width 0.35s ease;
}
.contact-widget-container.label-visible .contact-label,
.contact-widget-container:hover .contact-label {
opacity: 1;
max-width: 120px;
transform: translateX(0);
}
/* Иконка */
.contact-widget-container .main-icon {
width: 58px;
height: 58px;
min-width: 58px;
margin-left: 0;
border-radius: 50% !important;
overflow: hidden !important;
background: var(--widget-dark);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-widget-container .main-icon svg {
width: 24px;
height: 24px;
display: block;
}
/* Кнопки контактов */
.contact-widget-container .sub-button {
width: 52px;
height: 52px;
border-radius: 50% !important;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,0.16);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-widget-container .sub-button:hover {
transform: scale(1.08);
box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}
.contact-widget-container .sub-button svg,
.contact-widget-container .sub-button img {
width: 24px;
height: 24px;
display: block;
}
.contact-widget-container .max-btn {
background: var(--widget-dark);
}
.contact-widget-container .max-btn img {
width: 24px;
height: 24px;
object-fit: contain;
}
.contact-widget-container .tg-btn {
background: var(--widget-light);
}
.contact-widget-container .phone-btn {
background: var(--widget-main);
}
/* Обертка телефона */
.contact-widget-container .phone-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Плашка с номером */
.contact-widget-container .phone-tooltip {
position: absolute;
right: 64px;
top: 50%;
transform: translateY(-50%) translateX(10px);
background: var(--widget-dark);
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
padding: 12px 16px;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(0,0,0,0.16);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
/* Показ номера только на десктопе при наведении */
.contact-widget-container .phone-wrapper:hover .phone-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
/* Пульсация */
@keyframes widgetPulse {
0% {
box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 0 var(--widget-soft);
}
70% {
box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 14px rgba(76, 89, 79, 0);
}
100% {
box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 0 rgba(76, 89, 79, 0);
}
}
/* Мобильная версия */
@media (max-width: 768px) {
.contact-widget-container {
right: 16px;
bottom: 16px;
}
.contact-widget-container .main-contact-btn,
.contact-widget-container.label-visible .main-contact-btn,
.contact-widget-container:hover .main-contact-btn {
width: 58px;
height: 58px;
padding: 0;
border-radius: 50% !important;
}
.contact-widget-container .contact-label,
.contact-widget-container.label-visible .contact-label,
.contact-widget-container:hover .contact-label {
display: none;
}
.contact-widget-container .main-icon {
width: 58px;
height: 58px;
min-width: 58px;
margin-left: 0;
}
.contact-widget-container .sub-button {
width: 50px;
height: 50px;
}
.contact-widget-container .sub-button svg,
.contact-widget-container .sub-button img {
width: 22px;
height: 22px;
}
.contact-widget-container .phone-tooltip {
display: none;
}
}
/* Отключение анимации для тех, кто этого хочет */
@media (prefers-reduced-motion: reduce) {
.contact-widget-container .main-contact-btn {
animation: none;
}
.contact-widget-container .main-contact-btn,
.contact-widget-container .sub-buttons,
.contact-widget-container .sub-button,
.contact-widget-container .phone-tooltip,
.contact-widget-container .contact-label {
transition: none;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const widget = document.querySelector('.contact-widget-container');
const mainBtn = document.getElementById('mainContactBtn');
if (!widget || !mainBtn) return;
// Автопоказ надписи через 5 сек на десктопе
if (window.innerWidth > 768) {
setTimeout(function () {
widget.classList.add('label-visible');
setTimeout(function () {
widget.classList.remove('label-visible');
}, 2000);
}, 5000);
}
// Открытие контактных кнопок на мобильных
mainBtn.addEventListener('click', function (e) {
if (window.innerWidth <= 768) {
e.preventDefault();
widget.classList.toggle('active');
}
});
// Закрытие при клике вне виджета на мобильных
document.addEventListener('click', function (e) {
if (window.innerWidth <= 768 && !widget.contains(e.target)) {
widget.classList.remove('active');
}
});
});
</script>
Ссылка на код сразу в документе если код выше не отображается СКАЧАТЬ
Ссылка на иконку Макса 
Скачать
Скачиваете, открываете в блокноте, меняете ссылки на свои, вставляете на сайт. Дел на 10 минут.
Если нужна помощь
Не хотите разбираться сами? Понимаю. Можете написать мне напрямую — сделаю за вас. Или если нужен кастомный виджет: с калькулятором, формой, чат-ботом — тоже обращайтесь. Контакты ниже.
Скачать исходники: https://e-integrate.ru/Kod-vidzheta.zip
Телефон: +7 (918) 182-38-72