Criar um cartão de fidelidade digital: branding, Apple e Google Wallet, gerador de IA e mais de 70 personalizações

Quando cria um cartão de fidelidade digital, está, em bastidores, a construir dois passes Wallet ao mesmo tempo: um .pkpass da Apple Wallet e um loyalty object da Google Wallet. Ambos são gerados a partir de uma única configuração no painel do reloop. Este artigo guia-o pelos três caminhos para criar um programa e explica cada uma das mais de 70 opções de configuração — do branding à mecânica dos carimbos, passando pelas funcionalidades anti-fraude. Antes de começar: encontra a visão geral completa do painel no artigo pilar.

Três caminhos para o seu primeiro cartão de fidelidade

Tem três opções para criar o seu primeiro programa — e todas terminam no mesmo editor:

1. Gerador de IA a partir do URL da sua página inicial — o caminho mais rápido, ~10 segundos
2. Criar manualmente — controlo total, formulário em branco
3. Copiar de um exemplo — use um dos nossos exemplos de demonstração como modelo

Opção 1: gerador de IA

Clica em «Criar com IA», introduz o URL do seu site e o sistema faz scraping da sua página inicial. Em 10–15 segundos recebe um rascunho com:

• Nome do estabelecimento (a partir do <title> ou do título principal)
• Cor primária (a partir de tokens Tailwind, variáveis CSS ou a cor dominante do logótipo)
• Cor de destaque (complementar ou a segunda cor de UI mais forte)
• Logótipo (extraído de <link rel="apple-touch-icon"> ou da secção hero)
• Deteção do setor («café», «restaurante», «cabeleireiro», …) como sugestão para o nome do programa
• Texto de recompensa sugerido com base no setor

O rascunho é guardado durante 10 minutos no seu sessionStorage. Aterra no editor de programas normal com todos os campos pré-preenchidos — e pode ajustar tudo antes de guardar. Em caso de problemas na extração (por exemplo, um logótipo em falta), o editor mostra avisos.

Opção 2: criar manualmente

Se já tem um branding claro ou se o seu estabelecimento não está publicamente apresentado (fidelização interna, programas early-bird), começa com «Criar manualmente». Aterra no editor em branco e preenche os campos você mesmo. Duração: ~3–5 minutos para um programa padrão.

Opção 3: copiar de um exemplo

Em reloop.cards/beispiele encontra seis passes de demonstração interativos (café, restaurante, cabeleireiro, padaria, salão para cães, food truck). Cada um pode ser clonado diretamente para a sua conta como modelo — herda a mecânica e o estilo de marca e apenas os adapta ao seu estabelecimento. Poupe-se ao trabalho de desenhar do zero.

Fundamentos do programa

Independentemente do caminho que escolher, estes quatro campos são a base de qualquer programa:

Mecânica dos carimbos

Branding: cores, logótipo, fundo

O branding é o que faz a diferença entre um «cartão de fidelidade» genérico e um cartão que, à primeira vista, parece pertencer ao seu estabelecimento.

Cafe MilchschaumWallet

Cartão de fidelidade de café

O 5.º café grátis

☕☕☕☕☕

2 / 5 StempelQR-Code

Exibição dos carimbos: círculo-com-número ou apenas-imagem

Tem dois modos de exibição fundamentais:

circle-number (predefinição)

Círculos numerados clássicos. Sem carimbo: contorno. Com carimbo: preenchido com a cor de destaque e número na cor da marca. Funciona bem para 5–10 carimbos.

image-only

Apenas ícones de carimbo (emoji ou URL personalizado), sem números. Sem carimbo: escala de cinzentos. Com carimbo: cor total. Moderno e muito elegante para marcas boutique.

Ícone de meta: o símbolo para o «último carimbo»

Por predefinição, o espaço imediatamente antes da recompensa mostra uma estrela. Pode substituir este ícone:

Cafe MilchschaumWallet

Cartão de fidelidade de café

🎉 Glückwunsch

O 5.º café grátis

Bereit zum EinlösenQR-Code

Ecrã de recompensa: o momento da recompensa

Quando o cartão está completo, o passe muda para o estado de recompensa. Aqui tem tantas opções de personalização como para o estado de progresso:

Integração com a Apple Wallet: o formato .pkpass

Para os passes Wallet, a Apple exige o seu formato proprietário PassKit — um ficheiro ZIP assinado com uma estrutura rigorosamente definida. O reloop gera-o do lado do servidor:

