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.
Por que embutido, e não um link
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 de | Prefira |
|---|---|
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.