Personalize seu funil com JavaScript

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.

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 – usada para interagir com o quiz (ler/definir valores, navegar entre etapas, acessar blocos)
API de eventos – 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.

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

  // your code here
});

Exemplo: executar código quando o quiz carrega

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

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

Exemplo: atualizar o valor de um campo

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

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

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

Exemplo: navegar entre etapas

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

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

Primeiros passos

Landing Pages

Editor visual (Canvas)

IA

Quizzes (funis)

Workflows

Gestão de leads

Domínio

Multiusuário

Testes e relatórios

Blocos globais

Integrações

Perfil

Como funciona

Use as APIs

Acesse a API do quiz

Exemplo: executar código quando o quiz carrega

Exemplo: atualizar o valor de um campo

Exemplo: navegar entre etapas

Exemplo: escutar o envio

Eventos disponíveis

Quando usar JavaScript personalizado

​Como funciona

​Use as APIs

​Acesse a API do quiz

​Exemplo: executar código quando o quiz carrega

​Exemplo: atualizar o valor de um campo

​Exemplo: navegar entre etapas

​Exemplo: escutar o envio

​Eventos disponíveis

​Quando usar JavaScript personalizado

Como funciona

Use as APIs

Acesse a API do quiz

Exemplo: executar código quando o quiz carrega

Exemplo: atualizar o valor de um campo

Exemplo: navegar entre etapas

Exemplo: escutar o envio

Eventos disponíveis

Quando usar JavaScript personalizado