No editor do quiz, abra “Publicação” → “No site” e configure a exibição
Escolha “Onde o quiz aparece” (janela sobre o site, painel lateral ou “Bloco na página”) e “Como abre”: por exemplo, com o botão do LeadForms, com abertura automática ou pelos “Links e botões do seu site”. Depois clique em “Publicar” no fim da aba “Publicação”: sem isso, as configurações não chegam ao seu site.
Copie o código do LeadForms
Abra o bloco “Código do site” e copie o código. Ele é um só para toda a aplicação e carrega todos os seus quizzes e widgets: não é preciso colocá-lo em cada componente.
Cole o script no
index.htmlOnde fica o arquivo: no Vite,
index.html na raiz do projeto; no Create React App, public/index.html. Cole o código copiado logo antes da tag de fechamento </body>.Por que ali e não dentro de um componente: o React não executa as tags
<script> que vão parar dentro do JSX, então ali o código simplesmente não roda.<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Meu site</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script async src="https://script.leadforms.org/v1.js" data-key="SUA_CHAVE"></script>
</body>
</html>Se você usa Next.js
No Next.js, o arquivo
index.html não existe. Carregue o script com o componente next/script no layout raiz, e assim ele chega a todas as páginas:// app/layout.jsx
import Script from 'next/script'
export default function RootLayout(props) {
return (
<html lang="pt-BR">
<body>
{props.children}
<Script
src="https://script.leadforms.org/v1.js"
data-key="SUA_CHAVE"
strategy="afterInteractive"
/>
</body>
</html>
)
}No lugar de
SUA_CHAVE, coloque a chave do código que você copiou. Não é preciso chamar mais nada: os quizzes e widgets carregam sozinhos.Abra o quiz pelo seu próprio botão
O mais simples é adicionar ao seu botão o atributo
data-leadforms com o ID do quiz. Não é preciso escrever nenhum handler:function QuizButton() {
return (
<button type="button" data-leadforms="8233">
Fazer o teste
</button>
)
}Se o quiz precisa abrir a partir do seu próprio handler, chame
Leadforms.open com o ID do quiz:function openQuiz() {
if (window.Leadforms) {
window.Leadforms.open(8233)
}
}No lugar de
8233, coloque o ID do seu quiz: é o número do link direto https://quiz.leadforms.org/ID.A opção com link
O quiz também abre com um link comum cujo endereço seja
#leadforms-ID:<a href="#leadforms-8233">Fazer o teste</a>Importante: tem que ser exatamente
<a>, e não o <Link> do React Router nem do Next.js. O roteador interceptaria a navegação e tentaria procurar uma rota em vez de passar o hash para o widget.Se você quer o quiz como bloco dentro da página
Em “Publicação”, escolha “Bloco na página” e coloque na marcação do componente um contêiner com o ID do quiz:
function QuizBlock() {
return <div data-leadforms-block="8233" />
}O bloco aparece sozinho, mesmo que o componente seja montado depois do carregamento da página. Se mesmo assim ele não aparecer, chame
window.Leadforms.refresh() depois de montar o componente.O que observar numa SPA
• O código do LeadForms é carregado uma única vez, ao abrir a aplicação. Ao trocar de rota ele não é carregado de novo, e isso é o esperado.
• Os blocos e botões que aparecem ao entrar numa rota são detectados sozinhos. Se algo não aparecer, chame
• O botão com
• Os blocos e botões que aparecem ao entrar numa rota são detectados sozinhos. Se algo não aparecer, chame
window.Leadforms.refresh().• O botão com
data-leadforms e a chamada a Leadforms.open funcionam em qualquer rota sem fazer mais nada.Não está conseguindo configurar?
Se algo não funcionar, e resolvemos junto com você.
