Как создать и настроить квиз

Квиз — это тест/викторина/опросник на сайте, который в игровой форме собирает информацию о потребностях пользователя. Ответы на квиз попадают в отдел продаж — менеджер получает подробную информацию о потенциальном клиенте и может сделать ему персональное предложение.

При правильном использовании квизы значительно поднимают конверсию сайта в заявку и упрощают продажу — опрашивать клиента в чате или по телефону уже не нужно. О том, как правильно использовать квиз, читайте в статье.

Здесь мы разберем, как настроить квиз на сайте с помощью МультиЧата Callibri. 

Перейдите в раздел Настройки МультиЧата — Квизы. Нажмите кнопку «Добавить квиз»: 
quiz.png
quiz.png 107.8 KB

Настраиваем приветственный слайд

2020-04-16_10-47-32.png
2020-04-16_10-47-32.png 58.5 KB

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

Можете добавить картинку — так первый слайд станет привлекательнее. Минимальный размер изображений в квизе — 290px на 120px.

Также на каждом слайде можно изменить текст на кнопке:
Дизайн без названия (112).png
Дизайн без названия (112).png 93.82 KB
Вот как это может выглядеть: 
2020-04-16_11-16-36.png
2020-04-16_11-16-36.png 828.4 KB

Настраиваем вопросы

Нажмите плюсик в меню слева — появится слайд с первым вопросом.
Дизайн без названия (104).png
Дизайн без названия (104).png 201.65 KB

Вопросы бывают четырех видов: 
  • Один вариант — пользователь сможет выбрать только один вариант ответа из предложенных. 
  • Мультивыбор — пользователь сможет выбрать несколько вариантов ответа.
    2020-04-16_11-29-47.png
    2020-04-16_11-29-47.png 156.47 KB
  • Шкала — пользователь сможет указать на шкале цифр нужное значение с помощью бегунка.
    2020-04-16_11-09-18.png
    2020-04-16_11-09-18.png 28.95 KB
  • Файл —  в качестве варианта ответа на вопрос или в конце квиза вы можете попросить пользователя прикрепить файл размером до 5 Мб. Ссылка на файл появится в отчете ЕЖЛ вместе с заявкой из квиза. 
    dsaddaeqweqe.png
    dsaddaeqweqe.png 742.94 KB
  • Анкета — в процессе квиза у пользователя можно запросить имя, email, номер телефона, согласие на что-либо (чек-бокс с текстом или радио-баттон) а также оставить поле для комментария. Эти поля можно сделать обязательными, тогда пользователь не сможет продолжить квиз, пока не заполнит их. А можно оставить необязательными — тогда заполнение будет по желанию.
    2020-04-16_14-13-26.png
    2020-04-16_14-13-26.png 80.69 KB
В «Мультивыборе» и «Одном варианте» можно прикрепить картинку к каждому варианту ответа. В квизе будут хорошо смотреться изображения с прозрачным фоном или полноцветные, где вся картинка полностью цветная.

Настраиваем финальный слайд

Поздравьте пользователя с успешным прохождением квиза и напомните, что он получит, если оставит контакты. Заголовок и текст поздравления  — обязательные поля. На финальном слайде можно запросить имя, а также телефон или почту. При этом почта — обязательное поле, пользователь не сможет пройти тест, не заполнив его.
2020-04-16_12-02-04.png
2020-04-16_12-02-04.png 73.18 KB

Сохраните изменения. Будьте внимательны! После того, как первый пользователь отправит заявку в квизе, отредактировать вопросы будет невозможно.

Чтобы настроить отображение квиза на сайте, нажмите на кнопку «Редактировать», а затем «Настройки»:
Дизайн без названия (22).png
Дизайн без названия (22).png 239.3 KB

Настраиваем дизайн квиза

Вы можете настроить внешний вид квиза в соответствии с дизайном вашего сайта.
2020-04-16_12-20-05 (2).png
2020-04-16_12-20-05 (2).png 137.86 KB
  1. Выберите цвет кнопок и других элементов. Есть несколько предустановленных цветов или можете указать свой с помощью палитры.
  2. Выберите шрифт. В квизе можно использовать Roboto, Open Sans, Montserrat, Merriweather или PT Sans. 
  3. Укажите, нужно ли отображать квиз на мобильных устройствах.

Каким увидит квиз ваш клиент

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

Чтобы просмотреть квиз, сохраните настройки, а затем в меню передвиньте слайдер в положение «Активен»: 
gfbf.png
gfbf.png 143.8 KB
Затем появится кнопка «Посмотреть». Кликните на нее — именно так будут видеть квиз ваши пользователи.  

Как добавить квиз на сайт

Чтобы вернуться в настройки квиза, нажмите кнопку «Редактировать» в меню (она показана на скриншоте выше).

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

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

Чтобы узнать идентификатор, кликните правой кнопкой на элемент, который должен открывать квиз, и нажмите «Посмотреть код» (в Google Chrome это работает так, для других браузеров смотрите инструкцию), вы увидите id или class элемента (например, id=”button_id”). Скопируйте то, что указано в кавычках:
sdfdf.png
sdfdf.png 1.19 MB

А затем пропишите в настройках квиза.
  • Если вы прописываете значение class, то укажите его в формате: .значение
  • Если значение id, то прописывать нужно в формате: #значение
2020-04-16_12-39-01 (2).png
2020-04-16_12-39-01 (2).png 16.53 KB

Важно! У элемента, при клике на который открывается квиз, должен быть уникальный класс или идентификатор. Если эти значения указаны у других элементов сайта, то квиз откроется при клике на каждый элемент с указанным идентификатором. Возможно, что в тот момент, когда пользователь этого не ожидает.

Сохраните изменения. Готово! Не забудьте, что слайдер должен находиться в положении «Активен». 

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

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

Ответы на квизы будут передаваться вашим операторам в Единый Журнал Лидов. Не забудьте предупредить их!
Связанные страницы
Не нашли решение проблемы? Обратитесь в техподдержку, мы поможем