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

Чтобы поставить квиз на сайт фотографа в конструкторе wfolio, сделайте несколько простых шагов:
Как квиз попадает на сайт wfolio
Код LeadForms ставится в wfolio один раз на весь сайт — в «Настройки» → «Интеграция с сервисами». Что и где показывать, вы выбираете в LeadForms, во вкладке «Публикация».
Если квиз должен открываться кнопкой LeadForms внутри страницы или стоять на странице блоком, понадобится ещё короткий код — его вставляют в блок «HTML» на нужной странице. Блок «HTML» добавляется на страницы сайта, поэтому для этого нужен тариф wfolio с сайтом, а не только с галереями.
В редакторе квиза откройте «Публикация» → «На сайт» и скопируйте код LeadForms
Раскройте блок «Код на сайте» и скопируйте код. Он выглядит так: <script async src="https://script.leadforms.ru/v1.js" data-key="ВАШ_КЛЮЧ"></script> — ключ в нём уже ваш.
Это один код на весь аккаунт: он подключает все ваши квизы и виджеты, для следующих квизов менять его не нужно. Если блок называется «Код LeadForms на сайте найден» — код уже стоит в wfolio, переходите к шагу «Вернитесь в LeadForms…».
Блок «Код на сайте» во вкладке «Публикация» → «На сайт»: код LeadForms
В wfolio откройте «Настройки» → «Интеграция с сервисами»
В самом низу левого меню панели wfolio выберите «Настройки» и откройте карточку «Интеграция с сервисами» — «Внешние сервисы и вставка стороннего кода». Здесь добавляется код, который должен работать на всех страницах сайта.
Подробнее о вставке стороннего кода — в справке wfolio.
Настройки wfolio: пункт «Настройки» в левом меню и карточка «Интеграция с сервисами»
Вставьте код в поле «Сторонний код в теге <head>» и сохраните
Вставьте скопированный код LeadForms в поле «Сторонний код в теге <head>». Поле «Сторонний код в теге <body>» не нужно, его не трогайте.
Нажмите «Сохранить» под полями.
Раздел «Интеграция с сервисами» в wfolio: код LeadForms в поле «Сторонний код в теге head»
Вернитесь в LeadForms, выберите, где проходит квиз и чем открывается, и нажмите «Опубликовать»
Во вкладке «Публикация» → «На сайт» в пункте «Где проходит квиз» выберите «Окно поверх сайта» или «Блок в странице», а в «Чем открывается» отметьте нужные способы — можно несколько сразу. Нажмите «Опубликовать» внизу вкладки «Публикация»: пока квиз не опубликован, на сайте он не откроется — только по прямой ссылке.
Для кнопки LeadForms в углу экрана и для автооткрытия на этом всё — переходите к шагу «Проверьте квиз на сайте». Блок «HTML» нужен, только если выбрали:
— «Кнопка на странице» — код <div data-leadforms-button="ID"></div>;
— «Блок в странице» — код <div data-leadforms-block="ID"></div>.
ID — номер квиза. Скопируйте нужный код.
«Публикация» → «На сайт» в LeadForms: «Где проходит квиз» и «Чем открывается»
Откройте страницу, где должен быть квиз
В левом меню wfolio откройте раздел «Сайт» и кликните по названию страницы, на которую нужно поставить квиз, — например, «Главная» или «Услуги». Блок «HTML» добавляется на страницы с типом «Составная страница», тип подписан под названием.
Раздел «Сайт» в wfolio: список страниц, выбрана составная страница «Главная»
Нажмите (+) «Добавить блок»
В редакторе страницы синие кнопки (+) стоят на линиях между блоками. Нажмите ту, что находится в месте, где должен появиться квиз, — при наведении появится подсказка «Добавить блок».
Редактор страницы wfolio: кнопка (+) «Добавить блок» между блоками
Откройте вкладку «Виджеты»
Откроется окно «Новый блок» с вкладками по типам блоков. Перейдите на вкладку «Виджеты».
Окно «Новый блок» в wfolio: открыта вкладка «Виджеты»
Выберите блок «HTML»
Прокрутите вкладку «Виджеты» вниз до раздела «HTML». В нём несколько раскладок: HTML-блок на всю ширину, узкий, два рядом или рядом с текстом или фото. Для квиза подходит первый вариант — HTML-блок на всю ширину. Нажмите на него.
Вкладка «Виджеты» в wfolio: раздел «HTML» с вариантами раскладки HTML-блока
Вставьте код кнопки или блока в блок «HTML»
На странице появится блок с подписью «HTML блок». Кликните в его поле и вставьте скопированный код кнопки или блока — прямо в редакторе страницы. Код LeadForms сюда повторно вставлять не нужно — он уже стоит в «Интеграции с сервисами».
Редактор страницы wfolio: код кнопки LeadForms вставлен в поле «HTML блок»
Проверьте квиз на сайте
Нажмите «Смотреть сайт» вверху левого меню и откройте страницу с квизом. Кнопка должна открывать квиз, а блок — показывать его прямо в контенте страницы.
Настройки показа меняются в LeadForms, во вкладке «Публикация», — код в wfolio после этого менять не нужно, достаточно снова нажать «Опубликовать».
Готово! Квиз вставлен.
Сайт фотографа на wfolio: кнопка квиза LeadForms «Пройти тест» на главной странице
Кнопка в углу экрана на всех страницах
Если квиз должен открываться на всём сайте, а не на одной странице, в «Чем открывается» отметьте «Кнопка LeadForms — в углу или кнопкой-баннером». Отдельный код для этого не нужен — хватает кода LeadForms в поле для <head>. На каких страницах и устройствах показывать кнопку, выбирается там же, в «Публикации».
Автооткрытие
Если квиз должен открываться сам — через время, при интересе или при уходе со страницы, — во вкладке «Публикация» → «На сайт» в «Чем открывается» отметьте «Автооткрытие», задайте настройки и нажмите «Опубликовать».
На сайте нужен только код LeadForms в поле «Сторонний код в теге <head>», как в шагах выше. Блок «HTML» здесь не нужен: кнопки на странице нет, квиз открывается сам.
Без вставки кода: кнопка со ссылкой
Квиз можно открыть и по прямой ссылке. В wfolio нажмите (+), вкладка «Кнопки», в настройках кнопки выберите действие «Перейти на внешний адрес» и вставьте ссылку на квиз — она есть в LeadForms во вкладке «Публикация» → «Прямая ссылка». Квиз можно открыть и на своём домене, см. инструкцию по своему домену. Подробнее о квизе для фотографов на wfolio — на отдельной странице.
Ставили квиз раньше по старой инструкции?
Если в «Интеграции с сервисами» стоит прежний код LeadForms (с Leadforms.init), квиз продолжит работать как раньше, но новые способы показа, настройки «Публикации» и виджеты на старом коде не работают.
В личном кабинете у такого сайта будет плашка «сайт на старом коде» — откройте «Гайд по переходу»: он проверит страницы сайта и покажет, что удалить и чем заменить.
Не получается настроить?
Если что-то не получается, вы можете — поможем разобраться.

Остались вопросы? Напишите нам

Имя *
* Обязательно к заполнению
e-mail *
* Обязательно к заполнению
Сообщение
Напишите нам!
Ответим в течение 30 секунд