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

Выберите размещение «На сайт», а ниже — как квиз появится на странице: кнопкой, блоком, виджетом, баннером или автооткрытием.

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

Скопируйте код инициализации

Нажмите «Копировать» под кодом для блока <head>. Этот скрипт нужен один на всё приложение — вставлять его в каждый компонент не нужно.

Код инициализации LeadForms для вставки в блок head и кнопка «Копировать»

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

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

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

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Мой сайт</title>

    <!-- Leadforms script start -->
    <!-- сюда вставьте скопированный код -->
    <!-- Leadforms script end -->
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

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

Самый простой способ для Vue — повесить на кнопку обработчик. Метод Leadforms.showModal принимает ID вашего квиза.

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

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

Вместо 8233 подставьте ID своего квиза — он виден в коде инициализации в поле id.

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

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

<a href="#popup:Leadforms_8233">Пройти тест</a>

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

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

Готовый код из вкладки «Публикация» содержит <script> — вставлять его в шаблон Vue бесполезно. Вместо этого поставьте контейнер и вызовите Leadforms.add после монтирования компонента.

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

<script setup>
import { onMounted } from 'vue'

const params = { id: '8233', buttonText: 'Пройти тест' }

onMounted(() => {
  if (window.Leadforms) {
    window.Leadforms.add(['Button', params])
  } else {
    // скрипт ещё грузится — виджет заберёт вызов из очереди
    document.addEventListener('leadformsLoaded', function () {
      window.Leadforms.add(['Button', params])
    })
  }
})
</script>

Проверка window.Leadforms нужна потому, что компонент может смонтироваться раньше, чем загрузится скрипт виджета.

Что учесть в SPA

• Скрипт инициализации загружается один раз при открытии приложения — при переходах по маршрутам он не перезагружается, и это нормально.
• Если квиз встроен блоком на странице конкретного маршрута, Leadforms.add вызывается в onMounted этого компонента — то есть при каждом заходе на маршрут заново.
• Кнопка через showModal работает на любом маршруте без дополнительных действий.

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

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