Bubbles — Telegram & SMOService floating buttons

Минималистичный виджет из двух плавающих иконок (слева/справа) для быстрого перехода:

• слева — в Telegram-бот @SMOServiceBot
• справа — на сайт smoservice.media

Почему это удобно

• Без зависимостей и сборок — один JS-файл.
• SEO-безопасно — ссылки создаются динамически; rel="nofollow noopener".
• Ваши иконки — используйте собственные круглые PNG/SVG (цветные).
• Лёгкая анимация при наведении (scale + лёгкий «подпрыг»).
• Кастомизация через data-* атрибуты или JS API.

---

Быстрый старт

1. Положите свои иконки на сайт (рекомендуемые пути):

/newicons/telegram.svg   // или .png
/newicons/rocket.svg

2. Подключите скрипт в самом низу страницы, перед </body>:

<script src="/dist/bubblesnew.js"
  data-left-icon="/newicons/telegram.svg"
  data-left-href="https://t.me/SMOServiceBot"
  data-right-icon="/newicons/rocket.svg"
  data-right-href="https://smoservice.media"
  data-size="60"
  data-bottom="20"
  data-left-offset="20"
  data-right-offset="20"></script>

Если data-* не заданы, по умолчанию используются пути /newicons/telegram.svg и /newicons/rocket.svg, ссылки — на https://t.me/SMOServiceBot и https://smoservice.media.

---

Настройка (через data-*)

Атрибут	Тип	По умолчанию	Описание
data-left-icon	string	/newicons/telegram.svg	Путь к иконке слева
data-left-href	string	https://t.me/SMOServiceBot	Ссылка слева
data-left-alt	string	Telegram	Alt‑текст слева
data-right-icon	string	/newicons/rocket.svg	Путь к иконке справа
data-right-href	string	https://smoservice.media	Ссылка справа
data-right-alt	string	SMOService	Alt‑текст справа
data-size	number	60	Диаметр (px) обеих иконок
data-bottom	number	20	Отступ снизу (px)
data-left-offset	number	20	Отступ слева (px)
data-right-offset	number	20	Отступ справа (px)
data-autoinit	bool	true	Отключить авто‑инициализацию: false

---

JS API (альтернатива data-*)

<script src="/dist/bubblesnew.js"></script>
<script>
  BubblesNew.init({
    leftIcon:  "/newicons/telegram.svg",
    leftHref:  "https://t.me/SMOServiceBot",
    leftAlt:   "Telegram",
    rightIcon: "/newicons/rocket.svg",
    rightHref: "https://smoservice.media",
    rightAlt:  "SMOService",
    size: 64,
    bottom: 24,
    leftOffset: 20,
    rightOffset: 20,
    // enableLeft: false,
    // enableRight: false
  });
</script>

---

SEO

• Ссылки не присутствуют в исходном HTML — они добавляются динамически после загрузки страницы.
• Каждая ссылка помечена rel="nofollow noopener".
• Дополнительно элементы имеют aria-hidden и tabindex="-1".

---

Примеры

• examples/basic.html — базовый пример.
• examples/newicons/* — пример иконок-заглушек (замените на свои).

---

Лицензия

MIT