Добавить в корзинуПозвонить
Найти в Дзене

Виджет мессенджеров для сайта бесплатно: делаем кнопки Telegram, Max и телефона без платных сервисов

Знакомая ситуация? Заходите на сайт конкурента, а там красивые кнопочки мессенджеров выезжают сбоку. Думаете: «Надо бы и себе такое». Лезете искать — а там подписка от 500 рублей в месяц. За три кнопки. Серьёзно? Сегодня покажу, как сделать такой виджет бесплатно. Без сервисов, без плагинов, без ежемесячных платежей. Просто кусок кода, который работает на любом сайте. Виджет выглядит так: через 5 секунд после загрузки страницы снизу справа выезжает плашка «Мы на связи» и аккуратно прячется обратно. При наведении мышкой появляются кнопки: На мобильном всё работает адаптивно. Кнопки не выскакивают сами — чтобы не закрывать контент. Аккуратненько висят в углу. Я обычно кидаю в футер. Один раз вставил — работает на всех страницах. Max Важный момент: когда копируете ссылку, иногда захватывается лишний текст. Проверяйте — должен быть только адрес, никаких слов типа «Присоединяйтесь». Telegram Самый простой способ — загуглить «генератор ссылки на Telegram». Вводите свой номер или username —
Оглавление

Виджет мессенджеров для сайта бесплатно

Знакомая ситуация? Заходите на сайт конкурента, а там красивые кнопочки мессенджеров выезжают сбоку. Думаете: «Надо бы и себе такое». Лезете искать — а там подписка от 500 рублей в месяц. За три кнопки. Серьёзно?

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

Что получится в итоге

Виджет выглядит так: через 5 секунд после загрузки страницы снизу справа выезжает плашка «Мы на связи» и аккуратно прячется обратно. При наведении мышкой появляются кнопки:

  • Телефон — при наведении показывает номер, на мобильном сразу открывает звонилку
  • Telegram — переход в ваш профиль или бот
  • Max — прямой переход в чат

На мобильном всё работает адаптивно. Кнопки не выскакивают сами — чтобы не закрывать контент. Аккуратненько висят в углу.

Куда вставлять код

Работает везде:

  • Elementor — через виджет HTML
  • Tilda — через блок с кодом
  • Любой конструктор — ищите блок «вставить HTML»
  • Чистый сайт — вставляете перед закрывающим тегом </body>

Я обычно кидаю в футер. Один раз вставил — работает на всех страницах.

Как настроить ссылки

Max

Открываете Max, идёте в профиль → «Пригласить друзей» → «Скопировать ссылку».
Открываете Max, идёте в профиль → «Пригласить друзей» → «Скопировать ссылку».

Важный момент: когда копируете ссылку, иногда захватывается лишний текст. Проверяйте — должен быть только адрес, никаких слов типа «Присоединяйтесь».

Telegram

Самый простой способ — загуглить «генератор ссылки на Telegram». Вводите свой номер или username — получаете готовую ссылку вида t.me/ваш_ник.

Телефон

Тут два места для редактирования:

  1. Сам номер для звонилки — пишется слитно: +79182377272
  2. Номер для отображения — можно красиво разрядить: +7 (918) 237-72-72

Как поменять цвета

В коде есть блок со стилями. Цвета задаются в формате HEX (шестизначный код).

Шпаргалка:

-2

Хотите корпоративные цвета? Откройте любой онлайн-пипетку, ткните в свой логотип — получите нужный код.

Про иконки

В коде уже зашиты иконки мессенджеров. Но если хотите свои — легко.

  1. Скачиваете иконку в формате SVG (на том же flaticon.com полно бесплатных)
  2. Загружаете к себе на сайт через медиабиблиотеку
  3. Копируете ссылку на файл
  4. Вставляете в код вместо старой

Кстати, иконку Max я тоже приложу к исходникам. Она пока не везде есть в бесплатных наборах.

Где забрать код

Виджет мессенджеров для сайта бесплатно

Скачиваете, открываете в блокноте, меняете ссылки на свои, вставляете на сайт. Дел на 10 минут.

Если нужна помощь

Не хотите разбираться сами? Понимаю. Можете написать мне напрямую — сделаю за вас. Или если нужен кастомный виджет: с калькулятором, формой, чат-ботом — тоже обращайтесь. Контакты ниже.

Скачать исходники: https://e-integrate.ru/Kod-vidzheta.zip

-3