Integração com WordPress + Elementor

O WordPress continua sendo o site principal. O Prompt Lab entra como aplicação incorporada em uma página do Elementor, por exemplo /prompt-lab/.

1. URLs

• — Página limpa para incorporar: /embed (sem cabeçalho nem rodapé)
• — Aplicação em página inteira: /biblioteca
• — Domínio futuro sugerido: app.ducandreva.com ou prompts.ducandreva.com

2. Widget HTML do Elementor

Adicione um widget HTML na página /prompt-lab/ e cole o código abaixo. Ajuste o domínio quando o subdomínio estiver ativo.

<div class="du-prompt-lab-embed">
  <iframe
    src="https://app.ducandreva.com/embed"
    title="DU Prompt Lab"
    loading="lazy"
    style="width:100%;height:100%;border:0;display:block;"
    allow="clipboard-write"
  ></iframe>
</div>

<style>
  .du-prompt-lab-embed { position: relative; width: 100%; height: 1400px; }
  @media (max-width: 1024px) { .du-prompt-lab-embed { height: 1700px; } }
  @media (max-width: 767px)  { .du-prompt-lab-embed { height: 2000px; } }
</style>

3. Botão para abrir em página inteira

Use um widget Botão do Elementor com o texto “Abrir o Prompt Lab” e o link para https://app.ducandreva.com/biblioteca. Marque para abrir em nova aba quando quiser manter o site aberto.

4. Recomendações

• — Use o template Elementor Canvas ou remova o container com padding para o iframe ocupar toda a largura.
• — Não duplique o cabeçalho: a rota /embed já vem sem navegação.
• — Todo o CSS do app é isolado pelo escopo .du-root e servido dentro do iframe, então não há conflito com o tema do WordPress.
• — Favoritos e histórico ficam no navegador do visitante (armazenamento local do domínio do app).
• — Para integração mais profunda no futuro: plugin com shortcode e chamadas REST à API do app, mantendo qualquer chave apenas no servidor.