Personalizar os cartões Wallet com a sua marca: logótipo, cores, ícone de carimbo — a sua marca no Apple & Google Wallet

Um cartão de fidelidade digital com o aspeto predefinido do reloop funciona bem tecnicamente — mas é um desperdício de potencial de marketing. Sempre que um cliente abre o cartão no Apple Wallet ou no Google Wallet, poderia estar a ver a sua marca: o seu logótipo, as suas cores da marca, a sua imagem de fundo. Este guia mostra-lhe como adaptar totalmente um cartão Wallet ao seu estabelecimento em 10 minutos — e quais são as especificações da Apple/Google que precisa de conhecer para que o seu logótipo não seja cortado pelas máscaras integradas do Wallet.

O que o Apple Wallet e o Google Wallet fazem de forma diferente

Antes de carregar seja o que for, é importante compreender isto: a Apple e a Google apresentam o seu logótipo de forma completamente diferente.

Apple Wallet

• O seu logótipo aparece em cima à esquerda, por cima do fundo com a cor da marca
• Formato: banner retangular (máx. 160 × 50 pt, o que corresponde a 480 × 150 px @ 3× Retina)
• Proporção: aproximadamente 3,2 : 1 (horizontal)
• A Apple mostra o logótipo tal como está, sem máscara — se fornecer um logótipo quadrado, este ficará pequeno e insignificante

Google Wallet

• O seu logótipo aparece em cima à esquerda dentro de um círculo
• Formato: quadrado (pelo menos 660 × 660 px)
• A Google mascara-o automaticamente num círculo, com uma área de segurança de 15 % à volta da margem
• Se fornecer um logótipo em banner horizontal, este será esticado ou cortado em cima e em baixo

O dilema: um único logótipo não pode ser simultaneamente um banner da Apple E um círculo da Google.

A solução do reloop: Carrega o seu original (idealmente quadrado ou ligeiramente retangular, pelo menos 660 × 660 px). O servidor normaliza-o para 1024 × 1024 e gera automaticamente três variantes de plataforma ao guardar:

• logo-apple.png — PNG de 480 × 150, ajustado ao interior sobre uma tela transparente (para o PassKit)
• logo-google.png — PNG quadrado de 660 × 660 com uma área de segurança de 15 % (para a API do Google Wallet)
• logo-thumb.webp — WebP de 64 × 64 para apresentação na interface do painel

Assim, não tem de escolher entre os dois mundos. Carregue um bom quadrado e o resto acontece automaticamente.

Passo a passo: adaptar o cartão à sua marca

1. Abrir o programa + separador Branding

No painel: Programas → escolha o programa → separador Branding (ou clique no separador "Branding" à esquerda no editor).

2. Carregar o logótipo

Arraste e largue no espaço do logótipo, ou clique para abrir o seletor de ficheiros. Durante o carregamento acontecem três coisas em paralelo:

1. Redimensionamento do lado do cliente para um máximo de 1024 × 1024 (poupa bytes de armazenamento + largura de banda no carregamento)
2. Os dados EXIF são removidos (sem fugas acidentais de geolocalização)
3. O servidor gera as 3 variantes de plataforma e guarda-as como ficheiros de armazenamento separados

No simulador de wallet ao vivo, à direita, verá imediatamente como o logótipo fica no Apple Wallet (banner, em cima à esquerda) e no Google Wallet (círculo, em cima à esquerda). Se o seu logótipo for demasiado largo e parecer cortado no círculo da Google: reexporte o logótipo num formato quadrado e carregue-o novamente.

Dicas para o logótipo:

• Um fundo transparente é sempre melhor. A cor da marca por trás do logótipo deve transparecer.
• Uma margem mínima de 10 % até à margem do logótipo. Tanto a Apple como a Google têm margens de máscara mais suaves ou mais duras; sem margem, as arestas exteriores são cortadas.
• O SVG também funciona e é rasterizado para PNG do lado do servidor (com densidade 3×).
• Logótipos escuros sobre cores de marca claras e vice-versa — certifique-se de que o contraste se mantém. Um logótipo preto sobre um fundo de marca vermelho-escuro não é legível.

3. Escolher a cor da marca + cor de destaque

Dois seletores de cores:

• Cor da marca (brandColor): o fundo do seu cartão Wallet. No Apple Wallet, é toda a metade superior. No Google Wallet, é o cartão inteiro. Predefinição: #55182c (vinho Stempelkarte).
• Cor de destaque (accentColor): a cor dos círculos de carimbo preenchidos, da estrela marcadora de objetivo e (em algumas versões do Wallet) da animação da fita de recompensa. Predefinição: #f8b627 (dourado Stempelkarte).

Boa prática: cor da marca = a sua marca principal (fundo do logótipo), cor de destaque = um complemento contrastante. Se a sua marca for, por exemplo, azul-escuro, opte por dourado ou um laranja quente como destaque — não "o mesmo azul, um pouco mais claro".

4. Configurar o ícone de carimbo (opcional)

A predefinição é uma simples estrela. Tem três alternativas:

