Модальные окна supportchatfloating

Support Chat Bubble

Плавающая круглая кнопка справки с выпадающим меню частых вопросов.

We are online!

💬

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

---
import { SupportChatBubble } from 'astro-component-kit';
---

<HelpBubbleOverlay>Content</HelpBubbleOverlay>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/SupportChatBubble.astro:

---
---
<div class="help-bubble">
  <div class="tip">We are online!</div>
  <div class="icon">💬</div>
</div>
<style>
  .help-bubble { position: fixed; bottom: 2rem; right: 2rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; z-index: 1000; }
  .icon { width: 55px; height: 55px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; box-shadow: 0 10px 30px rgba(99,102,241,0.4); }
  .tip { background: #fff; color: #000; padding: 6px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 800; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
</style>

Краткая информация

Категория: Модальные окна
Имя файла: SupportChatBubble.astro
Зависимости: Нет — чистый Astro + CSS
Теги: supportchatfloating

Живое превью

Использование

Ручная установка

Краткая информация