• Pass.json com todos os campos configurados (programa, recompensa, contador, geofences, URL do serviço web para atualizações)
• Imagem de strip (1×, 2×, 3×) — renderizada via sharp a partir do seu branding
• Logótipo (1×, 2×, 3×) — dimensionado automaticamente
• Ícone (1×, 2×, 3×) — para o centro de notificações
• Assinatura com o seu certificado Pass Type (gerido pelo reloop)

Quando aciona o gerador de passes, corre o seguinte fluxo de pipeline:

1. Dados do programa a partir do editor → AppleWalletInput
2. Obtenção do logótipo a partir do Firebase Storage (timeout de 8s, cache com TTL de 15 min)
3. Redimensionamento com sharp para todos os tamanhos retina
4. renderAppleStripSet() renderiza as imagens de strip com as suas cores, carimbos, ícone de meta e sunburst (se estiver no estado de recompensa)
5. O Pass.json é preenchido com todos os campos
6. O gerador PassKit assina o ZIP
7. O .pkpass é entregue

O cliente toca em «Adicionar à Wallet» — sem instalação de aplicação. O iOS reconhece automaticamente o tipo MIME application/vnd.apple.pkpass.

Atualizações push via APNs

Assim que chega um novo carimbo, o reloop envia um push APNs para os servidores da Apple. A Apple desperta o passe no dispositivo, que carrega os novos dados silenciosamente em segundo plano. O cliente vê a nova contagem de carimbos da próxima vez que abrir o cartão — sem atualização de aplicação, sem reinstalação.

Integração com a Google Wallet: LoyaltyClass + LoyaltyObject

A Google usa um modelo centrado em API. Por cada programa criamos uma LoyaltyClass (branding estático) e, por cada cartão, um LoyaltyObject (contagem dinâmica de carimbos). A cada carimbo, o backend faz um pedido PATCH — e a Google sincroniza o cartão automaticamente em todos os dispositivos do utilizador.

O que contém a LoyaltyClass

• IssuerName + ProgramName (alemão e inglês)
• HexBackgroundColor (a sua cor de marca)
• ProgramLogo (URL do Firebase Storage)
• HeroImage (a sua pré-visualização do strip)
• TextModulesData (explicação «Como funciona»)
• ValueAddedModuleData (bloco promocional opcional, ver abaixo)
• ScreenShotEligibility (INELIGIBLE quando a partilha desativada está ativa)
• MultipleDevicesAndHoldersAllowedStatus (ONE_USER_ALL_DEVICES quando a partilha desativada está ativa)

O que contém o LoyaltyObject

• Contador de carimbos (por exemplo, «3/5»)
• Estado atual (ACTIVE ou EXPIRED quando a data de validade é atingida)
• Código de barras (QR estático ou TOTP rotativo, consoante o programa)
• HeroImage (com cache-buster: muda a cada contagem de carimbos, para que a Google veja imediatamente o novo estado)
• LinksModuleData (página inicial, ver cartão online, e-mail de apoio, política de privacidade, ficha técnica)
• ValidTimeInterval (data de validade)
• MerchantLocations (≤10 geofences com lat/lon)

Notificações push via broadcast Wallet

Ao contrário da Apple, a Google pode enviar notificações push diretamente para o ecrã de bloqueio. No painel escreve o cabeçalho e o corpo, seleciona os programas-alvo — e a notificação surge para todos os utilizadores da Google Wallet como um banner diretamente no ecrã de bloqueio. Saiba mais no spoke de relatórios.

Pré-visualização em tempo real: o que escreve é o que vê

Enquanto escreve no editor, do lado direito corre o WalletSimulator — o mesmo componente que mostramos em /beispiele para os passes de demonstração. Alterna entre Apple e Google, percorre todos os estados de carimbo (0/5, 1/5, …, 5/5 + recompensa) e vê de imediato como as cores, os ícones e os textos se comportam em cada nível.

reloop.cards/dashboard/programs/cafe-milchschaum

Editar programa

Nome do programaCartão de fidelidade de caféRecompensaO 5.º café grátis

Objetivo de carimbos5Máx. por dia1

Cor da marca#5B3826Destaque#E8C180

Sunburst ao resgatar

Código de barras QR rotativo

Ocultar marca de água

Pré-visualização em direto

Cafe MilchschaumWallet

Cartão de fidelidade de café

O 5.º café grátis

12345

3 / 5 StempelQR-Code

