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

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

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

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

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

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

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

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

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

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

    <!-- Leadforms script start -->
    <!-- сюда вставьте скопированный код -->
    <!-- Leadforms script end -->
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></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>
        <Script
          id="leadforms"
          src="//script.leadforms.ru/v1.js"
          strategy="afterInteractive"
          onLoad={initQuiz}
        />
        {props.children}
      </body>
    </html>
  )
}

Функция initQuiz вызывает window.Leadforms.init с теми же параметрами, что и в скопированном коде — id вашего квиза и autoOpen.

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

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

function QuizButton() {
  function openQuiz() {
    if (window.Leadforms) {
      window.Leadforms.showModal('8233')
    }
  }

  return (
    <button type="button" onClick={openQuiz}>
      Пройти тест
    </button>
  )
}

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

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

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

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

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

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

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

import { useEffect } from 'react'

const QUIZ_ID = '8233'

function QuizBlock() {
  useEffect(function () {
    const params = { id: QUIZ_ID, buttonText: 'Пройти тест' }

    function add() {
      window.Leadforms.add(['Button', params])
    }

    if (window.Leadforms) {
      add()
    } else {
      document.addEventListener('leadformsLoaded', add)
      return function () {
        document.removeEventListener('leadformsLoaded', add)
      }
    }
  }, [])

  return <div data-leadforms-id={QUIZ_ID} />
}

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

Осторожно со StrictMode в разработке

В React 18 и новее <StrictMode> в режиме разработки монтирует компонент дважды — значит useEffect отработает два раза, и на странице может появиться две кнопки.
Это происходит только локально, в сборке для продакшена такого нет. Если мешает при отладке — временно уберите <StrictMode> в main.jsx либо добавьте флаг, который не даст вызвать add повторно.

Что учесть в SPA

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

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

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