Инструкция: как создать колесо фортуны онлайн и разместить на Вашем сайте

Сначала предлагаем Вам ознакомиться со статьей о регистрации на сайте и добавлении проекта — «С чего начать».

Подробнее о возможностях и преимуществах колеса фортуны Вы можете прочитать в разделе «Колесо фортуны»

Создание колеса

Для создания колеса фортуны, выберите виджет на странице проекта, во вкладке «Добавить виджет».

Откроется страница с пустой областью просмотра.

Страница поделена на 2 части: левый блок – все настройки виджета, область просмотра – отображаются все изменения левого блока.

Кнопки справа:

• «Сохранить» — сохранение изменений.
• «Запустить» — после запуска виджет появится на Вашем сайте, а вместо этой кнопки появится кнопка  «Остановить».
• «Закрыть» — возврат на страницу проекта без сохранения текущих изменений.

В мобильной версии блок слева скрыт, а правая панель с кнопками отображается в виде иконок. Чтобы открыть левый блок нажмите на кнопку «Панель инструментов».

Чтобы закрыть панель инструментов, нажмите на кнопку «Закрыть».

Выбор колеса из готовых решений

Нажмите на кнопку «Библиотека готовых решений» в левой панели настроек. Откроется блок с готовыми виджетами.

Кликните на любой подходящий Вам виджет. Появится окно с подтверждением выбора.

Нажмите на кнопку «Да. Загрузить». После этого колесо со всеми настройками появится в области просмотра. В левой панели подгрузятся элементы со всеми настройками.

Далее Вы можете изменить текст, добавить или удалить элементы и отредактировать виджет под свои цели и дизайн, согласно инструкции ниже.

Общие настройки

1. Показывать виджет на мобильных или на компьютерах. Если вы хотите показывать онлайн-запись только на мобильных, то оставьте только галочку «На мобильных» и наоборот.

2. Тип размещения. На ваш выбор 4 типа размещения:

2.1 Всплывающий без кнопки. Виджет будет появляться на входе для новых посетителей или на выходе с сайта – для всех посетителей один раз.

2.2 Всплывающий + кнопка. Виджет также будет появляться при входе для новых посетителей или при выходе с сайта – для всех посетителей один раз. Но после его закрытия в выбранном Вами месте будет размещаться кнопка, при нажатии на которую виджет опять будет появляться.

2.3 Всплывающий при клике на кнопку. На всех страницах сайта будет размещена кнопка, дизайн и расположение которой вы ниже настроите. А при клике по кнопке будет появляться виджет колеса фортуны.

При выборе типов размещения «Всплывающий + кнопка» и «Всплывающий при клике на кнопку», под пунктом появится поле с галочкой «Своя кнопка». Отметьте, если Вы хотите, чтобы виджет отображался при клике на кнопку, которая уже есть на Вашем сайте. Если проставить галочку, то ниже появятся блок «Укажите id кнопки или адрес ссылки» с 2 полями: «Id кнопки» и «Адрес ссылки».

Если Вы знаете id кнопки – укажите его. Если нет возможности назначить или узнать id, то Вы можете указать ссылку в Вашей кнопки в виде «#open_1212». Адрес ссылки может быть и другим, главное чтобы он был уникальным, начинался на «#» и был указан в этом поле. Обратите внимание, что нужно заполнить только одно поле на выбор.

2.4 Встроить в страницу. Колесо фортуны будет размещено только на тех страницах и  в том месте, где вы разместите код-отметку для виджета.

Код-отметка имеет вид: <div id=»in_1213″>Колесо фортуны</div>, где 1213 – это номер Вашего виджета и нужна только для того, чтобы программа понимала, что вставить нужно именно в это место на этой странице.

Скопируйте код и вставьте на вашу страницу в режиме html-кода.

3. Когда показывать виджет. Если выбран тип размещения «Всплывающий без кнопки» и «Всплывающий + кнопка», то появляется пункт «Когда показывать баннер».

3.1 «При входе на сайт» — виджет будет показан один раз новым посетителям сайта.

3.2 «При выходе с сайта» — виджет будет показываться всем посетителям сайта один раз, когда они захотят уйти (считывается поведение курсора).

