В редакторе квиза откройте «Публикация» → «На сайт» и настройте показ

Выберите, где проходит квиз (окно поверх сайта, панель сбоку или блок в странице) и чем он открывается — например, кнопкой LeadForms, автооткрытием или ссылками и кнопками вашего сайта. Затем нажмите «Опубликовать» внизу вкладки «Публикация» — без этого настройки на сайт не попадут.

Вкладка «Публикация» → «На сайт» в LeadForms: шаги «Где проходит квиз» и «Чем открывается», кнопка «Опубликовать»

Скопируйте код LeadForms

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

Вкладка «Публикация» → «На сайт» в LeadForms: блок «Код на сайте» с кодом для вставки

Вставьте скрипт в index.html

Откройте index.html в корне проекта (в Vite он лежит рядом с package.json, в Vue CLI — в папке public) и вставьте скопированный код перед закрывающим тегом </body>.

Почему именно сюда, а не в компонент: Vue не выполняет теги <script> внутри шаблонов — вставленный туда код просто не запустится.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Мой сайт</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <script async src="https://script.leadforms.ru/v1.js" data-key="ВАШ_КЛЮЧ"></script>
  </body>
</html>

Откройте квиз по своей кнопке

Самый простой способ — добавить своей кнопке атрибут data-leadforms с ID квиза. Обработчик писать не нужно:

<template>
  <button type="button" data-leadforms="8233">
    Пройти тест
  </button>
</template>

Если квиз нужно открыть из своего обработчика, вызовите Leadforms.open с ID квиза:

<template>
  <button type="button" v-on:click="openQuiz">
    Пройти тест
  </button>
</template>

<script setup>
function openQuiz() {
  if (window.Leadforms) {
    window.Leadforms.open(8233)
  }
}
</script>

Вместо 8233 подставьте ID своего квиза — это номер из прямой ссылки https://quiz.leadforms.ru/ID.

Вариант со ссылкой

Квиз открывается и по обычной ссылке с адресом #leadforms-ID:

<a href="#leadforms-8233">Пройти тест</a>

Важно: это должен быть именно <a>, а не <router-link>. Vue Router перехватит переход и попытается найти маршрут вместо того, чтобы отдать хеш виджету.

Если квиз нужен блоком внутри страницы

В «Публикации» выберите «Блок в странице» и поставьте в шаблоне компонента контейнер с ID квиза:

<template>
  <div data-leadforms-block="8233"></div>
</template>

Блок подхватится сам, даже если компонент смонтировался после загрузки страницы. Если блок всё же не появился — вызовите window.Leadforms.refresh() в onMounted.

Что учесть в SPA

• Код LeadForms загружается один раз при открытии приложения — при переходах по маршрутам он не перезагружается, и это нормально.
• Блоки и кнопки, которые появляются при переходе на маршрут, подхватываются сами. Если что-то не появилось — вызовите window.Leadforms.refresh().
• Кнопка с data-leadforms и вызов Leadforms.open работают на любом маршруте без дополнительных действий.

Не получается настроить?

Если что-то не получается, вы можете — поможем разобраться.

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

Имя *

* Обязательно к заполнению

e-mail *

* Обязательно к заполнению

Сообщение

Как добавить квиз в Vue-приложение?

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