No editor do quiz, abra “Publicação” → “No site” e configure como ele aparece
Escolha onde o quiz aparece (janela sobre o site, painel lateral ou bloco na página) e como ele abre: por exemplo, pelo 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 todo o aplicativo e carrega todos os seus quizzes e widgets: não é preciso colocá-lo em cada componente.
Cole o script no
index.htmlAbra o
index.html na raiz do projeto (no Vite ele fica ao lado do package.json e no Vue CLI, na pasta public) e cole o código copiado logo antes da tag de fechamento </body>.Por que ali e não dentro de um componente: o Vue não executa as tags
<script> dentro dos templates, 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="app"></div>
<script type="module" src="/src/main.js"></script>
<script async src="https://script.leadforms.org/v1.js" data-key="SUA_CHAVE"></script>
</body>
</html>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:<template>
<button type="button" data-leadforms="8233">
Fazer o teste
</button>
</template>Se o quiz precisa abrir a partir do seu próprio handler, chame
Leadforms.open com o ID do quiz:<template>
<button type="button" v-on:click="openQuiz">
Fazer o teste
</button>
</template>
<script setup>
function openQuiz() {
if (window.Leadforms) {
window.Leadforms.open(8233)
}
}
</script>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: precisa ser exatamente
<a>, e não <router-link>. O Vue Router 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 no template do componente um contêiner com o ID do quiz:
<template>
<div data-leadforms-block="8233"></div>
</template>O bloco aparece sozinho, mesmo que o componente seja montado depois do carregamento da página. Se ainda assim não aparecer, chame
window.Leadforms.refresh() em onMounted.O que observar em uma SPA
• O código do LeadForms é carregado uma única vez, ao abrir o aplicativo. Ao mudar de rota ele não é carregado de novo, e isso é o esperado.
• Os blocos e botões que aparecem ao entrar em uma rota são detectados sozinhos. Se algo não aparecer, chame
• O botão com
• Os blocos e botões que aparecem ao entrar em uma rota são detectados sozinhos. Se algo não aparecer, chame
window.Leadforms.refresh().• O botão com
data-leadforms e a chamada Leadforms.open funcionam em qualquer rota sem fazer mais nada.Não está conseguindo configurar?
Se algo não funcionar, você pode e resolvemos juntos.
