Попап выбора при входе на сайт для Tilda (разделение аудитории)

Инструкция

Данная модификация добавляет всплывающее окно при первом заходе на сайт, которое помогает разделить аудиторию, например, на юрлиц и физлиц. В попапе можно разместить две кнопки: каждая ведёт на свою страницу, либо одна из кнопок может просто закрывать окно и оставлять пользователя на текущей странице.

1. Добавьте на страницу HTML‑блок T123 (лучше разместить его в хедере или футере, чтобы код работал на всех страницах сайта).
2. Вставьте в блок приведённый ниже код.
3. Настройте параметры под свои задачи (подробнее ниже).
4. Опубликуйте все страницы сайта, чтобы изменения вступили в силу.

Настройка стилей (внешнего вида)

В коде есть блок <style>…</style>, где вы можете менять внешний вид окна и кнопок. Вот основные параметры, которые можно редактировать:

.welcome-popup (Стили окна):

background: #fff; — Цвет окна.
border-radius: 16px; — Скругление углов окна.
width: 90%; и max-width: 420px; — Ширина окна.
padding 40px 30px; — Отступы внутри окна. 40px — отступ сверху и снизу, 30px — отступ слева и справа.
font-family: 'Golos Text'; — Семейство шрифтов для кнопок и заголовка.
box-shadow: 0 8px 24px rgba (0,0,0,0.15); — Тень вокруг окна.

.welcome-popup-overlay (Затемнение экрана):

background: rgba (0,0,0,0.45); — Цвет затемнения. Последние цифры 0.45 — прозрачность.

.welcome-popup h2 (Настройки заголовка):

font-size: 22px; — Размер шрифта заголовка.
font-weight: 600; — Жирность шрифта.
margin-bottom: 24px; — Отступ снизу от заголовка до кнопок.
color: #2d2d2d; — Цвет текста заголовка.

.welcome-popup .btns (Контейнер для кнопок):

gap: 16px; — Расстояние между кнопками.

.welcome-popup button (Общие настройки для всех кнопок):

min-width: 140px; — Минимальная ширина одной кнопки. Можете увеличьте, если нужны более широкие кнопки.
padding: 12px 20px; — Внутренние отступы кнопки.
border-radius: 8px; — Скругление углов кнопки.
font-size: 16px; — Размер текста на кнопке.
font-weight: 500; — Жирность текста.

.welcome-popup .btn-choice1 (Настройки первой кнопки):

background: #017E66; — Цвет фона кнопки.
color: #fff; — Цвет текста на кнопке.

.welcome-popup .btn-choice1:hover (Цвет первой кнопки при наведении мышки.):

background: #16 954; — Цвет фона кнопки при наведении.

.welcome-popup .btn-choice2 (Настройки второй кнопки):

background: #FECF02; — Цвет фона кнопки.
color: #2d2d2d; — Цвет текста на кнопке

.welcome-popup .btn-choice2:hover (Цвет второй кнопки при наведении мышки.):

background: #e0b702; — Цвет фона кнопки при наведении.

Настройки текста

В строчке <h2 id="welcomePopupTitle">Сделайте свой выбор:</h2>. Замените «Сделайте свой выбор:» на свой текст или оставьте как есть. Это текст заголовка.

В строчке <button class="btn-choice1″ id="welcomeBtnChoice1">Выбор 1</button> Замените «Выбор 1» на свой текст или оставьте как есть. Это текст первой кнопки.

В строчке <button class="btn-choice1″ id="welcomeBtnChoice2">Выбор 2</button> Замените «Выбор 2» на свой текст или оставьте как есть. Это текст второй кнопки.

Настройка логики

На сколько дней запоминать выбор:

var EXPIRE_DAYS = 1; — Число дней. Замените на 7 (неделя), 30 (месяц) или 365 (год).

Куда ведут кнопки:

В function goChoice1() найдите: window.location.href = 'https://example.com/choice1′; — замените ссылку на свою. Это ссылка для первой кнопки.
В function goChoice2() сделайте то же самое. Это ссылка для второй кнопки.

Как сделать, чтобы первая кнопка была без перехода по ссылке (просто закрывает поп-ап):

Шаг 1

