Настройка виджета «Колесо фортуны — Рулетка»

1. Выберите шаблон#

В разделе «Виджеты» нажмите «Создать виджет» и выберите в галерее шаблон «Колесо фортуны - Рулетка».

2. Настройте внешний вид#

• В разделе «Параметры» задайте цвета виджета, подложки, текста и секторов. Изображение рулетки можно заменить своим.
• Укажите размеры: ширину, высоту и диаметр рулетки.
• При необходимости настройте шрифты и другие элементы оформления.

Диаметр рулетки должен быть не больше ширины виджета, иначе колесо выйдет за края поп-апа. Например, при ширине виджета 400 px подойдёт диаметр 320 px.

3. Добавьте сектора и призы#

Сектора настраиваются в панели кода. Чтобы открыть её, нажмите Alt+X и перейдите на вкладку JavaScript. Призы перечислены в массиве options.

Для каждого сектора задайте:

• label — текст на секторе;
• value — значение, которое получит посетитель;
• probability — вероятность выпадения. Сектор с probability: 0 никогда не выпадает.

Количество секторов может быть любым, например 6, 8 или 12. Пример:

export const options = [
  { label: "Скидка 300 ₽ на сумки", value: "Скидка 300 ₽ на сумки", probability: 0 },
  { label: "Секретный приз", value: "Секретный приз", probability: 0 },
  { label: "−50% на всё", value: "−50% на всё", probability: 0 },
  { label: "−10% на всё", value: "−10% на всё", probability: 50 },
  { label: "1000 бонусных рублей", value: "1000 бонусных рублей", probability: 0 },
  { label: "Подарочный сертификат", value: "Подарочный сертификат", probability: 5 },
  { label: "−10% на новую коллекцию", value: "−10% на новую коллекцию", probability: 0 },
  { label: "Подарок 500 бонусов", value: "Подарок 500 бонусов", probability: 45 },
];

Цвет и толщина границы рулетки задаются в панели кода, в разделе CSS / Less:

.roulette_rotator {
  background: url(@roulette_bg_image) center;
  background-size: cover;
  border-radius: 100%;
  border: 5px solid rgb(116, 24, 236);
}

4. Настройте вращение#

В панели кода, в разделе JavaScript, задайте:

• DEFAULT_SPEED — скорость анимации вращения;
• DEFAULT_IDDLE — время простоя, задержка перед действием. Имя константы в коде пишется именно так.

import { Component, Locator, createContext, withContext } from "dom-utils";
const DEFAULT_SPEED = 3;
const DEFAULT_IDDLE = 2;

5. Настройте действия#

У виджета две страницы: Страница игры — колесо и форма, Страница после игры — сообщение с выигрышем.

• В разделе «Страница игры» задайте заголовок, описание и элементы формы. По умолчанию в форме есть поле email и кнопка «Крутить колесо».
• В разделе «Страница после игры» задайте заголовок и описание сообщения с выигрышем, например «Поздравляем!» и «Ваш приз:».

6. Сохраните и включите виджет#

Сохраните изменения и включите виджет. Код рулетки можно менять и дальше, чтобы сделать свой дизайн.

Если что-то не получилось, напишите в поддержку: contact@leadplan.ru.