Veja como implementar QR Codes em seu site em 5 minutos

Introdução: o que é QR Code?

QR Code significa "Quick Response Code" (Código de Resposta Rápida). Ele é como um código de barras, mas pode guardar mais informações, como um endereço de um site. Para usá-lo, basta apontar a câmera do celular para o código.

Neste tutorial, veremos que os QR Codes vão muito além de criar links para sites. Exploraremos diferentes formas de uso para você se tornar um especialista no assunto.

Exemplo de Código Pronto para Uso

A seguir, temos um exemplo prático de como criar QR Codes para diferentes finalidades:

<p>URL:</p>
<img-qrcode type="url" url="https://www.mco2.com.br"></img-qrcode>

<p>Contato (vCard):</p>
<img-qrcode type="contact" fullname="Nome Completo" phone="+5511999999999" email="email@exemplo.com"></img-qrcode>

<p>WiFi:</p>
<img-qrcode type="wifi" ssid="NomeDaRede" password="SenhaDaRede" encryption="WPA"></img-qrcode>

<p>Geolocalização:</p>
<img-qrcode type="geo" latitude="37.3349" longitude="-122.0090"></img-qrcode>

<p>E-mail:</p>
<img-qrcode type="email" email="email@exemplo.com"></img-qrcode>

<p>SMS:</p>
<img-qrcode type="sms" phone="+5511999999999"></img-qrcode>

<p>Ligação Telefônica:</p>
<img-qrcode type="call" phone="+5511999999999"></img-qrcode>

<p>Texto simples:</p>
<img-qrcode type="text" text="Seu texto aqui."></img-qrcode>

<script>
  class ImgQRCode extends HTMLElement {
    constructor() {
      super();
      const width = Math.min(Math.max(this.getAttribute('width') || 250, 250), 500);
      const chl = this.getTemplate(this.getAttribute('type') || 'text');
      if (chl) this.innerHTML = `<img src="https://chart.googleapis.com/chart?cht=qr&chs=${width}x${width}&chl=${encodeURIComponent(chl)}" width="${width}" height="${width}">`;
    }

    getTemplate(type) {
      const templates = {
        url: `${this.getAttribute('url')}`,
        contact: `BEGIN:VCARD\nVERSION:3.0\nFN:${this.getAttribute('fullname')}\nTEL:${this.getAttribute('phone')}\nEMAIL:${this.getAttribute('email')}\nEND:VCARD`,
        wifi: `WIFI:S:${this.getAttribute('ssid')};T:${this.getAttribute('encryption')};P:${this.getAttribute('password')};;`,
        geo: `GEO:${this.getAttribute('latitude')},${this.getAttribute('longitude')}`,
        email: `MATMSG:TO:${this.getAttribute('email')};`,
        sms: `SMSTO:${this.getAttribute('phone')}`,
        call: `TEL:${this.getAttribute('phone')}`,
        text: `${this.getAttribute('text')}`
      };
      return templates[type] || '';
    }
  }
  window.customElements.define('img-qrcode', ImgQRCode);
</script>

Explicando o Código

Definição da Classe ImgQRCode

A classe ImgQRCode é uma parte fundamental deste código. Ela é usada para criar um novo elemento HTML personalizado que gera QR Codes automaticamente. Vamos ver como ela é construída:

<script>
  class ImgQRCode extends HTMLElement {
    constructor() {
      super();
      const width = Math.min(Math.max(this.getAttribute('width') || 250, 250), 500);
      const chl = this.getTemplate(this.getAttribute('type') || 'text');
      if (chl) this.innerHTML = `<img src="https://chart.googleapis.com/chart?cht=qr&chs=${width}x${width}&chl=${encodeURIComponent(chl)}" width="${width}" height="${width}">`;
    }

    getTemplate(type) {
      const templates = {
        url: `${this.getAttribute('url')}`,
        contact: `BEGIN:VCARD\nVERSION:3.0\nFN:${this.getAttribute('fullname')}\nTEL:${this.getAttribute('phone')}\nEMAIL:${this.getAttribute('email')}\nEND:VCARD`,
        wifi: `WIFI:S:${this.getAttribute('ssid')};T:${this.getAttribute('encryption')};P:${this.getAttribute('password')};;`,
        geo: `GEO:${this.getAttribute('latitude')},${this.getAttribute('longitude')}`,
        email: `MATMSG:TO:${this.getAttribute('email')};`,
        sms: `SMSTO:${this.getAttribute('phone')}`,
        call: `TEL:${this.getAttribute('phone')}`,
        text: `${this.getAttribute('text')}`
      };
      return templates[type] || '';
    }
  }
  window.customElements.define('img-qrcode', ImgQRCode);