4. Количество попыток.  Выберите, сколько раз  один посетитель может запустить колесо.

5. Email для получения заявок. Укажите электронный адрес, на который будут приходить заявки.
Если нужно указать несколько электронных адресов – указывайте их через запятую: email@mail.ru,email2@mail.ru

6. От кого приходит письмо. Заголовок в Вашей почте в поле «От кого».  По умолчанию указывается Digital. Но если для интеграции с CRM и просто для удобства Вы можете указать любой свой.

7.  Эффект появления. Красивый эффект анимации при появлении виджета.  Есть разные способы, попробуйте – в области просмотра сразу отобразится выбранный вариант.

7. Яндекс Цель. Если Вы хотите отслеживать достижения цели в Яндекс-Метрике, то создайте  в ней новую цель, выберите тип «Javascript событие» и введите ее произвольное название латинскими буквами. Потом это название вставьте в указанное поле в панели управления виджетом.

9. Передавать UTM-метки. При отмеченной опции, вместе с заявкой Вам будет приходить информация откуда пришел посетитель, является ли источник рекламным или органическим.

Заголовки и стили

В этом блоке настраиваются общие стили виджета.

1. Закруглить края. Мягкое оформление контура виджета. Можно оставить с острыми краями или сделать более закругленным.

2. Цвет фона виджета. Как и в любом другом поле с палитрой можно выбрать люой цвет из палитры. Для копирования цвета, нажмите на пипетку, подведите к нужному цвету и кликните на него.

3. Текстура фона. Кликните на поле и появятся блоки с различными текстурами. Обратите внимание, что некоторые текстуры лучше отображаются на светлом фоне, а некоторые – на темном. Кликните на любое из них, чтобы выбрать. Оно сразу отобразится на фоне виджета в области просмотра.

Чтобы блоки исчезли, кликните на любое место за пределами списка с текстурами.

4. Цвет фона вне виджета. Если выбран тип виджета «Всплывающий при клике на кнопку», «Всплывающий + кнопка» или «Всплывающий без кнопки», то можно выбрать цвет затемнения или осветления фона за пределами виджета.

5. Прозрачность фона за пределами виджета.  От абсолютно прозрачного до полностью непрозрачного.

6. Матовость. Интересный эффект матового стекла фона за пределами виджета. Чем прозрачнее фон, тем лучше виден этот эффект.

7. Выберите шрифт. Шрифт назначается для всех текстовых элементов сайта. Выбирайте наиболее подходящий под стили Вашего сайта.

Далее идет блок кнопок, отвечающих за отображение заголовка виджета.

8. Текст заголовка. Здесь нужно написать текст, который будет в оглавлении формы обратной связи. Если оставить поле пустым, то заголовок не будет выводится.

9-10. Размер и цвет заголовка.

11. Выделить шрифт – сделать шрифт заголовка жирным.

12. Наклонный шрифт – выделить заголовок курсивом.

Далее идут настройки кнопки, которая размещена под колесом и запускает колесо фортуны.

13. Текст на кнопке. Здесь можно написать текст на кнопке.

14-15. Цвет шрифта и фона кнопки.

16. Размер шрифта на кнопке.

17. Выделить шрифт. Делает текст на кнопке жирным.

Последние 2 пункта в блоке стилей – настройки стандартных полей формы.

18-19. Размер и цвет текста в полях формы.

Параметры кнопки

Кнопка отображается в при выборе типа размещения «Всплывающий при клике на кнопку» и «Всплывающий + кнопка», если не отмечен галочкой пункт «Своя кнопка» в общих настройках. И показывается на всех страницах Вашего сайта. При клике на нее, на сайте поверх страницы всплывает виджет колеса фортуны.

1. Здесь Вы можете настроить ширину и высоту кнопки. Задать цвет ее фона, выбрать иконку и цвет иконки.

2. Для Вас большой выбор иконок, среди которых Вы можете выбрать подходящую под стили Вашего сайта. Цвет самой иконки также можно менять.
Например, сделать ее белой на зеленом фоне или красной на белом – выбирайте любые сочетания цветов фона и самой иконки.

3. Также Вы можете сделать ее круглой или квадратной, увеличивая цифру в пункте «Закругление краев».