A renderização da imagem de strip corre do lado do servidor em /api/wallet-preview/strip.png e tem cache de 200 ms — introduções rápidas de arrasto (por exemplo, o seletor de cor) são agrupadas num único pedido para manter tudo fluido.

Captação de e-mail e níveis de fidelização

Duas funcionalidades particularmente poderosas para programas avançados:

Modos de captação de e-mail

Carimbos de recompensa pela captação de e-mail = o número de carimbos de bónus que o cliente recebe ao introduzir o seu e-mail. Valores habituais: 1–2 carimbos. Muito eficaz como impulsionador de conversão.

Níveis de fidelização (Bronze / Prata / Ouro)

No plano Premium pode construir programas multinível: um cartão tem níveis, e o cliente avança para o nível seguinte cada vez que completa uma fila de carimbos. A tierConfig é um bloco JSON que define, por nível, o texto de recompensa, o limiar e o nome de exibição.

Exemplo (um café fictício): Bronze (5 cafés → café grátis), Prata (15 cafés → +1 croissant grátis), Ouro (30 cafés → chávena personalizada com o nome). Muito forte para fidelizar clientes existentes.

Anti-fraude: código QR rotativo, carimbo por NFC, bloquear a partilha

Três funcionalidades de segurança que evitam abusos:

Código QR rotativo (TOTP)

O código QR do cartão roda a cada 30 segundos. Qualquer tentativa de carimbo com um código antigo falha. Evita capturas de ecrã e partilha de fotos. Disponível a partir do plano Business. O TOTP é o mesmo padrão usado pelas aplicações de autenticação — muito seguro.

Carimbo por NFC

Em vez de um código QR, o cliente encosta o telemóvel a uma etiqueta NFC no seu balcão. O carimbo é registado de imediato, sem que você ou o cliente tenham de abrir qualquer aplicação. O único requisito é uma etiqueta NFC aprovisionada por nós. Incluído em todos os planos.

Bloquear a partilha do cartão

Na Google Wallet: screenShotEligibility: INELIGIBLE e multipleDevicesAndHoldersAllowedStatus: ONE_USER_ALL_DEVICES. Significa que os cartões não podem ser reencaminhados e as capturas de ecrã bloqueiam a exibição do passe. Proteção máxima contra a partilha de cartões. Incluído em todos os planos.

Anti-fraude padrão (ativo em todos os planos)

• Tokens QR assinados com HMAC-SHA256 (TTL de 60 s)
• Limite de máximo de carimbos por dia por programa
• Registo de auditoria com ID do colaborador, hora e IP para cada carimbo
• Sem acionamento anónimo de carimbo — apenas pessoal com sessão iniciada pode carimbar

Publicar, código QR, pausar/terminar

Assim que estiver satisfeito, clica em Publicar. O programa passa ao estado active, o código QR é gerado (URL /s/[slug]/scan como QR) e pode:

• Transferir como PNG (o formato padrão para impressoras)
• Transferir como SVG (escalável sem perdas, perfeito para design de cartazes)
• Imprimir diretamente através da caixa de diálogo de impressão do navegador
• Partilhar por e-mail (ligação direta, sem necessidade de início de sessão)

Pausar ou terminar um programa

• Pausar → os cartões existentes permanecem intactos, os novos carimbos são bloqueados. Reversível.
• Terminar → o programa passa a apenas-leitura. Os cartões ainda podem resgatar o saldo atual, mas não podem acumular novos carimbos. Irreversível.
• Eliminar → eliminação definitiva completa, incluindo todos os cartões associados e históricos de carimbos. Caixa de diálogo de confirmação com dois fatores.

Criar cartões de teste

Antes do lançamento, deve percorrer você mesmo todo o fluxo de trabalho do cliente. No editor de programas, clique em «Criar cartão de teste» — obtém um cartão totalmente funcional, sem ID de cliente real, que pode carimbar, resgatar e eliminar você mesmo. Os cartões de teste não contam para a sua quota de cartões e são apresentados separadamente nos relatórios.

Resumo: o seu primeiro programa em 5 minutos

Se avançar passo a passo:

1. Gerador de IA → introduza o URL, verifique o rascunho
2. Ajuste os fundamentos do programa (nome, recompensa, meta de carimbos)
3. Finalize o branding (logótipo, cores, emoji de carimbo)
4. Verifique a pré-visualização em tempo real — percorra todos os estados de carimbo
5. Escolha o anti-fraude (o padrão é normalmente suficiente)
6. Publicar → imprimir o QR → entregar o primeiro cartão