1. Carregar o seu próprio ícone de carimbo (o mesmo processo de carregamento do logótipo). PNG/JPG/SVG, máx. 10 MB. É normalizado para 256×256.
2. Emoji como carimbo — introduza um único emoji (por exemplo, ☕ para um café, 🥐 para uma padaria, ✂️ para um cabeleireiro). O renderizador usa Pango + Noto Color Emoji.
3. Manter a estrela predefinida se ainda não tiver um conceito.

Dica: os ícones personalizados de alto contraste funcionam melhor. Um carimbo com um traço delicado desaparece no pequeno ecrã do cartão; uma forma sólida e marcante lê-se bem.

5. Escolher o modo de apresentação do carimbo

Duas opções:

• circle-number (predefinição): círculo de carimbo com o ícone no interior, círculo vazio para os não resgatados. Clássico.
• image-only: o ícone completo como carimbo preenchido, uma variante em tons de cinzento quando vazio. Moderno, alinhado com a marca, e só vale a pena se o seu ícone for visualmente forte.

O simulador ao vivo mostra ambos os modos instantaneamente.

6. Imagem de fundo (opcional)

Pode carregar uma imagem de fundo para a área da faixa (onde ficam os carimbos) — por exemplo, um padrão subtil ou uma fotografia desfocada do seu café. Formato: JPG / PNG / WebP, lado mais comprido máx. 1280 px.

O modo de sobreposição + intensidade da sobreposição (0–80 %) controla a intensidade com que a cor da sua marca fica por cima da imagem:

• none: imagem totalmente visível (bom para padrões muito subtis)
• darken: imagem escurecida pela cor da marca (bom para fotografias claras)
• lighten: imagem clareada (bom para fotografias escuras)
• brand-tint (predefinição): a imagem recebe um matiz da cor da marca

7. Personalizar o estado de recompensa

O que acontece visualmente quando o cartão está cheio e o cliente pode resgatar a sua recompensa?

• Uma imagem de fundo de recompensa personalizada (por exemplo, uma fotografia de confetes ou uma fotografia do seu produto de recompensa, como um "cappuccino grátis")
• Uma cor de fundo de recompensa (uma cor sólida em vez de uma imagem, substituindo o gradiente predefinido da marca)
• Texto de subtítulo personalizado — em vez do predefinido "RECOMPENSA DISPONÍVEL" → o seu próprio slogan, como "O SEU CAFÉ ESTÁ À ESPERA"
• Um título de recompensa personalizado — em vez da recompensa específica do programa → o seu próprio texto de marketing
• Animação de raios + confetes ativada/desativada
• Cor do subtítulo, tamanho do título, posição — ajustáveis separadamente por eixo

Isto faz a diferença entre "o cartão está cheio" e "o cartão celebra com o cliente".

8. Desativar a marca de água (apenas Premium)

Por predefinição, o seu cartão mostra uma pequena marca de água «reloop» no canto inferior direito. Com o botão da marca de água (hideWatermark), oculta-a — um cartão white-label sem a nossa marca. Disponível apenas no plano Premium.

Pré-visualização e teste ao vivo

No editor:

• O simulador ao vivo mostra os enquadramentos da Apple e da Google lado a lado (ou através de um botão de alternância)
• Um cursor de carimbos de 0 até ao máximo → veja como o cartão evolui à medida que é carimbado
• Um botão de alternância do estado de recompensa → veja como o cartão fica quando está cheio

Num telemóvel real:

1. Guarde o programa
2. Crie um cartão de teste (no separador Cartões → "Novo cartão")
3. Leia o código QR com o seu iPhone (ou Android)
4. Toque em "Adicionar ao Wallet"
5. Abra o cartão na aplicação Wallet → é exatamente isto que os seus clientes veem

Se algo tiver um aspeto diferente do simulador: reporte um erro para support@reloop.cards — verificamos de imediato, porque a nossa promessa é "idêntico ao pixel entre a pré-visualização e o passe".

Erros de branding frequentes

• Carregar o logótipo demasiado pequeno (200 × 200 px). O servidor tem de ampliar → logótipo desfocado. Pelo menos 660 × 660 px.
• Escolher um logótipo quadrado, mas o banner da Apple parece minúsculo. Não é um erro — o banner da Apple é 3,2:1, por isso um quadrado preenche-o verticalmente mas deixa 75 % do espaço horizontal vazio. Se está a dar prioridade à Apple, faça um logótipo mais largo.
• Cor da marca igual à cor de destaque. Os carimbos deixam de ser visíveis. O destaque tem de contrastar.
• Imagem de fundo demasiado carregada. Os carimbos ficam sobrepostos e o cartão parece desordenado. Use um padrão ou uma imagem + 50 % de sobreposição.

Quando NÃO precisa de personalização de marca

Se:

• Está apenas a experimentar o serviço (a predefinição já tem um aspeto elegante)
• Está sob pressão de tempo para o lançamento e quer fazer o branding mais tarde
• Ainda não tem uma identidade de marca estabelecida (nesse caso, o branding predefinido não prejudica ninguém)

O branding pode ser melhorado de forma iterativa — em 5 minutos pode adicionar um logótipo + 2 cores, e ficará logo com 80 % da qualidade de um programa totalmente configurado.