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

# Personalize seu funil com JavaScript

> Personalize seus funis do LanderLab com JavaScript usando a API do quiz e a API de eventos para controlar a lógica, rastrear interações e criar experiências avançadas para os usuários.

Saiba como expandir seu funil do LanderLab com JavaScript personalizado para casos de uso mais avançados.

O LanderLab permite criar funis sem programar, mas você pode adicionar JavaScript personalizado quando precisar de mais controle sobre o comportamento, a lógica ou as integrações.

<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="Group 84" width="1920" height="991" data-path="images/Group-84.png" />
</Frame>

## Como funciona

Quando o quiz carrega, o LanderLab inicializa o funil e disponibiliza as funcionalidades dele por meio de eventos.

Você pode escutar esses eventos e executar seu próprio JavaScript quando algo acontece no funil, por exemplo, quando o quiz começa, quando uma etapa é visualizada ou quando o quiz é enviado.

## Use as APIs

O LanderLab oferece duas APIs principais para personalização:

* [**API do quiz**](/pt-BR/features/quizzes/api/reference) – usada para interagir com o quiz (ler/definir valores, navegar entre etapas, acessar blocos)
* [**API de eventos**](/pt-BR/features/quizzes/api/events) – usada para escutar as ações que acontecem no funil (inicialização, visualização de etapa, envio, cliques)

Você pode combinar as duas para criar funcionalidades personalizadas.

## Acesse a API do quiz

A API do quiz fica disponível dentro dos eventos.

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

  // your code here
});
```

## Exemplo: executar código quando o quiz carrega

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

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

## Exemplo: atualizar o valor de um 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');
  }
});
```

## Exemplo: navegar entre etapas

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

## Exemplo: escutar o envio

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

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

## Eventos disponíveis

Você pode escutar diferentes eventos, como:

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

## Quando usar JavaScript personalizado

Use JavaScript personalizado quando precisar de:

* lógica ou condições personalizadas
* integrações com ferramentas externas
* rastreamento avançado
* atualizações dinâmicas de campos
* navegação personalizada