Todo site de utilidade pública, blog de tecnologia, agência ou pequeno negócio recebe visitantes que precisam gerar um QR Code rápido — e hoje eles saem do seu site pra fazer isso em outro lugar. Cada saída é uma visita que não volta.

A solução é simples: colocar um gerador de QR Code dentro do seu próprio site, como um widget. O visitante gera o código sem sair da página, você ganha uma ferramenta útil que atrai visitas recorrentes (e às vezes até um link de quem recomenda a página), e tudo isso sem escrever uma linha de backend.

Este tutorial mostra o jeito de 1 minuto: copiar um snippet de embed e colar no seu HTML, WordPress, Wix ou Squarespace.

Por que colocar um gerador de QR Code no seu site

  • Engajamento: o visitante interage com a página em vez de só ler e sair.
  • Retenção: ele resolve o problema (gerar o QR) sem abrir uma nova aba em outro site.
  • Ferramenta útil = tráfego recorrente: quem usa uma vez tende a voltar quando precisar de outro QR — e pode indicar a página pra outras pessoas.
  • Link building orgânico: ferramentas embutidas são o tipo de conteúdo que outros sites linkam naturalmente.
  • Zero manutenção: o widget roda no servidor do Code2Scan. Você só cola o código uma vez.

O jeito de 1 minuto: copiar e colar o código de embed

Não é preciso instalar nada, criar conta ou escrever JavaScript. É um único bloco de HTML — um <iframe> — que você cola onde quiser que o gerador apareça:

<iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>

Cada atributo tem um papel:

Atributo Função
src Endereço do widget — não precisa mudar
width="100%" Ocupa a largura do contêiner onde foi colado
height="400" Altura em pixels — ajuste conforme o layout
style="max-width:340px" Evita que o widget fique gigante em telas largas
loading="lazy" Só carrega quando o visitante rola até ele — não pesa a página
title="..." Acessibilidade: descreve o iframe pra leitores de tela

Onde colar e o que você ganha

Onde colar Benefício
Rodapé do blog Ferramenta útil ao lado do conteúdo, aumenta o tempo na página
Página de contato Visitante gera QR do seu endereço ou link enquanto já está lá
Post sobre marketing digital Contexto perfeito — quem lê sobre QR já quer testar um
Landing page da agência Demonstra capacidade técnica sem custo de desenvolvimento
Painel interno / intranet Equipe gera QRs sem depender de outra ferramenta

Como adicionar no HTML puro

Se seu site é HTML estático (ou um template customizado), cole o <iframe> direto onde quiser que o widget apareça — dentro de uma <div>, uma seção ou uma sidebar:

<section>
  <h2>Gerador de QR Code</h2>
  <iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>
</section>

Salve o arquivo, publique e pronto — o widget já está funcionando.

Como adicionar no WordPress

  1. Edite a página ou post onde o widget vai aparecer.
  2. Adicione um bloco "HTML personalizado" (no editor de blocos) ou use um widget de "Texto/HTML" (em temas com editor clássico).
  3. Cole o código do <iframe> dentro do bloco.
  4. Clique em Visualizar pra conferir antes de publicar.
  5. Publique a página.

Não é preciso plugin nenhum — o bloco HTML nativo do WordPress já resolve.

Como adicionar no Wix ou Squarespace

Ambos permitem inserir HTML customizado através de um elemento específico:

  • Wix: adicione o elemento "Embed" → "Embed HTML", cole o código do iframe e ajuste o tamanho do elemento na tela.
  • Squarespace: adicione um bloco de conteúdo do tipo "Código" (Code Block), cole o snippet e salve.

Em ambos os casos, o widget se adapta ao espaço reservado — não precisa mexer no width="100%".

É grátis, sem cadastro e funciona em qualquer CMS

O widget é público e gratuito: não pede login, não pede chave de API, não tem limite de uso. Funciona em qualquer plataforma que aceite HTML — WordPress, Wix, Squarespace, Webflow, Shopify, Notion, ou um site feito à mão. Se seu visitante só precisa de um QR pontual sem instalar nada no próprio site, ele também pode usar direto o gerador de QR Code grátis — mas ter o widget embutido evita esse desvio.

Personalização básica: largura e altura

Os dois ajustes mais comuns:

  • Largura menor: troque width="100%" por um valor fixo, como width="340", se o widget estiver numa sidebar estreita.
  • Altura maior ou menor: o valor height="400" funciona bem na maioria dos casos, mas se o widget cortar conteúdo, aumente para 450 ou 500.

Evite forçar dimensões muito pequenas (abaixo de 300px de largura) — o gerador fica apertado e difícil de usar no celular.

Passo a passo completo

  1. Acesse a página do widget de QR Code e copie o código de embed já pronto.
  2. Cole o <iframe> no HTML da sua página, no bloco HTML do WordPress, ou no elemento de código do Wix/Squarespace.
  3. Ajuste width e height se necessário pro seu layout.
  4. Salve e publique a página.
  5. Teste no celular e no computador — gere um QR de verdade e escaneie pra confirmar que funciona.

Erros comuns

❌ Esquecer o loading="lazy"

Sem esse atributo, o iframe carrega assim que a página abre, mesmo que o visitante nunca role até ele. Isso pesa o carregamento inicial à toa.

❌ Colar o iframe sem max-width

Em telas grandes, um width="100%" sem limite de largura máxima estica o widget de forma exagerada. Mantenha o style="max-width:340px" do snippet original.

❌ Achar que precisa de conta ou chave de API

O widget é público — não existe passo de autenticação. Se algum tutorial pedir isso, está desatualizado ou é outro serviço.

❌ Não testar em mobile

O widget é responsivo, mas o contêiner onde você colou pode não ser. Sempre confira como ele aparece no celular antes de considerar concluído.

❌ Confundir o widget com QR Code rastreável

O widget gera QR estático, direto no navegador do visitante. Se você precisa saber quantas pessoas escanearam cada QR, isso é um recurso diferente — veja o guia de QR Code rastreável com UTM.

Resumo

  1. Copie o snippet <iframe> do widget de QR Code — não precisa de conta.
  2. Cole no HTML puro, no bloco HTML do WordPress, ou no elemento de código do Wix/Squarespace.
  3. O loading="lazy" evita que o widget pese o carregamento da página.
  4. Ajuste width e height conforme o espaço disponível no layout.
  5. É grátis, funciona em qualquer CMS e não expõe seus dados.
  6. Pra rastreamento de scans ou destino editável, isso já é caso de QR Code dinâmico — o widget cobre a geração simples e gratuita.

Quer testar antes de colar no seu site? Veja o widget de QR Code em ação e copie o código de embed — leva menos de um minuto para colocar no ar. Se preferir gerar um QR Code avulso agora mesmo, use o gerador de QR Code.