</script>

Neste código, o construtor inicializa o elemento. Ele define a largura do QR Code, escolhe o template baseado no tipo de QR Code que você quer criar (por exemplo, URL, contato, WiFi, etc.) e gera o QR Code utilizando o Google Chart API.

QR Code para URL

<img-qrcode type="url" url="https://www.mco2.com.br"></img-qrcode>

Esse código cria um QR Code que, quando escaneado, leva diretamente ao site especificado na propriedade url.

QR Code para Contato (vCard)

<img-qrcode type="contact" fullname="Nome Completo" phone="+5511999999999" email="email@exemplo.com"></img-qrcode>

Esse QR Code, quando escaneado, permite salvar diretamente no dispositivo o contato com nome, telefone e e-mail fornecidos. O "+55" é o código do país (Brasil), seguido do DDD com dois dígitos (por exemplo, "11" para São Paulo) e o número de telefone.

QR Code para WiFi

<img-qrcode type="wifi" ssid="NomeDaRede" password="SenhaDaRede" encryption="WPA"></img-qrcode>

Este QR Code armazena o SSID da rede, a senha e o tipo de criptografia. Quando escaneado, permite a conexão automática à rede WiFi especificada.

QR Code para Geolocalização

<img-qrcode type="geo" latitude="37.3349" longitude="-122.0090"></img-qrcode>

Esse código, ao ser escaneado, exibe a localização geográfica definida pelas coordenadas de latitude e longitude no mapa do dispositivo.

QR Code para E-mail

<img-qrcode type="email" email="email@exemplo.com"></img-qrcode>

Ao escanear este QR Code, o aplicativo de e-mail do dispositivo é aberto, com o campo de destinatário preenchido com o endereço de e-mail especificado.

QR Code para SMS

<img-qrcode type="sms" phone="+5511999999999"></img-qrcode>

Este QR Code prepara uma mensagem de texto para um número de telefone. O "+55" é o código do país (Brasil), seguido do DDD com dois dígitos (por exemplo, "11" para São Paulo) e o número de telefone. Ao escanear esse QR Code, o aplicativo de mensagens do dispositivo abre com o número já preenchido, pronto para você escrever e enviar sua mensagem.

QR Code para Ligação Telefônica

<img-qrcode type="call" phone="+5511999999999"></img-qrcode>

Ao escanear este QR Code, o dispositivo sugere fazer uma ligação para o número especificado. Assim como no exemplo de SMS, o "+55" indica o código do país (Brasil), seguido do DDD com dois dígitos e o número do telefone. Isso permite fazer a ligação diretamente, sem a necessidade de digitar o número.

Criando um QR Code para Texto Simples

<img-qrcode type="text" text="Seu texto aqui."></img-qrcode>

Este QR Code, quando escaneado, mostra o texto especificado diretamente no dispositivo.

Conclusão

Através deste tutorial, demonstramos como criar QR Codes para uma variedade de usos, desde abrir URLs até compartilhar contatos, conectar-se a redes WiFi, localizar endereços, enviar e-mails e mensagens, fazer chamadas telefônicas, e exibir textos simples. Os códigos fornecidos estão prontos para uso e podem ser facilmente integrados em seus projetos web ou aplicativos.

Encorajamos você a utilizar esses exemplos como ponto de partida para suas próprias criações. Os QR Codes são ferramentas poderosas que podem melhorar significativamente a interatividade e a funcionalidade de seus projetos. Experimente, modifique e veja como os QR Codes podem ser úteis e divertidos em diferentes contextos.