> ## 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.

# Personaliza tu embudo con JavaScript

> Personaliza tus embudos de LanderLab con JavaScript usando la Quiz API y la API de eventos para controlar la lógica, medir las interacciones y crear experiencias avanzadas.

Aprende a ampliar tu embudo de LanderLab con JavaScript personalizado para casos de uso más avanzados.

LanderLab te permite crear embudos sin programar, pero puedes añadir JavaScript personalizado cuando necesites más control sobre el comportamiento, la lógica o las integraciones.

<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="Ajustes de JavaScript personalizado del quiz" width="1920" height="991" data-path="images/Group-84.png" />
</Frame>

## Cómo funciona

Cuando se carga tu quiz, LanderLab inicializa el embudo y pone sus funciones a tu disposición mediante eventos.

Puedes escuchar estos eventos y ejecutar tu propio JavaScript cuando ocurre algo en el embudo, por ejemplo, cuando empieza el quiz, se muestra un paso o se envía el quiz.

## Usa las APIs

LanderLab ofrece dos APIs principales para personalizar:

* [**Quiz API**](/es/features/quizzes/api/reference): sirve para interactuar con el quiz (leer y establecer valores, navegar entre pasos, acceder a los bloques)
* [**API de eventos**](/es/features/quizzes/api/events): sirve para escuchar las acciones que ocurren en el embudo (inicio, visualización de pasos, envío, clics)

Puedes combinar las dos para crear funciones a medida.

## Accede a la Quiz API

La Quiz API está disponible dentro de los eventos.

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

  // tu código aquí
});
```

## Ejemplo: ejecuta código cuando se carga el quiz

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

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

## Ejemplo: actualiza el valor de un campo

```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');
  }
});
```

## Ejemplo: navega entre pasos

```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');
  }
});
```

## Ejemplo: escucha el envío

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

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

## Eventos disponibles

Puedes escuchar distintos eventos, como:

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

## Cuándo usar JavaScript personalizado

Usa JavaScript personalizado cuando necesites:

* lógica o condiciones a medida
* integraciones con herramientas externas
* seguimiento avanzado
* actualizaciones dinámicas de campos
* navegación personalizada