Sempre gostei da ideia de criar FAQs dentro de algumas landing pages para tirar dúvidas e qualificar mais o público.

O problema era que isso deixava a landing page muito grande e, em termos de experiência e conversão, isso pode prejudicar bastante.

Por isso, criei uma FAQ dinâmica otimizada para SEO (dados estruturados) e vou compartilhar aqui como fiz. Veja!

1) Utilize o elemento HTML na sua landing page

Quando finalizar, o visual vai ficar assim internamente, mas ela vai ficar formatadinha na versão publicada. Fiquem tranquilos.

Cliquem duas vezes no elemento “Cole seu HTML aqui.” e cole o seguinte código:

<div class="meu-faq"> <div id="faq-container">

    <div class="faq-item" itemscope itemtype="https://schema.org/Question" itemid="#question1">

        <div class="faq-question" itemprop="name">Escreva sua pergunta aqui</div>

        <div class="faq-answer" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">

            <span itemprop="text">Escreva sua resposta aqui.</span>

        </div>

    </div>

    <div class="faq-item" itemscope itemtype="https://schema.org/Question" itemid="#question2">

        <div class="faq-question" itemprop="name">Escreva sua pergunta aqui</div>

        <div class="faq-answer" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">

            <span itemprop="text">Escreva sua resposta aqui.</span>

        </div>

    </div>

    <div class="faq-item" itemscope itemtype="https://schema.org/Question" itemid="#question3">

        <div class="faq-question" itemprop="name">Escreva sua pergunta aqui</div>

        <div class="faq-answer" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">

            <span itemprop="text">Escreva sua resposta aqui.</span>

        </div>

    </div>

    <div class="faq-item" itemscope itemtype="https://schema.org/Question" itemid="#question4">

        <div class="faq-question" itemprop="name">Escreva sua pergunta aqui</div>

        <div class="faq-answer" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">

            <span itemprop="text">Escreva sua resposta aqui.</span>

        </div>

    </div>

    <div class="faq-item" itemscope itemtype="https://schema.org/Question" itemid="#question5">

        <div class="faq-question" itemprop="name">Escreva sua pergunta aqui</div>

        <div class="faq-answer" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">

            <span itemprop="text">Escreva sua resposta aqui.</span>

        </div>

    </div>

</div> </div>

2) Substitua o texto pelo da sua preferência onde está “Escreva sua pergunta aqui” e “Escreva sua resposta aqui.”.

Note que o texto deve estar dentro dos elementos “><”.

Clique em "Salvar".

3) Vá em “Edição avançada” na parte superior da landing page.

Lá você vai ser 3 seções: CSS, Javascript em HEAD e Javascript em BODY.

4) Cole este código em BODY:

.meu-faq .faq-item { /* Seletor mais específico */

    border-bottom: 1px solid #ccc;

    margin-bottom: 10px;

    cursor: pointer;

}

.meu-faq .faq-question { /* Seletor mais específico */

    font-weight: bold;

    padding: 10px;

}

.meu-faq .faq-answer { /* Seletor mais específico */

    padding: 0 10px 10px;

    display: none;

}

⚠️ Atenção: se já tiver algum código lá, cole antes ou depois dele. Isso vale também para o próximo passo.

5) Cole este código em Javascript em BODY:

<script type="text/javascript">

    document.addEventListener('DOMContentLoaded', function() {

  const faqItems = document.querySelectorAll('.meu-faq .faq-item');

  faqItems.forEach(item => {

    item.addEventListener('click', () => {

      const answer = item.querySelector('.faq-answer');

      if (answer) { // Verificação adicional para evitar erros

        answer.style.display = answer.style.display === 'block' ? 'none' : 'block';

      }

    });

  });

});

</script>

6) Prontinho. Clique em “Aplicar”. Vá em “Pré-visualizar” ou publique sua LP normalmente e veja se funcionou.