4. Тип кнопки. На Ваш выбор 3 типа кнопки:

«Стандартная» — обычная кнопка без дополнительных эффектов.

«С переливом» —  спокойный эффект перелива кнопки.

«Пульсирующая» — мягкий эффект пульсирования, который будет привлекать внимание посетителей к кнопке.

5. Чтобы определить подходящее место, выберите из значения в пункте «Размещение на странице».

После выбора появится пункт «Отодвинуть от края». Зависит от выбора положения кнопки. Например, если Вы хотите разместить справа по центру, то отодвинуть можно от правого края, на любое значение.

Попробуйте – все изменения тут же отображаются в области просмотра справа.

Последний пункт: «Яндекс Цель для кнопки». Если вы хотите отслеживать не только отправленные заявки, но и сколько раз кликнули по кнопке, чтобы запустить виджет, создайте цель в Яндекс Метрике с типом «Javascript событие», укажите ее название и вставьте название в это поле.

Сектор скидок

Вы можете добавить сколько угодно секторов, но лучше всего будут смотреться от 5 до 8. Если вариантов скидок 2 или 3, то рекомендуем некоторые скидки добавить несколько раз. Хорошо будут смотреться 3 скидки, если их продублировать.

Чтобы добавить первый сектор, нажмите на кнопку «Добавить элемент». В появившемся списке выберите пункт «Сектор скидок».

Появится сообщение-подтверждение. Если вы уже сделали изменения на странице и еще их не сохраняли, выберите «Да. Сохранить и добавить элемент».

Появится блок с сектором слева и в области просмотра.  Т.к. автоматически считается количество секторов и делится круг на это количество, то первый сектор займет весь круг.

Нажмите на знак «+» рядом с названием блока «Сектор скидок 1».

Название можно изменить для удобства. Для этого кликните по нему и текст перейдет в режим редактирования.

1. В первом поле блока сектора напишите текст скидок. Т.к. сектора имеют ограниченное пространство, скидки лучше писать короткими. Вы сможете их откорректировать их, когда добавите все сектора.
2. Далее идут настройки цвета и размера текста.

3.  Следующий пункт — цвет сектора данной скидки. С помощью него Вы можете настроить каждому сектору свой цвет.

Добавляйте сектора по шагам, описанным выше.

Теперь Вы можете прямо в панели управления запустить колесо!
Если посетитель использует все разрешенные попытки, то на кнопке появится надпись «Попытки закончились».

Приз отобразится в левой части колеса.

Нужно отметить, что обе половины колеса видны только в панели управления.
На Вашем сайте сначала появится только правая половина с колесом, а когда колесо остановится – откроется левая с названием скидки и полями формы, которые Вы заполните дальше.
в мобильной версии колесо также адаптировано: оно займет ширину экрана смартфона, а левая половина появится поверх колеса с кнопкой «Закрыть».
Алгоритм выбора скидки абсолютно случайный.

Поле формы

Нажмите на кнопку «Добавить элемент» и в списке выберите пункт «Поле формы».

В сообщении-подтверждении нажмите на кнопку «Да. Сохранить и добавить элемент».

Страница перезагрузится и под блоками с секторами скидок появится блок «Поле формы». Также оно отобразится в области просмотра в левой части виджета.

По умолчанию тип поля «Текст (Имя/Фамилия)», название «Имя». 1. Название поля – введите заголовок и он появится в области просмотра.

Также Вы можете отредактировать название прямо в области просмотра. Для этого наведите курсор на текст в области просмотра – появится карандаш. Кликните по нему и название перейдет в режим редактирования. Любой клик за пределами названия – выход из режима редактирования.

2. Тип поля.

