Как сделать колесо фортуны с несколькими вариантами призов?
Колесо фортуны — это отличный способ увеличить вовлечённость посетителей сайта. В этом руководстве мы покажем, как настроить виджет с несколькими вариантами призов. Основа — стандартный шаблон колеса, который мы доработаем с помощью JavaScript.
Шаг 1. Используйте базовую HTML-разметку и стили
Возьмите за основу HTML и CSS из стандартного шаблона колеса фортуны. Вы можете скопировать структуру из шаблона, как в примерах выше (разметка и стили практически идентичны). Все элементы колеса уже встроены в Convead: картинки, кнопки, поля ввода и т.д.
Убедитесь, что у вас есть такие ID у элементов:
cnv-f-wheel
— само колесоcnv-f-wheel-wrap
— обёртка колесаcnv-f-btn-run
— кнопка запускаcnv-f-input
— поле для emailcnv-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
под свою механику.