Как создать квиз и разместить его на Вашем сайте

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

О преимуществах и возможностях квиза в нашем сервисе Вы можете узнать в разделе «Квиз для сайта».

Создание квиза

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Первые 3 пункта – настройка полосы прогресса.

1. Отображать прогресс? Выберите из 3-х вариантов:

1.1 «Не отображать». Полоса прогресса не отображается.

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

Тогда в заголовке шага можно написать на каком шаге сейчас находится посетитель.

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

Названия в полосе дублируются из заголовков шагов.

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

5. Высота. Аналогично ширине.
6. Закруглить края виджета. Мягкое оформление контура виджета. Можно оставить с острыми краями или сделать более закругленным.

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

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

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

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

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

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

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

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

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

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

17. Наклонный шрифт – выделить заголовок курсивом.
18. Выровнять заголовок по левому краю, по центру или по правому краю.

Следующий блок  — настройка кнопок «Назад», «Далее» и «Заказать».

19. Текст на кнопке «Назад». Если нужно изменить стандартное название на кнопке.

20-21. Цвет шрифта и фона на кнопке «Назад».
22. Текст на кнопке «Далее». Если нужно изменить стандартное название.

23. Текст на кнопке «Заказать». Например, «Оставить заявку».

24. Цвет шрифта и фона в кнопках «Далее» и «Заказать».

Остальные опции настраивают отображение во всех остальных текстовых элементах.

25-26. Размер и цвет текста в стандартных пунктах квиза.

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

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

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

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

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

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

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

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

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

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

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

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

Добавление шага

Для начала нужно создать шаг. Для этого нажмите на кнопку «Добавить шаг».

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

После этого страница перезагрузится и появится блок шага в левой части панели.

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

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

После этого можно переходить к добавлению блоков внутри шага.
Самый нижний пункт «Добавить блок» — выберите нужный блок. После подтверждения он появится внутри шага.

Вы можете добавить блоки «Поле формы», «Выбор с картинками», «Изображение», «Оценки», «Текст» и «Согласие на обработку данных».

Блок «Поле формы»

Внутри шага, в поле «Добавить блок», выберите пункт «Поле формы».

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

После сообщения об успешном добавлении, страница перезагрузится и слева внутри шага появятся настройки пункта, а в области просмотра отобразится само поле с параметрами по умолчанию.

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

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

2. Тип поля.

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

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

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

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

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

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

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

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

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

Блок «Выбор с картинками»

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

Блок появится внутри шага, а в области просмотра, в выбранном шаге появится заголовок по умолчанию «Выберите вариант».

Введите название заголовка, которое будет над вариантами и настройте его цвет.

Далее выберите сколько вариантов может отметить посетитель: один или несколько.

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

И в самом низу кнопка «Добавить вариант». Нажмите для добавления варианта.

Введите название в текстовое поле. По нажатию на кнопку «Загрузить изображение» — можно выбрать на компьютере и вставить изображение. Кнопка «Удалить» — для удаления варианта.
Чтобы заменить изображение – загрузите новое по кнопку «Загрузить изображение».

Аналогичным образом добавляйте новые варианты.

Блок «Изображение»

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

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

Определите его размещение на странице:

Слева – будет находиться слева от других блоков в шаге.

Справа – справа от других блоков.

В потоке – изображение будет находится среди блоков. Здесь его можно будет перемещать – выше или ниже блоков.
На фоне – изображение станет фоновым для текущего шага.

В зависимости от расположения можно отрегулировать другие настройки блока:

1. Для позиции «Слева» или «Справа» — можно настроить:

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

2. Для размещения «В потоке»:

• Ширину
• Закругление краев блока
• Горизонтальное расположение «Слева», «По центру», «Справа».
• Анимацию при появлении и при наведении.

3. Для размещения на фоне.

Разместить фон:

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

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

Блок «Текст»

Вы можете добавить примечания и разместить их в нужном месте на любом шаге.

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

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

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

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

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

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

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

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

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

Блок «Оценки»

Внутри шага в пункте «Добавить блок» выберите «Оценки».

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

1. Тип оценок. На Ваш выбор:

Цифры

Смайлики

Звезды

Далее идут настройки заголовка.

2. Заголовок поля. Напишите Ваш вопрос к посетителям.

3. Цвет заголовка. Выберите цвет текста для вопроса.

 4. Размер заголовка. Укажите размер

За ними – настройки самих оценок.

5. Цвет оценок. Звездам и цифрам можно задать любой цвет по Вашему выбору.

6. Размер оценок. Отрегулируйте размер оценок.

В конце – общие настройки блока оценок.

7. Фон блока. Если нужно задать фоновый цвет – снимите галочку с пункта «Прозрачный фон», нажмите на цветовой круг и выберите подходящий цвет.

8. Расстояние от текста до края блока. Увеличивайте размер от элементов внутри блока до краев. Проверить работу блока Вы можете прямо в области просмотра панели управления.

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

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

На последнем шаге в списке поля «Добавить блок» выберите пункт «Согласие на обработку данных».

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

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

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

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

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

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

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

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

Сохраните все настройки и нажмите кнопку «Запустить».
Поздравляем! Вы создали свою первый квиз!

Демо виджета квиза