> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Custom JS в квизе: добавляйте свой JavaScript с помощью Quiz API и Events API, чтобы управлять логикой воронки и отслеживать действия.

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

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

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/nZqgRHMCi_31GFLg/images/Group-84.png?fit=max&auto=format&n=nZqgRHMCi_31GFLg&q=85&s=e7c6ab3b85d75c1fd0c588c24baab516" alt="Настройки Custom JS в конструкторе квиза" width="1920" height="991" data-path="images/Group-84.png" />
</Frame>

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

Когда квиз загружается, LanderLab инициализирует воронку и предоставляет её функционал через события.

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

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

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

* [**Quiz API**](/ru/features/quizzes/api/reference) — для работы с квизом (чтение и задание значений, переход между шагами, доступ к блокам)
* [**Events API**](/ru/features/quizzes/api/events) — для прослушивания действий в воронке (init, просмотр шага, отправка, клики)

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

## Доступ к Quiz API

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

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

  // your code here
});
```

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

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

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

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

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

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

  if (block) {
    block.setValue('test@example.com');
  }
});
```

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

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

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

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

```text theme={null}
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, когда вам нужны:

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.