Skip to Content
Exportar e imprimirIncorporar num site

Incorporar num site

Na aba Exportar há a opção de gerar um trecho de HTML pronto para colar no seu site.

O que o snippet tem

Uma tag <img> com o SVG do QR embutido como data URL:

<img src="data:image/svg+xml;charset=utf-8,%3Csvg…" alt="Meu QR" width="1000" height="1000" loading="lazy" />

O alt vem do nome que você deu ao QR, e o loading="lazy" já vem incluído.

O QR inteiro está dentro do HTML. Não há requisição para o QRcode, para CDN nenhuma, para servidor nenhum.

Isso significa que:

  • não depende de nós. Se este produto sair do ar amanhã, o seu QR continua aparecendo no seu site;
  • não quebra por link morto, que é o que acontece quando se aponta uma <img> para o arquivo hospedado de um serviço gratuito;
  • carrega instantâneo, sem requisição extra;
  • funciona offline e em e-mail, PDF e qualquer lugar que renderize HTML.

Essa escolha é deliberada. Um QR impresso ou publicado deve durar mais que o serviço que o gerou.

O tamanho do snippet

O trecho é grande — alguns kilobytes de texto — porque carrega o desenho inteiro. É normal.

Para reduzir:

  • exporte com uma resolução menor antes de gerar o snippet (o SVG é vetorial, mas o valor influencia os atributos);
  • prefira um design mais simples: gradiente e logo aumentam bastante o SVG;
  • se o logo for uma imagem grande, ele é embutido junto — considere um logo em SVG simples.

Se o peso incomodar, salve o arquivo SVG e sirva do seu próprio servidor.

Ajustar o tamanho na página

Os atributos width e height vêm da resolução escolhida. Para controlar pelo CSS, sobrescreva:

<img src="data:image/svg+xml;…" alt="Meu QR" style="width: 200px; height: auto;" />

Mantenha o quadrado: distorcer um QR quebra a leitura.

Acessibilidade

O alt já vem preenchido, mas melhore-o: ele deve dizer para onde o código leva, não que ele é um QR.

Em vez dePrefira
alt="QR Code"alt="QR Code para o cardápio"
alt="qr"alt="QR Code do Wi-Fi da loja"

E lembre que quem está no site não consegue escanear a própria tela. Sempre ofereça o link em texto ao lado do QR — o QR serve para quem vê a tela de outro dispositivo, ou para quem imprime a página.

Quando usar a API no lugar

O snippet é estático: o QR é aquele, para sempre.

Se você precisa gerar QRs diferentes por usuário, por pedido ou por página, use a API — ela devolve o SVG por HTTP e serve num <img> direto. Disponível nos planos Pro e Business.

Last updated on