Виджет мессенджеров для сайта бесплатно
Знакомая ситуация? Заходите на сайт конкурента, а там красивые кнопочки мессенджеров выезжают сбоку. Думаете: «Надо бы и себе такое». Лезете искать — а там подписка от 500 рублей в месяц. За три кнопки. Серьёзно?
Сегодня покажу, как сделать такой виджет бесплатно. Без сервисов, без плагинов, без ежемесячных платежей. Просто кусок кода, который работает на любом сайте.
Что получится в итоге
Виджет выглядит так: через 5 секунд после загрузки страницы снизу справа выезжает плашка «Мы на связи» и аккуратно прячется обратно. При наведении мышкой появляются кнопки:
- Телефон — при наведении показывает номер, на мобильном сразу открывает звонилку
- Telegram — переход в ваш профиль или бот
- Max — прямой переход в чат
На мобильном всё работает адаптивно. Кнопки не выскакивают сами — чтобы не закрывать контент. Аккуратненько висят в углу.
Куда вставлять код
Работает везде:
- Elementor — через виджет HTML
- Tilda — через блок с кодом
- Любой конструктор — ищите блок «вставить HTML»
- Чистый сайт — вставляете перед закрывающим тегом </body>
Я обычно кидаю в футер. Один раз вставил — работает на всех страницах.
Как настроить ссылки
Max
Важный момент: когда копируете ссылку, иногда захватывается лишний текст. Проверяйте — должен быть только адрес, никаких слов типа «Присоединяйтесь».
Telegram
Самый простой способ — загуглить «генератор ссылки на Telegram». Вводите свой номер или username — получаете готовую ссылку вида t.me/ваш_ник.
Телефон
Тут два места для редактирования:
- Сам номер для звонилки — пишется слитно: +79182377272
- Номер для отображения — можно красиво разрядить: +7 (918) 237-72-72
Как поменять цвета
В коде есть блок со стилями. Цвета задаются в формате HEX (шестизначный код).
Шпаргалка:
Хотите корпоративные цвета? Откройте любой онлайн-пипетку, ткните в свой логотип — получите нужный код.
Про иконки
В коде уже зашиты иконки мессенджеров. Но если хотите свои — легко.
- Скачиваете иконку в формате SVG (на том же flaticon.com полно бесплатных)
- Загружаете к себе на сайт через медиабиблиотеку
- Копируете ссылку на файл
- Вставляете в код вместо старой
Кстати, иконку Max я тоже приложу к исходникам. Она пока не везде есть в бесплатных наборах.
Где забрать код
Скачиваете, открываете в блокноте, меняете ссылки на свои, вставляете на сайт. Дел на 10 минут.
Если нужна помощь
Не хотите разбираться сами? Понимаю. Можете написать мне напрямую — сделаю за вас. Или если нужен кастомный виджет: с калькулятором, формой, чат-ботом — тоже обращайтесь. Контакты ниже.
Скачать исходники: https://e-integrate.ru/Kod-vidzheta.zip