Como incorporar um quiz do LanderLab em outra página

• Reutilizar o mesmo quiz em vários landers sem precisar recriá-lo
• Adicionar um quiz a um lander que já está no ar
• Exibir um quiz do LanderLab em um site criado fora do LanderLab

​

Como funciona

​

Guia passo a passo

1

Crie uma landing page em branco para o quiz

• Acesse Landing Pages e clique em Create Landing Page
• Clique em Create From Template
• Selecione Blank Template e clique em Use Template
• Dê um nome claro à página (por exemplo, Quiz - Embed) e clique em Create Landing Page

Para mais detalhes, veja Criar uma landing page do zero.

2

Adicione o elemento Quiz

• No editor, clique em + (Add Elements) no canto superior esquerdo
• Em Lead Capture, clique em Quiz para adicioná-lo à página

Mantenha apenas o quiz nesta página. Qualquer outra coisa que você adicionar aqui, como títulos, imagens ou rodapés, também vai aparecer dentro do iframe.

3

Monte o seu quiz

• Escolha Create From Scratch para criar o quiz você mesmo ou Create From Template para começar com um quiz pronto. Você também pode descrever o quiz na caixa de texto para criá-lo com IA.
• Adicione e edite as etapas no editor do quiz
• Clique em Update para salvar o quiz

Saiba mais em Criar funis de quiz do zero.

4

Publique a página do quiz

• Clique em Publish no canto superior direito do editor
• Escolha um Domain e um Path e clique em Publish Landing Page
• Copie a URL ativa da página (por exemplo, https://yourdomain.com/quiz). Você vai colá-la no código de incorporação mais adiante.

5

Adicione um elemento Custom Code ao seu lander

• Abra no editor o lander em que o quiz deve aparecer
• Clique em + (Add Elements) e, em Engagement, clique em Custom Code
• Mova o elemento para o lugar em que o quiz deve aparecer
• Com o elemento selecionado, clique em Edit Custom Code no painel direito

6

Cole o código de incorporação

Cole este código na janela Edit Code e substitua o valor de src pela URL da página publicada do seu quiz:

<div style="width:100%;margin:0;padding:0;">
  <iframe
    src="https://yourdomain.com/your-quiz-page"
    width="100%"
    height="600"
    frameborder="0"
    style="display:block;width:100%;margin:0;padding:0;border:0;outline:0;box-shadow:none;background:transparent;">
  </iframe>
</div>

Clique em Save para fechar a janela.

7

Salve, visualize e publique o lander

• Clique em Save no editor
• Clique no ícone Preview (olho) para conferir o quiz. O elemento Custom Code não aparece dentro do editor, então o quiz só é exibido no Preview e na página ativa.
• Publique ou republique o lander para que a alteração entre no ar

​

Resultado final

​

Personalize a incorporação

• Altura: Altere height="600" para caber a etapa mais alta do seu quiz. Se uma etapa for mais alta que o quadro, os visitantes verão uma barra de rolagem dentro do quiz.
• Celular: Confira o lander no celular, onde as etapas do quiz costumam ser mais altas, e aumente a altura se necessário.
• Largura: O quiz ocupa toda a largura do contêiner. Para deixá-lo mais estreito e centralizado, altere o estilo da <div> externa para width:100%;max-width:600px;margin:0 auto;padding:0;.

<style>
  .quiz-embed {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .quiz-embed iframe {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
  }
</style>

<div class="quiz-embed">
  <iframe
    src="https://yourdomain.com/your-quiz-page"
    width="100%"
    height="600"
    frameborder="0">
  </iframe>
</div>

​

Incorpore o quiz fora do LanderLab

​

Observações importantes

• Os leads ficam na página do quiz. O quiz roda na página em branco do quiz, então os leads e as análises são registrados nessa página, e não no lander em que você o incorporou.
• As atualizações do quiz valem para todos os lugares. Quando você edita e republica a página do quiz, o quiz incorporado é atualizado em todos os landers que o usam. Só altere o src se mudar o domínio ou o caminho da página do quiz.
• O rastreamento roda dentro do iframe. Pixels e parâmetros de URL do lander principal não chegam automaticamente ao quiz incorporado. Configure o rastreamento do quiz, como o evento Lead do Meta Pixel, na própria página do quiz.
• Sempre teste o quiz no lander ativo depois de publicar.