Найдите блок кода с комментарием «Вариант 1». Его нужно закомментировать. Для этого перед строкой function goChoice1() { добавьте на новой строке символы /*

После закрывающей фигурной скобки } этой функции добавьте на новой строке символы */

После этого код внутри блока должен стать зеленым (это значит, что он закомментирован и не выполняется).

Шаг 2

Найдите блок кода с комментарием «Вариант 2». Он уже будет обёрнут в /* сверху и */ снизу.

Удалите эти символы /* */ в начале и в конце блока

Теперь код «Варианта 2» станет активным (перестанет быть зелёным), и кнопка будет работать по новой логике.

<!-- Скрипт, который создает распределяющий попап при входе на Tilda с сайта bulgkate.ru -->

<style>
.welcome-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.welcome-popup {
  background: #fff;
  border-radius: 16px;
  max-width: 420px;
  width: 90%;
  padding: 40px 30px;
  text-align: center;
  font-family: 'Golos Text', Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  animation: fadeIn 0.4s ease;
}
.welcome-popup h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #2d2d2d;
}
.welcome-popup .btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.welcome-popup button {
  flex: 1;
  min-width: 140px;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s;
}
.welcome-popup .btn-choice1 { background: #017E66; color: #fff; }
.welcome-popup .btn-choice1:hover { background: #016954; }
.welcome-popup .btn-choice2 { background: #FECF02; color: #2d2d2d; }
.welcome-popup .btn-choice2:hover { background: #e0b702; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
</style>

<div class="welcome-popup-overlay" id="welcomePopup" aria-modal="true" role="dialog" aria-labelledby="welcomePopupTitle">
  <div class="welcome-popup">
    <h2 id="welcomePopupTitle">Сделайте свой выбор:</h2>
    <div class="btns">
      <button class="btn-choice1" id="welcomeBtnChoice1">Выбор 1</button>
      <button class="btn-choice2" id="welcomeBtnChoice2">Выбор 2</button>
    </div>
  </div>
</div>

<script>
(function() {
  var KEY = 'welcome_choice';        // choice1 | choice2
  var EXPIRE_DAYS = 1;
  var popup = document.getElementById('welcomePopup');
  var btnChoice1 = document.getElementById('welcomeBtnChoice1');
  var btnChoice2 = document.getElementById('welcomeBtnChoice2');

  function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + d.toUTCString() + ";path=/;SameSite=Lax";
  }
  function getCookie(name) {
    var m = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
    return m ? decodeURIComponent(m[2]) : null;
  }

  function setChoice(val) {
    try {
      localStorage.setItem(KEY, val);
      localStorage.setItem(KEY + '_ts', Date.now().toString());
    } catch(e) {}
    setCookie(KEY, val, EXPIRE_DAYS);
    setCookie(KEY + '_ts', Date.now().toString(), EXPIRE_DAYS);
  }

  function getChoice() {
    var v = null, ts = null;
    try { v = localStorage.getItem(KEY); ts = localStorage.getItem(KEY + '_ts'); } catch(e) {}
    if (!v) { v = getCookie(KEY); ts = getCookie(KEY + '_ts'); }
    if (v && ts) {
      var age = Date.now() - parseInt(ts, 10);
      if (isFinite(age) && age < EXPIRE_DAYS * 24 * 60 * 60 * 1000) return v;
    }
    return null;
  }

  function hidePopup(){ popup.style.display = 'none'; }
  function showPopup(){ popup.style.display = 'flex'; }

  //  Вариант 1: переход по ссылке (текущий рабочий)
  function goChoice1() {
    setChoice('choice1');
    window.location.href = 'https://example.com/choice1';
  }

  // Вариант 2: остаться на текущей странице
  /*
  function goChoice1() {
    setChoice('choice1');
    hidePopup(); // просто скрываем окно, остаёмся на странице
  }
  */

  function goChoice2() {
    setChoice('choice2');
    window.location.href = 'https://example.com/choice2';
  }

  btnChoice1.addEventListener('click', goChoice1);
  btnChoice2.addEventListener('click', goChoice2);

  document.addEventListener('DOMContentLoaded', function() {
    var choice = getChoice();
    if (choice) {
      hidePopup();
    } else {
      showPopup();
    }
  });

  popup.addEventListener('click', function(e) {
    if (e.target === popup) hidePopup();
  });
})();
</script>

Как cделать распределяющий попап при входе на сайт в Tilda

Инструкция