QBML v1

QuizzBuilder Markup Language

Crie quizzes completos escrevendo texto simples. Cole a sintaxe abaixo em qualquer IA (ChatGPT, Claude, Gemini) e peça para ela gerar um quiz no formato QBML.

Como usar com IA

1. Clique em "Copiar sintaxe" no botão acima.
2. Cole no ChatGPT, Claude ou Gemini com um prompt como:
Cole a sintaxe aqui e diga: "Crie um quiz de diagnóstico para coaches usando esse formato QBML. O quiz deve ter 6 perguntas, captura de lead e carregamento antes do resultado."
3. Copie o QBML gerado pela IA.
4. No QuizzBuilder, clique em "Criar quiz" → "Criar por texto" → cole e clique em "Gerar quiz".

Sintaxe básica

[bloco]

Declara um tipo de bloco. Cada bloco cria um novo step.

+[bloco]

Adiciona o bloco ao step anterior (multi-bloco).

- item

Item de lista: opções, campos, mensagens, slides.

{chave: valor}

Propriedades opcionais do bloco.

#meu-id

Nomeia um step para usar como destino de ramificação.

-> #meu-id

Em uma opção de [escolha], redireciona para o step nomeado.

{{variavel}}

Personalização dinâmica com dados do lead ou score.

// comentário

Linha ignorada pelo parser.

Variáveis dinâmicas

Use {{variavel}} em qualquer texto para personalizar o conteúdo com dados do respondente.

Variável	O que substitui
`{{nome}}`	Nome do lead (campo 'nome' preenchido no [lead])
`{{email}}`	E-mail do lead
`{{whatsapp}}`	WhatsApp do lead
`{{cidade}}`	Cidade do lead (campo 'cidade' no [lead])
`{{estado}}`	Estado do lead (campo 'estado' no [lead])
`{{score}}`	Pontuação calculada ao final do quiz

Exemplo:

[heading] Parabéns, {{nome}}! Seu score é {{score}} pontos.

Imagens nos blocos

Três blocos aceitam imagens via QBML. A URL deve ser pública e acessível (Cloudinary, Imgur, seu CDN, etc.).

[imagem]

Bloco dedicado para exibir uma imagem isolada no step.

[imagem] https://url.com/foto.jpg
{tamanho: completo|medio|pequeno, formato: retangulo|arredondado|circulo}

[escolha] com imagens

Adicione {imagens: sim} e use o pipe | após cada opção para vincular uma imagem.

[escolha] Qual perfil é o seu?
{imagens: sim}
- Opção A | https://url.com/a.jpg
- Opção B | https://url.com/b.jpg
- Opção C | https://url.com/c.jpg

[carrossel]

Sequência de imagens. O pipe | é opcional — adicione título e subtítulo se quiser.

[carrossel]
{proporcao: 16/9, autoplay: sim}
- https://url.com/img1.jpg | Título do slide | Subtítulo
- https://url.com/img2.jpg

Referência de blocos

[badge]Badge / Selo

Selo pequeno (emoji + texto curto), geralmente logo acima de um [heading]. Sem {cor} definida, usa a cor de destaque do tema automaticamente.

alinhamentoesquerda · centro· padrão: centro

