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

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

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

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

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

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

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

Где искать файл: в Vite — index.html в корне проекта, в Create React App — public/index.html. Вставьте скопированный код перед закрывающим тегом </body>.

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

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

Если у вас Next.js

В Next.js файла index.html нет. Подключайте скрипт компонентом next/script в корневом макете — тогда он попадёт на все страницы:

// app/layout.jsx
import Script from 'next/script'

export default function RootLayout(props) {
  return (
    <html lang="ru">
      <body>
        {props.children}
        <Script
          src="https://script.leadforms.ru/v1.js"
          data-key="ВАШ_КЛЮЧ"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Вместо ВАШ_КЛЮЧ подставьте ключ из скопированного кода. Больше ничего вызывать не нужно — квизы и виджеты подключатся сами.

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

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

function QuizButton() {
  return (
    <button type="button" data-leadforms="8233">
      Пройти тест
    </button>
  )
}

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

function openQuiz() {
  if (window.Leadforms) {
    window.Leadforms.open(8233)
  }
}

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

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

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

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

Важно: это должен быть именно <a>, а не <Link> из React Router или Next.js. Роутер перехватит переход и попытается найти маршрут вместо того, чтобы отдать хеш виджету.

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

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

function QuizBlock() {
  return <div data-leadforms-block="8233" />
}

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

Что учесть в SPA

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

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

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

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

Имя *

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

e-mail *

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

Сообщение

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

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