Бесплатный чат с сайта в мессенджеры — Telegram, Viber, WhatsApp и звонок

Скопировать и вставить перед закрывающимся тегом </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 с именем 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 с именем 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