Custom JS в квизе: свой JavaScript для воронки

Здесь рассказано, как расширить воронку LanderLab собственным JavaScript для более сложных задач. LanderLab позволяет строить воронки без кода, но когда нужно больше контроля над поведением, логикой или интеграциями, можно добавить свой JavaScript.

Настройки Custom JS в конструкторе квиза

Как это работает

Когда квиз загружается, LanderLab инициализирует воронку и предоставляет её функционал через события. Вы можете подписаться на эти события и выполнять свой JavaScript, когда в воронке что-то происходит: квиз запустился, показан шаг или квиз отправлен.

Используйте API

Для настройки поведения LanderLab предоставляет два основных API:

Quiz API — для работы с квизом (чтение и задание значений, переход между шагами, доступ к блокам)
Events API — для прослушивания действий в воронке (init, просмотр шага, отправка, клики)

Их можно сочетать, чтобы создавать собственную функциональность.

Доступ к Quiz API

Quiz API доступен внутри событий.

window.addEventListener('ll-quiz-init', (event) => {
  const llQuizApi = event.detail.llQuizApi;

  // your code here
});

Пример: выполнить код при загрузке квиза

window.addEventListener('ll-quiz-init', (event) => {
  const { quizId } = event.detail;

  console.log('Quiz loaded:', quizId);
});

Пример: изменить значение поля

window.addEventListener('ll-quiz-init', (event) => {
  const { llQuizApi } = event.detail;

  const block = llQuizApi.getBlockByName('email');

  if (block) {
    block.setValue('[email protected]');
  }
});

Пример: переход между шагами

window.addEventListener('ll-quiz-button-click', async (event) => {
  const { llQuizApi, blockName } = event.detail;

  if (blockName === 'next-btn') {
    await llQuizApi.navigation.goToStep('step-2');
  }
});

Пример: прослушивание отправки

window.addEventListener('ll-quiz-submit', (event) => {
  const { fieldsSimple } = event.detail;

  console.log('Submitted data:', fieldsSimple);
});

Доступные события

Можно слушать разные события, например:

ll-quiz-init
ll-quiz-step-view
ll-quiz-step-leave
ll-quiz-button-click
ll-quiz-input-click
ll-quiz-submit

Когда применять собственный JavaScript

Используйте собственный JavaScript, когда вам нужны:

нестандартная логика или условия
интеграции с внешними инструментами
продвинутое отслеживание
динамическое обновление полей
собственная навигация

Начало работы

Лендинги

Визуальный редактор (Canvas)

ИИ

Квизы (воронки)

Воркфлоу

Управление лидами

Домен

Команда и доступ

Тестирование и отчёты

Глобальные блоки

Интеграции

Профиль

Custom JS в квизе: свой JavaScript для воронки

Как это работает

Используйте API

Доступ к Quiz API

Пример: выполнить код при загрузке квиза

Пример: изменить значение поля

Пример: переход между шагами

Пример: прослушивание отправки

Доступные события

Когда применять собственный JavaScript

​Как это работает

​Используйте API

​Доступ к Quiz API

​Пример: выполнить код при загрузке квиза

​Пример: изменить значение поля

​Пример: переход между шагами

​Пример: прослушивание отправки

​Доступные события

​Когда применять собственный JavaScript

Как это работает

Используйте API

Доступ к Quiz API

Пример: выполнить код при загрузке квиза

Пример: изменить значение поля

Пример: переход между шагами

Пример: прослушивание отправки

Доступные события

Когда применять собственный JavaScript