Призыв к действию
Плавающая кнопка записи с ценой
Плавающая кнопка записи: закреплена внизу экрана, выезжает снизу, когда первый экран ушёл из вида, и прячется, пока на экране тарифы или финальный призыв — чтобы не дублировать кнопку рядом с ценами. Слева подпись с зелёной точкой, справа цена в капсуле.
Что можно поменять
- label, price, href, caption
- showAfter, hideNear, hideAtBottom, placement
- accent, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/cta-018?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради видимости. Корень — position:fixed внизу с safe-area, pointer-events:none; плашка — pointer-events:auto, translateY(100 %)→0 за .55 с при data-show. showAfter — селектор порога: IntersectionObserver ставит passed, когда элемент выше вьюпорта; hideNear — селекторы блоков, при пересечении которых (rootMargin -20 % снизу) кнопка прячется; hideAtBottom прячет у низа страницы. Без showAfter кнопка видна сразу. placement=static кладёт кнопку в поток (для превью и документации). Подпись показывается от 40rem (container query). Скрытая плашка — aria-hidden и tabIndex=-1 у ссылки. Палитра --vibeui-cta-018-* с light-dark: белый и холодный серый, акцент индиго, лаймовый маркер для выделений; шрифты Unbounded и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- course
- education
- edtech
- landing
- cta
- floating
- sticky
- button
- price
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…