corcor em hex (ex: #6366f1)· padrão: cor de destaque do tema

[badge] 📦 Fralda parada é só um dos sinais
{alinhamento: centro}
+[heading] Seu estoque pode estar travando o lucro
{tamanho: h1, alinhamento: centro}

[heading]Título

Texto de destaque: título, subtítulo ou parágrafo.

tamanhoh1 · h2 · h3 · p· padrão: h2

alinhamentoesquerda · centro · direita· padrão: esquerda

[heading] Bem-vindo ao quiz!
{tamanho: h1, alinhamento: centro}

[cta]CTA

Tela de entrada ou resultado com título, subtítulo e botão. O botão pode avançar para o próximo step, abrir WhatsApp ou redirecionar para uma URL.

titulotexto livre· padrão: obrigatório

subtitulotexto livre· padrão: —

botaotexto livre· padrão: Começar

acaowhatsapp · url · (vazio = avança para próximo step)· padrão: avança

numeronúmero com DDI+DDD (ex: 5511999999999)· padrão: se acao: whatsapp

mensagemtexto pré-preenchido no WhatsApp· padrão: —

urlURL completa (https://...)· padrão: se acao: url

[cta]
titulo: Descubra seu perfil!
subtitulo: Responda 5 perguntas rápidas
botao: Começar agora

// CTA com WhatsApp:
[cta]
titulo: Quer falar com um especialista?
subtitulo: Clique abaixo para entrar em contato
botao: Falar no WhatsApp
{acao: whatsapp, numero: 5511999999999, mensagem: Olá! Vim do quiz.}

// CTA com URL:
[cta]
titulo: Oferta exclusiva para você!
botao: Ver oferta
{acao: url, url: https://seusite.com/oferta}

[escolha]Escolha

Pergunta de múltipla escolha. Suporta seleção múltipla, imagens por opção (pipe |) e ramificações (-> #id).

multinúmero (ex: 3 = até 3 seleções)· padrão: 1 (única)

layoutlista · grade· padrão: lista

imagenssim · nao — ativa modo imagem nas opções· padrão: nao

- Opção | https://url.jpgsintaxe para imagem em cada opção (pipe | + URL)

indicadorbolinha · quadrado · numeros · letras · nenhum· padrão: bolinha (única) · quadrado (múltipla)

posicaoesquerda · direita· padrão: direita (única) · esquerda (múltipla)

// Escolha simples (múltipla seleção):
[escolha] Quais são seus maiores desafios?
- Falta de tempo
- Falta de dinheiro
- Falta de conhecimento
{multi: 3, layout: grade}

// Escolha COM IMAGEM por opção:
// Adicione | URL após o texto de cada opção
[escolha] Qual perfil é o seu?
{imagens: sim}
- Iniciante | https://url.com/iniciante.jpg
- Intermediário | https://url.com/inter.jpg
- Avançado | https://url.com/avancado.jpg

[escolha] + ramificaçãoEscolha com desvio

Cada opção pode levar a um step diferente usando -> #id.

[escolha] Qual seu nível?
- Iniciante -> #nivel-basico
- Avançado -> #nivel-avancado

#nivel-basico
[heading] Ótimo começo!

#nivel-avancado
[heading] Você já é expert!

[links]Lista de links ("link na bio")

Pilha de botões onde cada um só abre uma URL em nova aba — sem avançar step, sem coletar resposta. Diferente de [escolha], que sempre serve pra ramificar/coletar uma resposta. Ideal pra usar o quiz inteiro como página de links.

- Rótulo | https://destino.comcada link do bloco (rótulo + URL de destino)

layoutlista · grade· padrão: lista

imagenssim · nao — ativa modo imagem (adicionado depois, no editor visual)· padrão: nao

setasim · nao — mostra uma setinha de "abre em outra aba" em cada botão· padrão: sim

posicaoesquerda · direita — lado da seta· padrão: direita

[links] Meus links
- Meu site | https://meusite.com
- Instagram | https://instagram.com/meuperfil
- Meu canal no YouTube | https://youtube.com/@meucanal
{layout: grade, seta: nao}

[texto]Campo de texto

Campo de resposta curta (uma linha).

placeholdertexto livre· padrão: Sua resposta...

[texto] Qual é o nome da sua empresa?
{placeholder: Ex: Minha Empresa Ltda}

[area]Área de texto

Campo de resposta longa (múltiplas linhas).

placeholdertexto livre· padrão: Escreva aqui...

obrigatoriosim · nao· padrão: sim

[area] Descreva seu maior desafio hoje
{placeholder: Escreva com detalhes, obrigatorio: sim}

[nps]NPS

Escala de Net Promoter Score de 0 a 10.

mintexto livre· padrão: Péssimo

maxtexto livre· padrão: Excelente

[nps] De 0 a 10, como você avalia seu negócio?
{min: Péssimo, max: Excelente}

[avaliacao]Avaliação

Escala de avaliação com estrelas, corações ou números.

escala5 · 7 · 10· padrão: 5

iconeestrelas · coracoes · numeros· padrão: estrelas

min / maxtexto livre· padrão: Ruim / Ótimo

[avaliacao] Como você avalia este produto?
{escala: 5, icone: estrelas, min: Ruim, max: Ótimo}

[lead]Captura de Lead

Formulário de captura de dados. Campos aceitos: nome, email, whatsapp, cpf, cnpj, estado, cidade, personalizado.

{obrigatorio}adicionar ao final do campo· padrão: opcional

botaotexto do botão de envio· padrão: Continuar

[lead] Preencha seus dados:
- nome: Seu nome completo {obrigatorio}
- email: Seu melhor e-mail {obrigatorio}
- whatsapp: WhatsApp com DDD
{botao: Quero meu resultado}

[carregamento]Carregamento

Tela animada de loading com mensagens sequenciais.

duracaoex: 3s · 5s · 2000ms· padrão: 3s

[carregamento] Analisando suas respostas...
- Processando seu perfil
- Calculando resultados
- Preparando diagnóstico
{duracao: 3s}

[insights]Insights

Cards de diagnóstico com emoji, título e descrição.

- emoji | Título | Descriçãoformato obrigatório dos cards

[insights] Seu diagnóstico:
- 🎯 | Foco | Você tem clareza de onde quer chegar
- 💡 | Oportunidade | Há margem para crescer em vendas

[depoimentos]Depoimentos

Lista de depoimentos de clientes.

- Nome | Cargo | Depoimentoformato obrigatório

[depoimentos]
- Maria Silva | CEO da Empresa | Esse quiz mudou minha visão!
- João Costa | Consultor | Resultado incrível e preciso.

[carrossel]Carrossel

Sequência de imagens com título e subtítulo opcionais. Com {estilo: marquee}, {autoplay: nao} pausa o movimento e vira navegação manual (arrastar ou clicar nas bolinhas); {direcao} controla o sentido do movimento contínuo.

proporcao16/9 · 4/3 · 1/1· padrão: 16/9

autoplaysim · nao· padrão: sim

estiloslide · marquee· padrão: slide

direcaodireita-esquerda · esquerda-direita· padrão: direita-esquerda

[carrossel]
{proporcao: 16/9, autoplay: sim}
- https://url.com/img1.jpg | Título | Subtítulo
- https://url.com/img2.jpg

[imagem]Imagem

Exibe uma imagem com controle de tamanho e formato.

tamanhocompleto · medio · pequeno· padrão: completo

formatoretangulo · arredondado · circulo· padrão: retangulo

alinhamentoesquerda · centro · direita· padrão: esquerda

[imagem] https://url.com/foto.jpg
{tamanho: medio, formato: arredondado, alinhamento: centro}

[video]Vídeo

Incorpora um vídeo do YouTube ou Vimeo.

proporcao16/9 · 9/16 · 1/1· padrão: 16/9

controlessim · nao· padrão: sim

autoplay / mudo / loopsim · nao· padrão: nao

[video] https://youtube.com/embed/SEU_ID
{proporcao: 16/9, controles: sim, autoplay: nao}

[preco]Preço / Plano

Card de preço com badge, nome do plano, preço (com riscado opcional), lista de itens incluídos/excluídos e botão de ação. Ideal antes do checkout.

titulonome do plano· padrão: Plano Pro

precovalor exibido· padrão: R$ 97

originalpreço riscado (opcional)· padrão: —

labelsufixo do preço (ex: /mês)· padrão: —

badgerótulo no topo (ex: Mais popular)· padrão: —

botaotexto do botão· padrão: Quero agora

acaowhatsapp · url · (vazio = avança)· padrão: avança

- ✅ texto ou ❌ textoitens incluídos ou não na lista

[preco]
titulo: Plano Pro
subtitulo: Tudo que você precisa para crescer
preco: R$ 97
original: R$ 197
label: /mês
botao: Quero agora
badge: Mais popular
{acao: whatsapp, numero: 5511999999999, mensagem: Quero o plano!}
- ✅ Acesso completo ao conteúdo
- ✅ Suporte prioritário
- ✅ Certificado de conclusão
- ❌ Mentoria individual

[argumentos]Argumentos / Benefícios

Lista de argumentos de venda com emoji, título e descrição. Ideal antes de um CTA ou checkout para reforçar benefícios.

- emoji | Título | Descriçãoformato dos itens (descrição é opcional)

layoutempilhado · lado-a-lado· padrão: empilhado

[argumentos] Por que nos escolher?
{layout: lado-a-lado}
- ✅ | Resultado comprovado | Centenas de clientes transformados
- ⚡ | Rápido e simples | Veja resultados em dias
- 🔒 | Garantia total | 7 dias ou reembolso

[faq]FAQ / Perguntas frequentes

Accordion de perguntas e respostas. Quebra objeções antes do checkout. O respondente clica para expandir cada resposta.

- Pergunta? | Resposta.formato dos itens separado por pipe |

[faq] Perguntas frequentes
- Como funciona? | Você responde e recebe um diagnóstico personalizado.
- Quanto tempo leva? | Apenas alguns minutos pelo celular.
- É gratuito? | Sim, completamente gratuito.

[grafico]Gráfico

Gráfico de barras horizontais ou rosca (donut) com legenda colorida. Ideal para exibir resultados, pontuações ou distribuição de respostas ao final do quiz.

tipobarras (padrão) · rosca· padrão: barras

unidadesufixo do valor (ex: %, pts)· padrão: —

valoressim · nao — exibe ou oculta os valores· padrão: sim

- Label | valor | #corcor é opcional por item

// Barras:
[grafico]
titulo: Resultado por área
{tipo: barras, unidade: %}
- Marketing | 85
- Vendas | 72
- Operações | 58
- Financeiro | 91

// Rosca com cores:
[grafico]
titulo: Distribuição
{tipo: rosca, unidade: %}
- Iniciante | 35 | #10b981
- Intermediário | 45 | #f59e0b
- Avançado | 20 | #6366f1

[timer]Timer / Contagem regressiva

Contagem regressiva fixa no topo ou rodapé da tela, personalizável em cor. Diferente dos outros blocos, não empilha no fluxo do step — fica grudada na tela. A contagem começa quando a pessoa entra no quiz (não é um horário fixo) e não reinicia ao trocar de step.

minutosduração da contagem em minutos· padrão: 10

posicaotopo · rodape· padrão: topo

escopostep (só nesse step) · funil (persiste em todo o quiz, sem reiniciar)· padrão: step

esgotadomensagem (mostra {mensagem}) · esconder· padrão: mensagem

mensagemtexto exibido quando a contagem chega a zero· padrão: Tempo esgotado

[timer] Oferta expira em:
{minutos: 10, posicao: topo, escopo: funil}

[prova-social]Prova social

Popup fixo simulando 'X pessoas fazendo algo agora' — aparece, some e reaparece com um número novo em intervalos. Não empilha no fluxo do step. Com {usar-nomes: sim}, cicla por uma lista de nomes reais em vez de uma contagem — formato tipo '{nome} acabou de comprar {produto}'.

{n} no textosubstituído por um número aleatório a cada ciclo (modo contagem)

min / maxfaixa do número sorteado (modo contagem)· padrão: 8 / 34

usar-nomessim (cicla por {nomes} em vez de contagem) · não· padrão: não

nomeslista de nomes separados por "|" (não vírgula) — usado com {nome} no texto

produtosubstitui {produto} no texto

posicaosuperior-esquerda · superior-direita · inferior-esquerda · inferior-direita· padrão: inferior-esquerda

intervalosegundos entre aparições· padrão: 6

escopostep · funil· padrão: step

[prova-social] {n} pessoas estão respondendo esse quiz agora
{min: 8, max: 34, posicao: inferior-esquerda, intervalo: 6}

// formato com nomes reais:
[prova-social] {nome} acabou de comprar {produto}
{usar-nomes: sim, nomes: João Neto | Ana Paula | Carlos Eduardo, produto: Bio Extratus}

[antes-depois]Antes / Depois

Slider interativo de comparação entre duas imagens. O respondente arrasta para revelar antes e depois. Ideal para mostrar transformações, resultados ou comparativos visuais.

antesURL da imagem antes (obrigatório)

depoisURL da imagem depois (obrigatório)

titulotexto acima do slider (opcional)· padrão: —

label-antesrótulo sobre a imagem antes· padrão: Antes

label-depoisrótulo sobre a imagem depois· padrão: Depois

[antes-depois]
titulo: Veja a transformação
antes: https://url.com/before.jpg
depois: https://url.com/after.jpg
label-antes: Antes
label-depois: Depois

[checkout]Checkout

Botão de compra integrado com plataformas de pagamento.

plataformahotmart · kiwify · eduzz · monetizze· padrão: hotmart

urlURL do produto· padrão: obrigatório

[checkout]
titulo: Oferta especial para você
subtitulo: Apenas hoje
botao: Garantir minha vaga
{plataforma: hotmart, url: https://checkout.hotmart.com/...}

Exemplo completo

// Quiz de diagnóstico para coaches

[cta]
titulo: Descubra seu perfil de liderança!
subtitulo: Responda 4 perguntas rápidas e receba seu diagnóstico
botao: Quero descobrir

[escolha] Qual é o seu maior desafio como líder?
- Comunicação com o time -> #desafio-comunicacao
- Gestão de tempo -> #desafio-tempo
- Resultados e metas -> #desafio-resultados

#desafio-comunicacao
[heading] Comunicação é essencial!
+[escolha] Com que frequência você dá feedbacks?
- Semanalmente
- Mensalmente
- Raramente

#desafio-tempo
[heading] Tempo é o recurso mais valioso!
+[escolha] Como você prioriza suas tarefas?
- Por urgência
- Por impacto
- Ainda estou aprendendo

#desafio-resultados
[heading] Foco em resultados é chave!
+[escolha] Você usa OKRs ou metas mensuráveis?
- Sim, regularmente
- Às vezes
- Ainda não

[lead] Quase lá, {{nome}}! Preencha seus dados:
- nome: Seu nome completo {obrigatorio}
- email: Seu melhor e-mail {obrigatorio}
- whatsapp: WhatsApp com DDD

[carregamento] Analisando seu perfil de liderança...
- Processando suas respostas
- Identificando seu estilo
- Preparando seu diagnóstico
{duracao: 4s}

[insights] Seu diagnóstico, {{nome}}:
- 🎯 | Foco | Você tem visão clara de onde quer chegar
- 💡 | Oportunidade | Comunicação pode ser sua alavanca de crescimento
- 🚀 | Próximo passo | Implemente feedbacks semanais com seu time

[checkout]
titulo: Parabéns, {{nome}}! Você tem potencial incrível.
subtitulo: Quer acelerar seus resultados? Conheça nosso programa.
botao: Quero saber mais
{plataforma: hotmart, url: https://checkout.hotmart.com/seu-produto}

QuizzBuilder · QBML v1 · Voltar ao dashboard