Перейти на сайт

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

Общая инструкция для всех сайтов

Добавить квиз в сайт можно 6 способами:

  1. Автооткрывающимся баннером.
  2. По кнопке Марквиз.
  3. Ссылкой на квиз в свою кнопку.
  4. В тело сайта.
  5. Баннером.
  6. Виджетом.

Шаг №1 для всех способов — установка кода инициализации (скрипта):

Независимо от того, каким способом будете устанавливать квиз, нужно внедрить на сайт код инициализации (скрипт). Данный код находится во вкладке «Установка квиза» => Далее нужно выбрать способ установки квиза => «Вставить код на сайт»

Код инициализации устанавливается в блог <head> на вашем сайте. Если у вас сайт выполнен на каком-либо конструкторе сайтов, то вам нужно найти место куда вы сможете вставлять HTML код — можете уточнить у поддержки вашего конструктора сайтов или найти инструкцию к вашему конструктору в нашей базе знаний.

Шаг №2 для всех способов — вставка кода квиза.

Теперь расскажем подробнее про каждый способ.

Способ 1: Автооткрытие квиза 

Для автооткрытия квиза на сайте достаточно установить код инициализации квиза (скрипт). В настройках кода инициализации нужно выбрать настройки автооткрытия, кликнуть «Далее» и скопировать код.
Скопированный код нужно установить на сайт как было сказано в пункте выше.

Готово! Квиз будет открываться в модальном окне.

Способ 2: Вставить кнопку Marquiz

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

Устанавливаем код инициализации, как описано в начале инструкции, и затем код кнопки.

Код кнопки нужно установить в тэг <body> на вашем сайте в место, где вы хотите видеть кнопку. Готово! Квиз будет открываться в модальном окне.

Способ 3: Добавить ссылку на квиз в свою кнопку

Для установки кнопки необходимо перейти во вкладку установки и выбрать «По кнопке», далее выбрать «Своя кнопка». Вы можете выбрать одну из двух ссылок которые можно разместить в коде кнопки.
Вставьте скопированную ссылку в href="ссылка" вашей кнопки (пример: href="#popup:marquiz_5aa84f60ee90d200185234af").

Готово! Квиз будет открываться в модальном окне.

Способ 4: Вставить квиз в тело сайта 

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

После настройки, установите код инициализации как описано в начале инструкции, далее скопируйте код установки квиза и установите в нужное место на сайте в тэг <body>. Готово!


Способ 5: Установить квиз баннером

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

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

Готово! Квиз будет открываться в модальном окне.

Способ 6: Установить квиз виджетом

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


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

После настройки копируем код инициализации и вставляем его на сайт, как показано в начале данной инструкции, далее копируем код виджета и устанавливаем перед закрывающим тэгом </body>. Готово!



Теперь проверяем правильность установки квиза:  

  1. Копируем адрес сайта, на котором установлен квиз.
  2. Находим раздел «установка квиза». На сайте Marquiz, в панели редактирования, переходим в раздел «установка квиза».
  3. Проверяем установку. Выбираем способ, каким установили квиз, переходим в пункт «Вставить код на сайт» =>  «Проверьте правильность установки», вставляем ссылку на сайт, где установили квиз, и нажимаем «Проверить»

Если все четыре пункта высвечиваются зеленым цветом, то всё сделали правильно, кнопка установлена и квиз корректно работает.

Если какой-то то из пунктов высвечивается красным цветом, то следует проверить следующие настройки по пунктам:

🐞«код инициализации не установлен» — проверяем, добавили ли код инициализации в блок head.
🐞«скрипт модального окна не установлен» — проверяем, добавили ли код инициализации в блок head.
🐞 «кнопка открытия квиза не установлена» — проверяем, добавили ли кнопку открытия квиза из редактора кнопки в нужное место.
🐞«квиз не установлен или это не тот квиз» — проверяем, что id квиза в коде инициализации или в кнопке открытия квиза соответствует текущему квизу.

👆 На этом пока всё