Como colocar um quiz no link na bio que manda o cliente direto pro seu WhatsApp

IMG_9717

Micaela Soares

Fundadora

Terminou de montar? Antes de comemorar, faz um teste. Abre o seu link na bio no celular e responde o quiz do começo ao fim, como se você fosse a sua cliente. É no celular que ela vai responder, e é lá que qualquer detalhe fora do lugar aparece. Uma última coisa que costuma fazer diferença. Não deixe o quiz parado depois de publicar. Toda vez que uma pessoa te chamar no WhatsApp, olha a resposta que ela deu na primeira pergunta. Se muita gente estiver marcando a mesma opção, você descobriu qual dor mais aparece no seu público, e essa informação vale para o seu conteúdo, para a sua oferta e para o seu site inteiro. Se você ainda não tem onde hospedar a sua página, o botão da Hostinger está lá dentro do mapa, no último passo. E se você quiser aprender a criar sites completos do zero, é só se inscrever no canal Descomplicando Sites, que toda semana sai um tutorial novo por lá.
Neste artigo

    Você já reparou que muita gente entra no seu link na bio, olha os botões e sai sem falar com você? O problema quase nunca é o botão. É que a pessoa não sabe qual dos seus serviços resolve o problema dela, e ninguém manda mensagem para perguntar uma coisa que não sabe explicar.

    O quiz resolve isso de um jeito simples. Em vez de a pessoa escolher um botão no escuro, ela responde quatro perguntas rápidas sobre o que está sentindo. No final, o WhatsApp abre com o nome dela e todas as respostas já escritas na mensagem. Você recebe um contato que já chegou explicado, e ela sente que foi ouvida antes mesmo de falar com você.

    E o melhor: você não precisa saber programar nem começar um site do zero. Você já tem o seu link na bio pronto, e a gente vai só encaixar o quiz dentro dele usando a inteligência artificial.

    No mapa abaixo está o passo a passo completo. Clique em cada etapa para abrir o conteúdo, os prompts prontos e o arquivo do quiz para baixar.

    Como colocar um quiz no seu link na bio

    A pessoa responde 4 perguntas e cai direto no seu WhatsApp com tudo respondido.

    Pegue o código do quiz. Você pode baixar o arquivo ou copiar o código direto daqui, o resultado é o mesmo. Se preferir baixar, dá para abrir o arquivo no navegador e testar o quiz antes de mexer em qualquer coisa.
    Ou copie o código do quiz
    <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quiz de avaliacao para WhatsApp</title> <style> /* ============================================================ BLOCO 1 DE 3: CSS DO QUIZ Cole tudo isto dentro da tag <style> do seu link na bio, ou logo antes do </head>. ============================================================ */ /* Quiz Avaliação – Clínica Tavares */ …

    O arquivo vem separado em três blocos marcados com comentários: o CSS, o HTML e o JavaScript. Você não precisa entender o código, porque a IA vai saber onde encaixar cada bloco.

    Entenda o caminho que o seu cliente faz dentro do quiz antes de personalizar. Assim você sabe o que precisa trocar.
    Um botão de destaque aparece na sua página e, ao clicar, o quiz abre por cima dela.
    A pessoa responde 4 perguntas, uma de cada vez, com uma barra de progresso no topo.
    Na tela final, o quiz pede só o nome dela.
    Ao clicar no botão, o WhatsApp abre com uma mensagem já escrita, contendo o nome e todas as respostas.

    Repare que o quiz pede apenas o nome, e não o número de telefone. Isso acontece porque o contato chega automaticamente quando a pessoa envia a mensagem pelo WhatsApp, o que reduz o esforço dela e aumenta a chance de ela concluir.

    Abra o ChatGPT e envie dois arquivos: o HTML do seu link na bio e o HTML do quiz. Antes de mexer no HTML, escolha um dos três caminhos abaixo para definir as perguntas do seu quiz.
    Caminho 1: você mesma escreve as perguntas. Se você já conhece bem o seu cliente e sabe o que ele sente antes de te procurar, escreva as perguntas você mesma. Siga esta sequência, que é a que conduz a pessoa até querer falar com você. Pergunta 1: o incômodo que ela sente hoje. Pergunta 2: o quanto esse incômodo atrapalha a vida dela. Pergunta 3: o que ela quer alcançar. Pergunta 4: para quando ela pensa em resolver. Cada pergunta precisa de 3 ou 4 opções de resposta, escritas do jeito que a sua cliente fala. Com elas prontas, pule direto para o prompt de inserir o quiz.
    Caminho 2: a IA lê o seu site ou o seu Instagram. Use este caminho se você já tem um site ou um perfil com conteúdo sobre o seu trabalho. A IA lê o endereço e monta as perguntas a partir do que encontrar lá.
    Prompt: A IA lê o seu site
    Acesse este endereço e leia todo o conteúdo dele: [cole aqui o seu site ou o seu Instagram]

    A partir do que você encontrar lá, crie as perguntas de um quiz de captação de clientes para esse negócio.

    Antes de escrever qualquer pergunta, me diga em duas linhas o que você entendeu sobre esse negócio e quem é o cliente dele. Se o endereço não tiver informação suficiente, me pergunte o que falta em vez de inventar.

    Regras das perguntas:
    1. São 4 perguntas, com 3 ou 4 opções de resposta cada.
    2. A pergunta 1 fala do incômodo que o cliente sente hoje.
    3. A pergunta 2 mostra o quanto esse incômodo atrapalha a vida dele.
    4. A pergunta 3 descobre o que ele quer alcançar.
    5. A pergunta 4 descobre para quando ele pensa em resolver.
    6. Escreva do jeito que o cliente fala, e não com os termos técnicos do negócio.
    7. Nenhuma pergunta pode pedir dado pessoal, valor de dinheiro ou informação constrangedora.

    Crie também:
    Texto do botão que abre o quiz.
    Título da tela final que pede o nome.
    Frase abaixo do título explicando o que a pessoa recebe depois de enviar.

    Me mostre tudo primeiro e pergunte se eu aprovo antes de mexer no HTML.
    Se a IA disser que não conseguiu abrir o endereço, copie o texto da sua página e cole direto na conversa, ou use o Caminho 3.
    Caminho 3: você descreve o negócio e a IA pensa. Use este caminho se o seu negócio é novo, se você ainda não tem site, ou se o seu Instagram tem poucas publicações. Você responde quatro informações e a IA escreve as perguntas.
    Prompt: Você descreve o negócio
    Crie as perguntas de um quiz de captação de clientes para o meu negócio.

    Meu nicho: [preencher]
    O que eu vendo: [preencher]
    Meu cliente ideal: [preencher]
    A dor mais comum que ele me relata: [preencher]

    Se alguma dessas informações estiver vaga demais para você escrever boas perguntas, me pergunte antes de escrever, em vez de inventar.

    Regras das perguntas:
    1. São 4 perguntas, com 3 ou 4 opções de resposta cada.
    2. A pergunta 1 fala do incômodo que o cliente sente hoje.
    3. A pergunta 2 mostra o quanto esse incômodo atrapalha a vida dele.
    4. A pergunta 3 descobre o que ele quer alcançar.
    5. A pergunta 4 descobre para quando ele pensa em resolver.
    6. Escreva do jeito que o cliente fala, e não com os termos técnicos do negócio.
    7. Nenhuma pergunta pode pedir dado pessoal, valor de dinheiro ou informação constrangedora.

    Crie também:
    Texto do botão que abre o quiz.
    Título da tela final que pede o nome.
    Frase abaixo do título explicando o que a pessoa recebe depois de enviar.

    Me mostre tudo primeiro e pergunte se eu aprovo antes de mexer no HTML.
    Quanto mais específica for a sua resposta, melhores ficam as perguntas. Em vez de escrever nutricionista, escreva nutricionista que atende mulheres cansadas de dietas restritivas.

    Nos Caminhos 2 e 3 a IA mostra as sugestões antes de mexer no código. Leia com calma e ajuste o que não combinar com o seu público, porque você conhece o seu cliente melhor do que ela.

    Com as perguntas definidas, cole o prompt abaixo e preencha os campos entre colchetes.
    Prompt: Inserir o quiz
    Estou enviando dois arquivos: o HTML do meu link na bio e o HTML de um quiz.

    1. Insira o quiz dentro do meu link na bio. O botão que abre o quiz deve aparecer logo acima dos meus botões de link, e o quiz deve abrir em um popup por cima da página.

    2. O arquivo do quiz está dividido em três blocos marcados com comentários: CSS, HTML e JavaScript. Coloque cada bloco no lugar certo do meu arquivo.

    3. Adapte as cores e as fontes do quiz para combinar com as cores e as fontes do meu link na bio.

    4. Troque o texto do botão que abre o quiz por: [preencher]

    5. Troque as perguntas do quiz por estas:
    Pergunta 1: [preencher] / Opções: [preencher]
    Pergunta 2: [preencher] / Opções: [preencher]
    Pergunta 3: [preencher] / Opções: [preencher]
    Pergunta 4: [preencher] / Opções: [preencher]
    Título da tela final: [preencher]
    Frase abaixo do título: [preencher]

    6. No bloco DSTQ_CONFIG, troque o número do WhatsApp por [preencher] (código do país e DDD, só números) e o nome do negócio por [preencher].

    7. Ajuste os textos da mensagem que é montada no final para combinar com as novas perguntas.

    Não altere mais nada do meu link na bio. Me devolva o código HTML completo em um único arquivo, pronto para salvar como index.html.

    Confira se o número do WhatsApp ficou no formato certo, com código do país e DDD e só números, por exemplo 5534999990000. Se faltar um número o botão do quiz não abre a conversa.

    Com o quiz já dentro da sua página, peça para a própria IA analisar e sugerir melhorias. Ela avalia a ordem das perguntas, o texto da tela final e a mensagem que chega no seu WhatsApp.
    Prompt: Melhorar o quiz
    Você é especialista em captação de clientes para negócios locais. Analise o quiz deste HTML e me ajude a melhorar o número de pessoas que terminam e chamam no WhatsApp.

    Meu nicho: [preencher]
    O que eu vendo: [preencher]
    Meu cliente ideal: [preencher]

    Avalie e me diga:
    1. Se a primeira pergunta desperta curiosidade e faz a pessoa querer continuar.
    2. Se a ordem das perguntas conduz a pessoa do problema até a vontade de resolver.
    3. Se alguma pergunta é difícil de responder, confusa ou parece invasiva.
    4. Se as opções de resposta cobrem os casos reais do meu cliente.
    5. Se o texto da tela final justifica bem o pedido do nome.
    6. Se a mensagem que chega no meu WhatsApp me dá contexto suficiente para atender bem.

    Depois, escreva uma versão melhorada de cada pergunta, das opções e da tela final.

    Me mostre as sugestões primeiro e pergunte se eu aprovo antes de gerar o HTML final.
    Leia as sugestões antes de aceitar. Você conhece o seu cliente melhor que a IA, então aprove só o que faz sentido para o seu público.
    Antes de publicar, abra o arquivo no navegador e responda o quiz do começo ao fim, como se fosse um cliente.
    O botão de destaque abre o quiz e os seus botões de link continuam funcionando.
    As 4 perguntas aparecem na ordem certa e o botão de voltar funciona.
    O WhatsApp abre com o nome e todas as respostas na mensagem.
    A mensagem chega no número certo.
    Suba o arquivo index.html atualizado no seu subdomínio, por cima do antigo. Se você ainda não tem hospedagem, contrate a Hostinger e crie um subdomínio só para o link na bio, deixando o domínio principal reservado para o seu site completo.
    Contratar a Hostinger com descontoCupom de desconto Hostinger
    Depois de subir, abra o endereço no celular e responda o quiz de novo. É no celular que o seu cliente vai responder.

    Terminou de montar? Antes de comemorar, faz um teste. Abre o seu link na bio no celular e responde o quiz do começo ao fim, como se você fosse a sua cliente. É no celular que ela vai responder, e é lá que qualquer detalhe fora do lugar aparece.

    Uma última coisa que costuma fazer diferença. Não deixe o quiz parado depois de publicar. Toda vez que uma pessoa te chamar no WhatsApp, olha a resposta que ela deu na primeira pergunta. Se muita gente estiver marcando a mesma opção, você descobriu qual dor mais aparece no seu público, e essa informação vale para o seu conteúdo, para a sua oferta e para o seu site inteiro.

    Se você ainda não tem onde hospedar a sua página, o botão da Hostinger está lá dentro do mapa, no último passo. E se você quiser aprender a criar sites completos do zero, é só se inscrever no canal Descomplicando Sites, que toda semana sai um tutorial novo por lá.

    Foto de Micaela Soares

    Micaela Soares

    Eu sou a Micaela Soares, criadora do Descomplicando Sites. Aqui, eu ensino de forma prática e direta como criar sites profissionais usando WordPress e Elementor, mesmo que você esteja começando do zero. Ao longo da minha trajetória, transformei o que aprendi no mercado em um método simples de aplicar, focado não só em design, mas em criar sites que passam credibilidade, atraem clientes e geram resultado de verdade. Hoje, compartilho conteúdos no YouTube e aqui no blog, além de desenvolver templates e materiais que facilitam o dia a dia de quem quer trabalhar com criação de sites ou melhorar a presença online do próprio negócio.
    Foto de Micaela Soares

    Micaela Soares

    Eu sou a Micaela Soares, criadora do Descomplicando Sites. Aqui, eu ensino de forma prática e direta como criar sites profissionais usando WordPress e Elementor, mesmo que você esteja começando do zero. Ao longo da minha trajetória, transformei o que aprendi no mercado em um método simples de aplicar, focado não só em design, mas em criar sites que passam credibilidade, atraem clientes e geram resultado de verdade. Hoje, compartilho conteúdos no YouTube e aqui no blog, além de desenvolver templates e materiais que facilitam o dia a dia de quem quer trabalhar com criação de sites ou melhorar a presença online do próprio negócio.
    🎨 Parceiro oficial

    Crie sites profissionais sem código com Elementor Pro

    O construtor visual mais completo do WordPress, com mais de 100 widgets exclusivos.

    Testar agora →
    ⚡ Parceiro oficial

    Hospedagem rápida e barata para seu WordPress

    Use o cupom DESCOMPLICANDOSITES e economize até 85% na Hostinger.

    Ver oferta →

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

    Continue aprendendo