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

# Como incorporar um quiz do LanderLab em outra página

> Incorpore um quiz do LanderLab em qualquer lander ou site: crie-o em uma página em branco, publique e adicione com um iframe em um elemento Custom Code.

Você pode exibir um quiz do LanderLab dentro de outra landing page, ou em qualquer site que aceite HTML personalizado, criando o quiz em uma landing page em branco própria e incorporando essa página com um iframe.

Isso é útil quando você quer:

* 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

Você cria uma landing page em branco que contém apenas o quiz e a publica. Depois, adiciona um pequeno trecho de iframe com o elemento [**Custom Code**](/pt-BR/features/editor/elements/custom-code) no lander em que o quiz deve aparecer. Os visitantes veem e respondem o quiz sem sair desse lander.

***

## Guia passo a passo

<Steps>
  <Step title="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**

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-blank-template.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=bb127d45a323dea7094702d1427e42e6" alt="Blank Template selecionado na biblioteca de templates" width="1373" height="335" data-path="images/embed-quiz-blank-template.png" />
    </Frame>

    Para mais detalhes, veja [Criar uma landing page do zero](/pt-BR/features/landing-pages/create/from-scratch).
  </Step>

  <Step title="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

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-add-quiz-element.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=52175814bbcfbe6f55b49fd8e6e85aec" alt="Elemento Quiz em Lead Capture no painel Add Elements" width="1568" height="737" data-path="images/embed-quiz-add-quiz-element.png" />
    </Frame>

    <Tip>
      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.
    </Tip>
  </Step>

  <Step title="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

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-create-quiz.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=343309f5c8c62a6e953dbca86e089347" alt="Opções Create From Scratch e Create From Template para um novo quiz" width="1552" height="721" data-path="images/embed-quiz-create-quiz.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-builder-update.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=5d98c8af438863e2a92761b812fa6652" alt="Editor do quiz com o botão Update" width="1568" height="737" data-path="images/embed-quiz-builder-update.png" />
    </Frame>

    Saiba mais em [Criar funis de quiz do zero](/pt-BR/features/quizzes/create/from-scratch).
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-blank-page-with-quiz.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=a4b02687042b9f5d68e548acf0eff779" alt="Landing page em branco só com o quiz e o botão Publish" width="1568" height="737" data-path="images/embed-quiz-blank-page-with-quiz.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-publish.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=f032b59a5b7f9d5f634faaa3abd10e28" alt="Janela Publish Your Landing Page com Domain e Path" width="1568" height="737" data-path="images/embed-quiz-publish.png" />
    </Frame>
  </Step>

  <Step title="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

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-custom-code-element.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=1b69b72b514cdf07257fcaecc22a444a" alt="Elemento Custom Code em Engagement no painel Add Elements" width="1568" height="737" data-path="images/embed-quiz-custom-code-element.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-edit-custom-code.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=f44839dff8f85cdfa05cb6f250b73022" alt="Elemento Custom Code no lander com o botão Edit Custom Code" width="1568" height="737" data-path="images/embed-quiz-edit-custom-code.png" />
    </Frame>
  </Step>

  <Step title="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:

    ```html theme={null}
    <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.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-iframe-code.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=aad18bd0d32bbbde3785ff62d115b6dc" alt="Janela Edit Code com o código iframe do quiz" width="1568" height="737" data-path="images/embed-quiz-iframe-code.png" />
    </Frame>
  </Step>

  <Step title="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**](/pt-BR/features/landing-pages/operations/publish) ou [**republique**](/pt-BR/features/landing-pages/operations/republish) o lander para que a alteração entre no ar
  </Step>
</Steps>

### Resultado final

O quiz agora aparece dentro do seu lander, sem nenhuma borda ao redor, e os visitantes podem respondê-lo sem sair da página.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/FVq4TJBX8YV0ZdgS/images/embed-quiz-result.png?fit=max&auto=format&n=FVq4TJBX8YV0ZdgS&q=85&s=7da9c6796ad877510fca732823a80187" alt="Quiz incorporado em outro lander, exibido no Preview" width="968" height="420" data-path="images/embed-quiz-result.png" />
</Frame>

***

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

<Accordion title="Alternativa: código de incorporação com um bloco de estilo">
  Se você incorporar vários quizzes na mesma página, pode manter os estilos em um único bloco `<style>` e reutilizar a classe `quiz-embed`:

  ```html theme={null}
  <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>
  ```
</Accordion>

## Incorpore o quiz fora do LanderLab

O mesmo código de incorporação funciona em qualquer site ou construtor de páginas que permita adicionar HTML personalizado, como um bloco **Custom HTML** do WordPress ou um elemento **Code Embed** do Webflow. Cole o código lá e substitua o valor de `src` pela URL da página do seu quiz.

***

## 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](/pt-BR/community/quiz/fire-meta-pixel), na própria página do quiz.
* Sempre teste o quiz no lander ativo depois de publicar.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.