17 · Маркетинг

Умная мобильная CTA-панель в Tilda
готовый код.

Закрепляет действие у нижнего края экрана и меняет текст и ссылку под текущий раздел страницы.

Забрать код ↓
Технология
HTML + CSS + JS
Установка
15 минут
Куда вставлять
Блок T123
Обновлено
08.09.2026

Сначала посмотрите,
как это работает.

Live demoМобильная CTA-панель
Прокрутка страницыСайты

Скопируйте.
Вставьте. Опубликуйте.

Код не требует сборки или установки библиотек. Перед запуском замените значения, отмеченные в инструкции ниже.

Готовый код
<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>

Четыре шага.

  1. 01

    Скопируйте номера нужных блоков Tilda вида rec123456789 и замените три selector в массиве SECTIONS.

  2. 02

    Для каждого раздела задайте label, текст button и ссылку href. Якорь формы можно указать как #form.

  3. 03

    Добавьте T123 в общий футер, вставьте код и убедитесь, что другая закреплённая панель не занимает низ экрана.

  4. 04

    Опубликуйте страницу и проверьте смену действия, закрытие панели и переходы на телефоне.

Подстройте под себя.

Разделы
Массив SECTIONS связывает номер блока с текстом и ссылкой CTA.
Ширина показа
Медиаусловие max-width:768px. Увеличьте его, если панель нужна на планшетах.
Закрытие
Флаг хранится в sessionStorage до закрытия вкладки. Удалите обработчик, если закрытие не нужно.

Не нашли нужное?
Соберём под ваш сайт.

Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.

Обсудить в Telegram ↗