Колесо фортуны — это отличный способ увеличить вовлечённость посетителей сайта. В этом руководстве мы покажем, как настроить виджет с несколькими вариантами призов. Основа — стандартный шаблон колеса, который мы доработаем с помощью 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 под свою механику.