# 💬 Плавающая кнопка Telegram на сайт

Простой и универсальный скрипт для добавления на сайт плавающей кнопки **«Напишите нам в Telegram»**.  
Лёгкий, без зависимостей, с гибкими настройками цвета, формы и позиции.

---

## 🚀 Установка и использование

Скопируйте и вставьте этот код перед закрывающим тегом `</body>` в вашем HTML-файле:

```html
<!-- Плавающая кнопка Telegram -->
<style>
.telegram-float-btn {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #0088cc;
  border: none;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border-radius: 50px;
  padding: 12px 18px;
}
.telegram-float-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.telegram-float-btn svg {
  width: 22px;
  height: 22px;
  fill: white;
}
</style>

<script>
(function() {
  const settings = {
    link: 'https://t.me/your_username', // ваша ссылка на Telegram
    text: 'Напишите нам',               // текст на кнопке
    position: 'right',                  // 'left' или 'right'
    bottom: '20px',                     // отступ снизу
    side: '20px',                       // отступ сбоку
    bgColor: '#0088cc',                 // цвет кнопки
    textColor: '#ffffff',               // цвет текста
    borderRadius: '50px',               // закругление
    effect: 'shadow'                    // 'shadow', 'glow', 'none'
  };

  const btn = document.createElement('button');
  btn.className = 'telegram-float-btn';
  btn.innerHTML = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
      <path d="M248,8C111,8,0,119,0,256S111,504,248,504,496,393,496,256,385,8,248,8ZM364.2,175.3l-46.7,219.7c-3.5,15.8-12.8,19.7-25.9,12.3l-71.6-52.8-34.5,33.2c-3.8,3.8-7,7-14.3,7L181,333.9l131.5-118.6c5.7-5.1-1.3-7.9-8.8-2.8L155.9,292.4,87.4,271.4c-15.3-4.8-15.6-15.3,3.2-22.6L353.1,161.5C366.2,156.4,376.1,163.5,364.2,175.3Z"/>
    </svg>
    <span>${settings.text}</span>
  `;

  Object.assign(btn.style, {
    backgroundColor: settings.bgColor,
    color: settings.textColor,
    borderRadius: settings.borderRadius,
    bottom: settings.bottom,
    [settings.position]: settings.side
  });

  if (settings.effect === 'glow') {
    btn.style.boxShadow = `0 0 15px ${settings.bgColor}`;
  } else if (settings.effect === 'none') {
    btn.style.boxShadow = 'none';
  }

  btn.addEventListener('mouseenter', () => {
    if (settings.effect !== 'none') btn.style.transform = 'scale(1.05)';
  });
  btn.addEventListener('mouseleave', () => {
    btn.style.transform = 'scale(1)';
  });
  btn.addEventListener('click', () => {
    window.open(settings.link, '_blank');
  });

  document.body.appendChild(btn);
})();
</script>