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

> Como adaptar totalmente o seu cartão de fidelidade digital à sua marca em 10 minutos — carregamento do logótipo, cores da marca e de destaque, um ícone de carimbo personalizado, uma imagem de fundo e o seu próprio texto de subtítulo no estado de recompensa. Inclui uma explicação das especificações para o banner do Apple Wallet (480×150) e o círculo do Google Wallet (660×660).

Canonical: https://reloop.cards/pt/blog/wallet-custom-branding-logo-farben
Published: 2026-04-28
Updated: 2026-08-02
Author: reloop Team (candybytes GmbH)

---
export const metadata = {
  title:
    'Personalizar os cartões Wallet com a sua marca: logótipo, cores, ícone de carimbo — a sua marca no Apple & Google Wallet',
  description:
    'Como adaptar totalmente o seu cartão de fidelidade digital à sua marca em 10 minutos — carregamento do logótipo, cores da marca e de destaque, um ícone de carimbo personalizado, uma imagem de fundo e o seu próprio texto de subtítulo no estado de recompensa. Inclui uma explicação das especificações para o banner do Apple Wallet (480×150) e o círculo do Google Wallet (660×660).',
  publishedAt: '2026-04-28',
  updatedAt: '2026-08-02',
  category: 'Guia',
  tags: [
    'Personalização de Marca',
    'Apple Wallet',
    'Google Wallet',
    'Logótipo',
    'Cores da Marca',
    'Cartão de Fidelidade',
    'Design',
  ],
  readingMinutes: 8,
};

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.

<Callout tone="info" title="O que vai precisar">
- Uma conta reloop (a personalização de marca está incluída em todos os planos: cores da marca, logótipo, ícone de carimbo, imagem de fundo, bem como o subtítulo personalizado e a imagem de destaque no estado de recompensa).
- O seu logótipo em PNG, JPG ou SVG (máx. 10 MB)
- Opcional: cores da marca como códigos hexadecimais (caso contrário, use o seletor de cores)
- Opcional: uma imagem de fundo para o cartão (recomenda-se 1280 px no lado mais comprido)
</Callout>

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

<Callout tone="success" title="Próximos passos">
- [Visão geral completa de todas as funcionalidades do painel →](/funktionen/dashboard)
- [Enviar broadcasts push em 5 minutos →](/blog/wallet-push-broadcasts-anleitung)
- [Compreender os relatórios — que métricas contam →](/blog/loyalty-reporting-metriken)
- [Exemplos de 6 setores →](/beispiele)
- [Começar gratuitamente →](/signup)
</Callout>