2.1. Текст(Имя/Фамилия – стандартное поле ввода короткой информации.  Отображается по умолчанию при добавлении блока «Поле формы».

2.2 Телефон – поле для ввода телефона.

2.3 Число – числовое поле. подходит для ввода целых чисел со стрелками вверх/вниз.

2.4 Email – для ввода электронного адреса

2.5 Дата – при выборе отображается поле с календарем справа для выбора даты.

2.6. Многострочный текст, подходит если Вы хотите дать возможность клиенту указать дополнительные пожелания или оставить комментарий/примечание к заявке.
2.7. Галочка (чекбокс) – подходит, если Вы хотите дать пользователю возможность выбрать несколько значений.  При выборе этого типа ниже появится поле «Список значений», в котором нужно ввести значения – каждое с новой строки.

2.8-2.9. Радиокнопки и список значений отображаются по разному, но имеют одинаковый принцип: когда клиент может выбрать только один вариант из предлагаемых Вами.
Список вариантов также указываются в поле слева «Список значений». Каждый вариант указывается с новой строки.

Все изменения тут же отображаются в области просмотра.

3 Отметьте галочкой пункт «Обязательное» — если данное поле должно быть обязательно заполнено или выбрано.

Вы можете добавить любое количество полей формы.

Обратите внимание: при наведении на любой блок в области просмотра – появляется четырехсторонняя стрелочка над ним. Если ее зажать, то можно переместить блок ниже или выше, чтобы изменить порядок отображения.

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

Текст

Вы можете добавить примечания, акции и разместить их в нужном месте.

Для этого в списке «Добавить элемент» выберите элемент «Текст».

 В сообщении-подтверждении выберите «Да. Сохранить и добавить элемент».
Появится блок с текстом.

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

Для переноса текста на новую строку, в нужном месте нажмите «Enter».

Чтобы вставить ссылку в тексте, выделите курсором текст, который будет ссылкой и нажмите кнопку «Вставить/Удалить ссылку».

В появившемся окне укажите ссылку и нажмите кнопку «Вставить».

Чтобы удалить ссылку, поставьте курсор внутри текста с ссылкой и нажмите опять на кнопку «Вставить/Удалить ссылку».

Появится окно с ссылкой и кнопкой «Удалить» посередине. Нажмите на нее и ссылка исчезнет.

Выберите цвет и размер текста. Можно сделать текст жирным или курсивом. Выровнять текст по центру, слева или справа.

Также Вы можете задать фон этому блоку. По умолчанию он прозрачный. Сначала снимите галочку в пункте «Прозрачный фон», потом выберите подходящий цвет в палитре.

Расстояние от текста до края блока. Укажите значение, если хотите увеличить расстояние внутри текстового блока.

Согласие на обработку данных

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

Нажмите на «Добавить элемент», в выпадающем списке выберите значение «Согласие на обработку данных» и подтвердите добавление во всплывающем окне.

После добавления элемента, страница перезагрузится и согласие появится слева и в области просмотра.

В левом блоке 2 раза кликните по тексту согласия, чтобы изменить его.

Также Вы можете отредактировать текст в области просмотра. Для этого наведите курсор на него – справа появится зеленый карандаш. Нажмите на него и перейдете в режим редактирования текста.

Чтобы вставить ссылку, перейдите в режим редактирования и выделите мышкой текст, который будет ссылкой.

После того, как Вы отпустите мышку, ниже появится окошко, в которое нужно вставить ссылку.

Укажите ссылку и нажмите кнопку «Вставить». Выделенный текст сразу изменится по цвету – ссылка вставилась.

Чтобы отредактировать или удалить ссылку, поставьте курсор внутрь текста с ссылкой и кликните. Появится окно с ссылкой и кнопкой «Удалить». Для редактирования – измените адрес ссылки и нажмите «Вставить», чтобы удалить – нажмите «Удалить».

Далее в блоке Вы можете изменить размер и цвет шрифта текста согласия и цвет ссылок.

Кнопка заказа

Чтобы добавить кнопку заказа, нажмите на «Добавить элемент» над добавленными Вами блоками. В списке выберите пункт «Кнопка заказа». В сообщении-подтверждении нажмите на кнопку «Да. Сохранить и добавить элемент».

После перезагрузки слева последним в списке появится блок «Кнопка заказа», а в области просмотра появится кнопка по умолчанию.

Вы можете изменить надпись, настроить цвет фона и текста.

Если отметите пункт «Показать кнопку отмены», то в области просмотра появится кнопка «Очистить».

А слева появятся настройки для нее, в которых в также можете изменить надпись, цвет фона и текста для кнопки отмены.

Сохраните виджет и нажмите кнопку «Запустить».

Поздравляем! Вы создали свое первое колесо фортуны!

Демо виджета колеса фортуны