Personaliza tu embudo con JavaScript

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.

Ajustes de JavaScript personalizado del quiz

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: sirve para interactuar con el quiz (leer y establecer valores, navegar entre pasos, acceder a los bloques)
API de eventos: 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.

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

  // tu código aquí
});

Ejemplo: ejecuta código cuando se carga el quiz

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

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

Ejemplo: actualiza el valor de un campo

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

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

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

Ejemplo: navega entre pasos

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

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

Primeros pasos

Landing Pages

Editor visual (Canvas)

IA

Quizzes (embudos)

Workflows

Gestión de leads

Dominio

Multiusuario

Pruebas e informes

Bloques globales

Integraciones

Perfil

Cómo funciona

Usa las APIs

Accede a la Quiz API

Ejemplo: ejecuta código cuando se carga el quiz

Ejemplo: actualiza el valor de un campo

Ejemplo: navega entre pasos

Ejemplo: escucha el envío

Eventos disponibles

Cuándo usar JavaScript personalizado

​Cómo funciona

​Usa las APIs

​Accede a la Quiz API

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

​Ejemplo: actualiza el valor de un campo

​Ejemplo: navega entre pasos

​Ejemplo: escucha el envío

​Eventos disponibles

​Cuándo usar JavaScript personalizado

Cómo funciona

Usa las APIs

Accede a la Quiz API

Ejemplo: ejecuta código cuando se carga el quiz

Ejemplo: actualiza el valor de un campo

Ejemplo: navega entre pasos

Ejemplo: escucha el envío

Eventos disponibles

Cuándo usar JavaScript personalizado