Чтобы добавить квиз на страницы сайта, нажмите «Apps» и выберите «Quizzes»:
Далее нажмите кнопку «+Create New»:
Также вы можете нажать на "Temlates", чтобы сразу создать квиз из готового шаблона:
В открывшемся окне вы можете выбрать готовый шаблон квиза (2) из нужной вам категории (1) или использовать пустой шаблон (3). Давайте создадим новый квиз, нажав на "Use Empty Template" (3):
Чтобы редактировать квиз, нажмите на кнопку "Edit" или на сам виджет.
После этого откроется меню настройки квиза.
Во вкладке "Design" (1) можно изменить цвет фона и акцентов/кнопок (2):
Вы можете выбрать нужные цвета или задать необходимые значения:
Во вкладке "Trigger" вы можете настроить такие параметры триггера: тип, позицию, цвет фона, значок, анимацию и текст. Просто заполните соответствующие поля, выберите подходящую иконку или загрузите значок, задайте позицию и цвет фона триггера:
Есть 3 типа триггеров (1) для квиза: круглые, стикеры и выезжающие. Выберите нужный тип триггера и задайте его положение на странице (2). Ниже выбора позиции триггера есть 2 чек-бокса: можно задать рандомное положение на странице, а также необходимые свойства поведения триггера при скролле страницы. На скрине ниже выбран тип триггера "Стикер", для которого задана верхняя левая позиция (4):
Для выбора выезжающего триггера (3), достаточно нажать кнопку с его типом (1) и задать нужную позицию (2):
При наведении курсора на этот триггер он выезжает, показывая текст. Движение в данном случае происходит в левую сторону:
Для круглых триггеров (1) можно выбрать размер: средний (2) или большой:
Так выглядит большой размер круглого триггера (3):
Загрузите собственный значок триггера (1) или же выберите из готовых иконок (2):
Например, выберем вот такую иконку - "Портфель":
И заменим цвет фона триггера на более светлый:
Можно задать анимацию для триггера. Это позволит значку вращаться ("Roll") (2) или покачиваться ("Swing") (1) при наведении на триггер курсора мыши:
Напишите текст для вашего триггера:
Во вкладке "Content" вы можете создать нужное количество страниц/шагов квиза.
На первой странице "Welcome Page" выберите расположение квиза: горизонтальное (1) или вертикальное (2). После чего напишите ваш текст в соответствующих полях.
При изменении текста любого элемента он сразу же отображается на превью квиза. Если вам нужно сделать текст жирным (например, цифру "6"), просто выделите нужный фрагмент (1) и нажмите "Highlight text" (2):
Добавьте изображение:
Если у вас есть бонус/подарок для ваших посетителей, то добавьте его с помощью секции "Bonus message":
Далее заполните текстовые поля и добавьте картинку бонуса:
Вы можете в любой момент изменить шаблон квиза с горизонтального на вертикальный:
Вот так будет выглядеть вертикальный шаблон с подарком:
Если у вас нет подарка и вам больше нравится горизонтальный шаблон - вы можете отключить "бонус" и выбрать горизонтальное расположение шаблона виджета:
Чтобы начать создавать шаги квиза, перейдите на первую страницу во вкладке "Content" (1). Вы можете добавлять нужное количество страниц/шагов квиза или удалять (2) их.
Содержимое каждого шага зависит от выбранного типа страницы "Type" (3) . Это может быть ввод текстовых полей, выбор из множества ответов или картинок, ползунок или рейтинг для оценки, выбор даты.
Выберем 1 тип - это обычный ввод текста. Заполните соответствующие поля и первый шаг квиза готов. Вы можете добавлять нужное вам количество полей для ввода.
Если вам нужен другой тип шаблона для этого шага квиза - вы можете сменить его в любой момент. Например, вы хотите добавить выбор ответов из картинок. Просто выберите нужную иконку (1) этого типа и нажмите на "+Add an answer". Обратите внимание, что если включить чек-бокс (2) - посетители смогут выбирать не один, а несколько вариантов ответов:
Добавляйте картинки и подписи для ответов. Если вы хотите сделать калькулятор или тест, то для каждого ответа можно задать оценку - "Score" (1). И в конце этого квиза выдавать посетителю общий результат для его ответов (2):
Вот что должно получиться для 4 вопросов:
Если вы включили ползунок "Allow multiple answres", то посетитель может выбрать хоть все 4 ответа.
То же самое, но без картинок, можно реализовать, если выбрать тип "Text choice":
Добавьте нужные ответы и при необходимости включите ползунок "Allow multiple answres":
Если вы хотите предложить посетителю выбрать какую-то величину, то используйте "Slider":
заполните текстовые поля и укажите min/max значения для слайдера:
Для оценки интернет-магазинов используйте "Рейтинг":
"Date" - один из наиболее удобных для посетителя вариантов выбрать нужную дату для консультации/визита/доставки:
После создания всех шагов квиза откройте "Contact Page":
Заполните текстовые поля:
При необходимости добавьте общий результат всех ответов, значения для которых вы задавали в полях "Score":
Также вы можете добавить "User agreement" и бонусное сообщение:
Осталось только отредактировать "Thank You Page":
Сделайте это!
Во вкладке "Location" вы можете настроить выбор устройств (1) и правила показа триггера квиза: выбирать показ для уникальных посетителей (2), задавать настройки триггера (3-5) и правила показа на страницах сайта (6):
Квиз будет запускаться автоматически, если установить галочку на "On exit intent" - при намерении посетителя уйти со страницы вашего сайта. Или же можно задать точное время, когда квиз автоматически запустится на странице (2). Также вы можете встроить квиз в тело страницы, используя html-код (3). А для запуска квиза по ссылке (4) вы можете задавать любое название этой ссылки - например, #quiz, как в нашем случае:
Во вкладке "Integrations" вы можете легко интегрировать виджет квиза с нужными вам приложениями:
После завершения всех настроек нажмите «Save & Exit» и наслаждайтесь работой квиза на вашем сайте.