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

> Passo a passo: como criar o seu primeiro programa em reloop — das cores da marca aos ícones de carimbo, até ao passe Wallet. Três caminhos, mais de 70 opções, pré-visualização em tempo real.

Canonical: https://reloop.cards/pt/blog/digitale-stempelkarte-erstellen
Published: 2026-04-27
Updated: 2026-08-02
Author: reloop Team (candybytes GmbH)

---
export const metadata = {
  title:
    'Criar um cartão de fidelidade digital: branding, Apple e Google Wallet, gerador de IA e mais de 70 personalizações',
  description:
    'Passo a passo: como criar o seu primeiro programa em reloop — das cores da marca aos ícones de carimbo, até ao passe Wallet. Três caminhos, mais de 70 opções, pré-visualização em tempo real.',
  publishedAt: '2026-04-27',
  updatedAt: '2026-08-02',
  category: 'Como fazer',
  tags: [
    'Criar um programa',
    'Apple Wallet',
    'Google Wallet',
    'Branding',
    'Gerador de IA',
    'Cartão de fidelidade',
  ],
  readingMinutes: 12,
};

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](/blog/merchant-dashboard-funktionen).

## 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](/beispiele) como modelo

### Opção 1: gerador de IA

<Callout tone="tip" title="Quando o gerador de IA funciona bem">
Quando o seu site tem um logótipo claro, cores de marca nas secções de cabeçalho/hero e um nome de estabelecimento reconhecível. Funciona especialmente bem para cafés, padarias, cabeleireiros e restaurantes com presença web consolidada. Em sites muito minimalistas ou com muitos gráficos, extraímos as cores diretamente do CSS — nesse caso os resultados podem variar.
</Callout>

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](/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:

| Campo | Descrição | Exemplo |
| --- | --- | --- |
| **Nome do programa** | Título visível no cartão Wallet e no painel | «Cartão de fidelidade de café» |
| **Subtítulo** | Sub-título opcional, apresentado em itálico no passe | «O 5.º é grátis» |
| **Texto de recompensa** | O que o cliente recebe quando o cartão está completo | «1 café por conta da casa» |
| **URL da página inicial** | Ligação clicável no verso do passe, opcional | `https://cafe-milchschaum.at` |

### Mecânica dos carimbos

| Campo | Intervalo / Predefinição | Significado |
| --- | --- | --- |
| **Meta de carimbos** | 2–100 (predefinição: 5) | Quantos carimbos até à recompensa |
| **Máx. de carimbos por dia** | 1–10 (predefinição: 1) | Limite diário anti-fraude por cartão |
| **Validade em dias** | 0–730 (0 = nunca) | Os carimbos expiram após X dias de inatividade |
| **Momento de exibição do bónus** | `at_max` \| `before_max` | Estado de recompensa em N ou já em N–1 |
| **Exibição de bónus mostrar extra** | Booleano | Sufixo «+1 carimbo» no contador (X/Y+1) |

<Callout tone="info" title="`at_max` vs. `before_max`">
**`at_max`** (predefinição): o cliente só vê o ecrã de recompensa quando tem o último carimbo. O modelo clássico.<br />
**`before_max`**: já com N–1 carimbos o cartão mostra a recompensa. Útil quando o último carimbo acontece no momento do resgate (por exemplo, «Na 5.ª vez é carimbado E recebe um café grátis» — mostrar a recompensa no 4.º carimbo sinaliza: da próxima vez é que é).
</Callout>

## 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**.

<StampMockup
  merchant="Cafe Milchschaum"
  program="Cartão de fidelidade de café"
  reward="O 5.º café grátis"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={2}
  required={5}
  emoji="☕"
  caption="Cor de marca espresso (#5B3826), destaque caramelo (#E8C180), emoji de carimbo ☕"
/>

| Campo | Formato | Efeito |
| --- | --- | --- |
| **Cor da marca** | Hex `#RRGGBB` | Fundo do cartão; o contraste do texto é escolhido automaticamente |
| **Cor de destaque** | Hex `#RRGGBB` | Realces dos carimbos, eyebrow da recompensa, botões CTA no passe |
| **Logótipo** | URL (Firebase Storage, máx. 2 MB) | Aparece no cabeçalho do passe, dimensionado automaticamente para retina (1×, 2×, 3×) |
| **Fundo do strip** | URL, opcional | Imagem de fundo atrás dos carimbos (por exemplo, uma foto de latte para um café) |
| **Modo de sobreposição do strip** | `none` / `darken` / `lighten` / `brand-tint` | Como a imagem de fundo se mistura com a cor da marca |
| **Opacidade da sobreposição do strip** | 0–80 % (predefinição: 35 %) | Intensidade da sobreposição |

<Callout tone="tip" title="Dicas de logótipo">
- **Um PNG com fundo transparente** funciona melhor — sem caixas brancas à volta do seu logótipo<br />
- **Quadrado ou 3:1 horizontal** — ambos os formatos são dimensionados para 160×50pt<br />
- **Pelo menos resolução 2×** (por exemplo, 320×100 px) para se manter nítido em ecrãs retina<br />
- **Verifique o contraste com a cor da marca** — logótipos claros precisam de cores de marca escuras e vice-versa
</Callout>

## 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.

| Opções adicionais | Significado |
| --- | --- |
| **URL do ícone de carimbo** | Imagem personalizada (PNG, transparente), por exemplo o símbolo do seu logótipo |
| **Emoji de carimbo** | De uma paleta curada (☕, 🥐, ✂️, 🐶, …) ou qualquer emoji |
| **Escala do ícone de carimbo** | 50–200 % (predefinição: 100 %) — maior = mais dominante |
| **Apenas-imagem: mostrar anel de meta** | No modo `image-only`: liga/desliga o anel de progresso à volta dos espaços vazios |

### Í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:

| Campo | Efeito |
| --- | --- |
| **Usar ícone de meta personalizado** | Alternar: o seu próprio ícone em vez da estrela |
| **URL do ícone de meta** | URL da imagem (por exemplo, o seu logótipo como uma coroa) |
| **Emoji do ícone de meta** | Em alternativa, um emoji (por exemplo, 🏆) |
| **Tonalidade de destaque do ícone de meta** | Colore o ícone com a sua cor de destaque |

<StampMockup
  merchant="Cafe Milchschaum"
  program="Cartão de fidelidade de café"
  reward="O 5.º café grátis"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={5}
  required={5}
  state="reward"
  caption="Estado de recompensa: sunburst, texto eyebrow, a grande recompensa em destaque."
/>

## 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:

| Campo | Significado |
| --- | --- |
| **URL de fundo da recompensa** | Imagem hero personalizada no estado de recompensa (por exemplo, uma foto da sua bebida de assinatura) |
| **Cor de fundo da recompensa** | Cor sólida como alternativa quando não há imagem |
| **Modo de sobreposição da recompensa** | Como acima, para o strip |
| **Opacidade da sobreposição da recompensa** | 0–80 % |
| **Texto eyebrow da recompensa** | Pequeno elemento de título por cima da recompensa (por exemplo, «🎉 Parabéns») |
| **Cor do texto da recompensa** | Cor hex para a grande linha de recompensa |
| **Sunburst da recompensa** | Animação radiante por trás da recompensa — celebratória |
| **Ocultar eyebrow da recompensa** | Alternar: omitir o eyebrow (para um design minimalista) |
| **Ocultar texto da recompensa** | Alternar: apenas imagem, sem texto (quando a imagem já diz tudo) |

## 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](/blog/loyalty-reporting-push-newsletter#wallet-push-broadcasts).

## 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](/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.

<DashboardMock variant="program-editor" caption="O editor com pré-visualização em tempo real. Cada alteração à esquerda é renderizada na pré-visualização à direita em menos de 300 ms." />

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

| Modo | Comportamento |
| --- | --- |
| `off` | Sem captação de e-mail. O cartão é 100 % anónimo. |
| `optional` | Após guardar na Wallet, é oferecido um campo de e-mail. É possível oferecer carimbos de bónus como incentivo. |
| `required` | O cartão só pode ser guardado com um e-mail. Alcance máximo para a newsletter. |

**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)

<Callout tone="info" title="Recomendação para impressão de QR">
- **Tamanho mínimo:** 4×4 cm para expositores de mesa, 8×8 cm para autocolantes de porta<br />
- **Alto contraste:** QR escuro sobre fundo branco, **nunca** QR branco sobre fundo colorido<br />
- **Quiet zone:** pelo menos 4× o tamanho do módulo QR como margem à volta<br />
- **Teste prévio:** faça a leitura com dois telemóveis diferentes (iOS e Android) antes de imprimir
</Callout>

### 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

<Callout tone="success" title="Próximos passos">
- [Como reativar clientes existentes através de push e newsletter →](/blog/loyalty-reporting-push-newsletter)<br />
- [Visão geral completa de todas as funcionalidades do painel →](/blog/merchant-dashboard-funktionen)<br />
- [Exemplos de 6 setores →](/beispiele)<br />
- [Comece gratuitamente →](/signup)
</Callout>