17 · Маркетинг
Умная мобильная CTA-панель в Tilda
готовый код.
Закрепляет действие у нижнего края экрана и меняет текст и ссылку под текущий раздел страницы.
Забрать код ↓- Технология
- HTML + CSS + JS
- Установка
- 15 минут
- Куда вставлять
- Блок T123
- Обновлено
- 08.09.2026
/ Демонстрация
Сначала посмотрите,
как это работает.
/ Код
Скопируйте.
Вставьте. Опубликуйте.
Код не требует сборки или установки библиотек. Перед запуском замените значения, отмеченные в инструкции ниже.
<div class="tselno-mobile-cta" data-mobile-cta>
<span data-cta-label>Обсудить проект</span>
<a href="#form" data-cta-link>Оставить заявку ↗</a>
<button type="button" data-cta-close aria-label="Скрыть панель">×</button>
</div>
<style>
.tselno-mobile-cta { display:none; }
@media (max-width:768px) {
.tselno-mobile-cta {
position:fixed;
z-index:9990;
left:12px;
right:12px;
bottom:max(12px, env(safe-area-inset-bottom));
min-height:72px;
padding:10px 48px 10px 16px;
border:1px solid #10110f;
background:#f2f0e9;
color:#10110f;
display:grid;
grid-template-columns:1fr auto;
gap:10px;
align-items:center;
box-shadow:0 10px 35px rgba(16,17,15,.18);
font-family:Arial,sans-serif;
}
.tselno-mobile-cta span { font-size:13px; line-height:1.3; }
.tselno-mobile-cta a { padding:13px 14px; background:#d9ff43; color:#10110f !important; text-decoration:none !important; font-size:12px; font-weight:700; white-space:nowrap; }
.tselno-mobile-cta button { position:absolute; top:5px; right:6px; width:34px; height:34px; border:0; background:transparent; color:inherit; font-size:22px; cursor:pointer; }
.tselno-mobile-cta[hidden] { display:none; }
}
</style>
<script>
(function () {
var root = document.querySelector('[data-mobile-cta]');
if (!root || sessionStorage.getItem('mobile_cta_closed') === '1') { if (root) root.hidden = true; return; }
var label = root.querySelector('[data-cta-label]');
var link = root.querySelector('[data-cta-link]');
var SECTIONS = [
{ selector: '#rec111111111', label: 'Нужен сайт?', button: 'Рассчитать', href: '#form' },
{ selector: '#rec222222222', label: 'Интересует SEO?', button: 'Получить план', href: '#form' },
{ selector: '#rec333333333', label: 'Смотрели кейсы?', button: 'Обсудить', href: '#form' }
];
var available = SECTIONS.map(function (item) {
return { config: item, element: document.querySelector(item.selector) };
}).filter(function (item) { return item.element; });
function activate(config) {
label.textContent = config.label;
link.textContent = config.button + ' ↗';
link.href = config.href;
}
if (available.length) {
activate(available[0].config);
var observer = new IntersectionObserver(function (entries) {
var visible = entries.filter(function (entry) { return entry.isIntersecting; })
.sort(function (a, b) { return b.intersectionRatio - a.intersectionRatio; })[0];
if (!visible) return;
var item = available.find(function (candidate) { return candidate.element === visible.target; });
if (item) activate(item.config);
}, { threshold: [0.25, 0.5, 0.75] });
available.forEach(function (item) { observer.observe(item.element); });
}
root.querySelector('[data-cta-close]').addEventListener('click', function () {
root.hidden = true;
sessionStorage.setItem('mobile_cta_closed', '1');
});
})();
</script>/ Установка
Четыре шага.
- 01
Скопируйте номера нужных блоков Tilda вида rec123456789 и замените три selector в массиве SECTIONS.
- 02
Для каждого раздела задайте label, текст button и ссылку href. Якорь формы можно указать как #form.
- 03
Добавьте T123 в общий футер, вставьте код и убедитесь, что другая закреплённая панель не занимает низ экрана.
- 04
Опубликуйте страницу и проверьте смену действия, закрытие панели и переходы на телефоне.
/ Настройки
Подстройте под себя.
- Разделы
- Массив SECTIONS связывает номер блока с текстом и ссылкой CTA.
- Ширина показа
- Медиаусловие max-width:768px. Увеличьте его, если панель нужна на планшетах.
- Закрытие
- Флаг хранится в sessionStorage до закрытия вкладки. Удалите обработчик, если закрытие не нужно.
/ Нужна доработка
Не нашли нужное?
Соберём под ваш сайт.
Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.
Обсудить в Telegram ↗