Как сделать колесо фортуны с несколькими вариантами призов?

2025-07-24 13:53 Виджеты и персонализация

Колесо фортуны — это отличный способ увеличить вовлечённость посетителей сайта. В этом руководстве мы покажем, как настроить виджет с несколькими вариантами призов. Основа — стандартный шаблон колеса, который мы доработаем с помощью JavaScript.

Шаг 1. Используйте базовую HTML-разметку и стили

Возьмите за основу HTML и CSS из стандартного шаблона колеса фортуны. Вы можете скопировать структуру из шаблона, как в примерах выше (разметка и стили практически идентичны). Все элементы колеса уже встроены в Convead: картинки, кнопки, поля ввода и т.д.

Убедитесь, что у вас есть такие ID у элементов:

cnv-f-wheel — само колесо
cnv-f-wheel-wrap — обёртка колеса
cnv-f-btn-run — кнопка запуска
cnv-f-input — поле для email
cnv-f-btn-submit — скрытая кнопка отправки формы

Шаг 2. Добавьте JavaScript для нескольких призов

Вместо бинарной логики «победил/проиграл» используйте массив с секторами и весами. Пример:

const weights = [
  { number: 1, probability: 0.015, label: '7%', value: 3 },
  { number: 2, probability: 0.16,  label: '5%', value: 2 },
  { number: 3, probability: 0.05,  label: '10%', value: 1 },
  ... // добавьте нужное количество секторов
];

function getRandomWeightedNumber() {
  let cumulative = 0;
  const distribution = weights.map(item => {
    cumulative += item.probability;
    return { number: item.number, cumulative: cumulative };
  });

  const random = Math.random();
  for (const item of distribution) {
    if (random <= item.cumulative) return item.number;
  }
}

Шаг 3. Настройте вращение колеса

const currentPoint = getRandomWeightedNumber();
const deg = (currentPoint * (360 / points)) + (360 * numSwing) + degShift;

Добавьте код анимации, как в стандартном шаблоне:

ConveadClient.Helpers.animate_prop({
  el: elW,
  prop: 'transform',
  cssFunction: 'rotate',
  dimension: 'deg',
  start: 0,
  end: deg,
  duration: time,
  delta: 'easeOutQuart',
  complete: function() {
    let result = weights.find(item => item.number === currentPoint);
    const emailVariant = 'roulette_win_' + result.value;
    ConveadClient.WidgetTracker.submit_value = emailVariant;
    elBtnSubmit.click();
  }
});

Шаг 4. Настройте отправку значения в Convead

Вы можете отследить, какой именно приз выпал, с помощью WidgetTracker.submit_value . Значение roulette_win_Х , где Х — это value из weights , будет сохранено в визите и может использоваться в триггерах или сегментах.

Примеры значений:

roulette_win_1 — выпала скидка 10%
roulette_win_2 — выпала скидка 5%
roulette_win_5 — джекпот

Шаг 5. Визуальные элементы

Для каждого сектора создайте соответствующую картинку колеса. Убедитесь, что изображение совпадает по секторам с массивом weights .

Итого

Для настройки колеса с несколькими вариантами призов:

Используйте стандартную разметку и стили виджета
Подключите расширенный JS с массивом weights
Управляйте анимацией и результатами через WidgetTracker.submit_value

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

Если нужно готовое решение — скопируйте код второго примера целиком и адаптируйте массив weights под свою механику.