Скрипт таймера с персональной скидкой для Tilda

📌 Аннотация

⚙️ Как вставить на сайт Tilda

Способ 1 (рекомендуемый)

Способ 2 (глобально на все страницы)

🌍 Использование на других сайтах

Как подключить:

</body>

🔧 Основные переменные (настройка)

🎯 Базовые параметры

var promoId = "sweetgift_pf_timer_04";

var countdownSeconds = 180;

var promoCode = "SALE10";

🧠 Умное распределение времени

var fastUsersPercent = 70;

var fastRangeMinus = 30;

var fastRangePlus = 5;

180 → 150–185 секунд

var slowRangeMinus = 0;

var slowRangePlus = 30;

180 → 180–210 секунд

📊 Как это работает

fastUsersPercent = 70;

• 70% пользователей → быстрый таймер
• 30% пользователей → длинный таймер

📝 Тексты (можно менять)

var titleBefore = "Подождите немного — для вас откроется персональная скидка";

var subtitleBefore = "⏱ Таймер идет только при активной вкладке 👀 Можно листать страницу 📱";

var titleAfter = "Готово! Ваш промокод:";

var subtitleAfter = "Скопируйте и используйте при оформлении заказа.";

var pausedText = "⏸ Таймер на паузе";

⚙️ Поведение

var keepPromoShown = true;

📱 Как работает логика

🎯 Что можно менять под задачи

Быстрее выдавать скидку:

countdownSeconds = 120;

Жёстче удержание:

countdownSeconds = 240;

Почти всем быстро:

fastUsersPercent = 85;

Более агрессивный маркетинг:

var titleBefore = "Для вас зафиксирована персональная скидка";

❗ Важные моменты

🚀 Рекомендации по использованию

🔥 Как усилить эффект

📈 Итог

Код js-скрипта

<div id="sg-promo-bar" style="display:none;">
  <div class="sg-promo-inner">
    <div class="sg-promo-top">
      <div class="sg-promo-text-wrap">
        <div class="sg-promo-title" id="sgPromoTitle"></div>
        <div class="sg-promo-subtitle" id="sgPromoSubtitle"></div>
      </div>

      <div class="sg-promo-right" id="sgPromoRight"></div>
    </div>

    <div class="sg-promo-progress" id="sgPromoProgressWrap">
      <div class="sg-promo-progress-line" id="sgPromoProgressLine"></div>
    </div>
  </div>
</div>

<style>
  #sg-promo-bar {
    position: sticky;
    top: 0;
    z-index: 99999;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-family: Arial, sans-serif;
  }

  .sg-promo-inner {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 14px;
    padding: 14px 16px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }

  .sg-promo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .sg-promo-text-wrap { flex: 1; }

  .sg-promo-title { font-size: 16px; font-weight: 700; }
  .sg-promo-subtitle { font-size: 13px; margin-top: 4px; }

  .sg-promo-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .sg-promo-timer,
  .sg-promo-code {
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
  }

  .sg-promo-copy-btn {
    border: 0;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
  }

  .sg-promo-progress {
    height: 6px;
    margin-top: 12px;
    border-radius: 999px;
    overflow: hidden;
  }

  .sg-promo-progress-line {
    height: 100%;
    width: 0%;
    transition: width 1s linear;
  }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {

  /* ================= НАСТРОЙКИ ================= */

  var promoId = "sweetgift_pf_timer_03"; // ID акции (меняешь → у всех новый таймер)

  var countdownSeconds = 180; // базовое время таймера (в секундах)

  // ===== УМНОЕ РАСПРЕДЕЛЕНИЕ =====
  var fastUsersPercent = 70;   // % пользователей с коротким таймером

  var fastRangeMinus = 30;     // быстрая группа: минус от базового (180 - 30 = 150)
  var fastRangePlus = 5;       // быстрая группа: плюс к базовому (180 + 5 = 185)

  var slowRangeMinus = 0;      // медленная группа: минус (обычно 0)
  var slowRangePlus = 30;      // медленная группа: плюс (180 + 30 = 210)

  // ИТОГ:
  // fast → 150–185 сек
  // slow → 180–210 сек

  var promoCode = "SALE10"; // промокод

  var titleBefore = "Подождите немного — для вас откроется персональная скидка";
  var subtitleBefore = "⏱ Таймер идет только при активной вкладке 👀 Можно листать страницу 📱";

  var titleAfter = "Готово! Ваш промокод:";
  var subtitleAfter = "Скопируйте и используйте при оформлении заказа.";

  var pausedText = "⏸ Таймер на паузе";

  var keepPromoShown = true; // после завершения показывать промокод всегда

  /* ============================================= */

  var bar = document.getElementById("sg-promo-bar");
  var titleEl = document.getElementById("sgPromoTitle");
  var subtitleEl = document.getElementById("sgPromoSubtitle");
  var rightEl = document.getElementById("sgPromoRight");
  var progressLine = document.getElementById("sgPromoProgressLine");

  if (!bar) return;

  var elapsedKey = "elapsed_" + promoId;     // сколько уже прошло
  var durationKey = "duration_" + promoId;   // сколько всего нужно ждать
  var doneKey = "done_" + promoId;           // завершен ли таймер
  var copiedKey = "copied_" + promoId;       // нажимал ли копировать

  var elapsed = parseInt(localStorage.getItem(elapsedKey), 10) || 0;
  var duration = parseInt(localStorage.getItem(durationKey), 10);

  // ===== если длительность еще не задана → рассчитываем =====
  if (!duration) {
    var isFast = Math.random() * 100 < fastUsersPercent;

    var min = isFast
      ? countdownSeconds - fastRangeMinus
      : countdownSeconds - slowRangeMinus;

    var max = isFast
      ? countdownSeconds + fastRangePlus
      : countdownSeconds + slowRangePlus;

    duration = Math.floor(Math.random() * (max - min + 1)) + min;

    localStorage.setItem(durationKey, duration);
  }

  function formatTime(sec) {
    var m = Math.floor(sec / 60);
    var s = sec % 60;
    return (m < 10 ? "0"+m : m) + ":" + (s < 10 ? "0"+s : s);
  }

  function render() {
    if (localStorage.getItem(doneKey)) {
      titleEl.innerText = titleAfter;
      subtitleEl.innerText = subtitleAfter;

      rightEl.innerHTML =
        '<span class="sg-promo-code">'+promoCode+'</span>' +
        '<button class="sg-promo-copy-btn" id="copyBtn">Скопировать</button>';

      document.getElementById("copyBtn").onclick = function () {
        navigator.clipboard.writeText(promoCode);
        this.innerText = "Скопировано";
        localStorage.setItem(copiedKey, "1");
      };

      progressLine.style.width = "100%";
      return;
    }

    var left = duration - elapsed;

    titleEl.innerText = titleBefore;
    subtitleEl.innerText = document.hidden ? pausedText : subtitleBefore;

    rightEl.innerHTML =
      '<span class="sg-promo-timer">'+formatTime(left)+'</span>';

    progressLine.style.width = (elapsed / duration * 100) + "%";
  }

  function tick() {
    if (!document.hidden) {
      elapsed++;
      localStorage.setItem(elapsedKey, elapsed);
    }

    if (elapsed >= duration) {
      localStorage.setItem(doneKey, "1");
    }

    render();
  }

  setInterval(tick, 1000);
  render();

});
/script

Удобного и полезного использования.