Com o editor de passes da carteira Brevo, você pode criar passes personalizados e com a sua marca para a Carteira da Apple e a Carteira do Google, tudo sem precisar escrever código. Personalize o layout, as imagens e as cores para refletir a sua identidade, insira variáveis de personalização para adaptar o conteúdo a cada cliente e use geofencing para enviar notificações com base na localização.

Antes de começar 

Antes de criar um passe, você precisará:

• Adicione seus certificados da Apple e do Google à Brevo.
  ➡️ Para saber mais, consulte nossos artigos dedicados: Criar, adicionar ou estender um certificado da Apple à Carteira Brevo e Criar e adicionar um certificado do Google à Carteira Brevo.
• Crie um passe da carteira

Entender a estrutura de um passe de carteira 

Antes de desenvolver seu passe, é necessário entender como ele é estruturado. Os passes da Carteira da Apple e Carteira do Google tem cada um seu próprio layout e estrutura de campos e precisam ser configurados separadamente. 

Clique nas guias abaixo para explorar a anatomia de cada tipo de passe e suas seções:

Passe da Carteira da Apple Passe da Carteira do Google

↪️ Ver verso

Os passes da Carteira têm uma frente e um verso. A frente exibe sua marca e informações principais rapidamente. 
Expanda os seguintes acordeões para saber mais sobre cada seção na frente do passe da Carteira da Apple:

🔴 Cabeçalho

A seção Header (Cabeçalho) aparece no topo do passe e está sempre visível, mesmo quando o passe não está aberto. Normalmente, contém o nome e o logotipo da sua organização ou marca.

1. Pass logo (Logotipo do passe)
   Imagem pequena no canto superior esquerdo do passe, normalmente o logotipo da sua marca.
2. Logo text (Texto do logotipo)
   Rótulo curto exibido ao lado do seu logotipo, normalmente o nome da sua marca.
3. Fields (Campos)
   Adicione até dois campos no canto superior direito do passe, como o nome e o sobrenome do cliente. Use o ícone Adicionar variável { } para inserir uma variável de personalização que se adaptará a cada um dos seus clientes.

🟠 Principal

A seção Primary (Principal) controla a faixa central da frente do passe e é a área de maior destaque visual. Normalmente, ela contém um banner de imagem. Use-a para destacar informações importantes rapidamente, como um nível de fidelização, um valor de desconto ou o nome de um evento.

1. Strip background (Fundo da faixa)
   Imagem do banner no centro do passe.
2. Fields (Campos)
   Adicione um campo para exibir informações importantes, como o nome do programa de fidelização ou o nível de associação acima da imagem do banner. Use o ícone Adicionar variável { } para inserir uma variável de personalização que se adaptará a cada um dos seus clientes.

🟡 Secundária

A seção Secondary (Secundária) exibe campos adicionais abaixo da seção principal. Adicione até quatro campos para mostrar detalhes de suporte, como o nome do programa, a data de validade ou o nível de associação. Use o ícone Adicionar variável { } para inserir uma variável de personalização que se adaptará a cada um dos seus clientes. Você também pode definir o alinhamento do texto para cada campo: esquerda, centro ou direita.

🟢 Código de barras

A seção Barcode (Código de barras) permite que você configure o código digitalizável no passe, o qual pode ser usado em um ponto de venda ou na entrada de um evento. Ele pode ser um QR Code ou um código de barras padrão, e seu valor pode ser personalizado por contato.

Para configurar um código de barras: 

1. Ative a opção Show barcode (Mostrar código de barras).
2. Selecione o format (formato) do código de barras, por exemplo Code128 ou QR Code.
3. Selecione a encoding (codificação) do código de barras, por exemplo ISO88591.
4. Insira o valor do código de barras a ser codificado, normalmente um ID exclusivo do contato. Use o ícone Adicionar variável { } para inserir uma variável de personalização que se adaptará a cada um dos seus clientes. 
   
5. No campo Alternative text (Texto alternativo), insira um texto legível exibido abaixo do código de barras, por exemplo o ID do contato. Use o ícone Adicionar variável { } para inserir uma variável de personalização que irá se adaptar a cada um dos seus clientes. 

Passes de carteira têm uma frente e um verso. O verso contém detalhes adicionais que seu cliente pode ler ao tocar no ícone de informações no dispositivo. 
Expanda o acordeão a seguir para saber mais sobre a seção no verso do passe do Apple Wallet:

🟣 Informações sobre o texto

A seção Text information (Informações do texto) controla o conteúdo visível no verso do passe quando um contato toca nele na carteira. Ela pode ser usada para instruções, termos e condições, detalhes de contato, instruções de resgate, detalhes da conta ou qualquer informação adicional que seu cliente possa precisar.

1. Pass name (Nome do passe)
   O nome exibido na parte superior. Use o ícone Adicionar variável { } para inserir uma variável de personalização que se adaptará a cada um dos seus clientes.
2. Fields (Campos)
   Adicione até 10 campos para detalhes como termos e condições, detalhes de contato ou instruções de resgate. Use o ícone Adicionar variável { } para inserir uma variável de personalização que se adaptará a cada um dos seus clientes.

↪️ Ver verso

Os passes da Carteira têm uma frente e um verso. A frente exibe sua marca e informações principais rapidamente. 
Expanda os itens a seguir para saber mais sobre cada seção na frente do passe da Carteira do Google:

🔴 Cabeçalho

A seção Header (Cabeçalho) aparece no topo do passe e está sempre visível, mesmo quando o passe não está aberto. Normalmente, contém o nome e o logotipo da sua organização ou marca.

1. Logo (Logotipo)
   Imagem pequena no canto superior esquerdo do passe, normalmente o logotipo da sua marca.
2. Pass title (Título do passe)
   Rótulo curto exibido ao lado do seu logotipo, normalmente o nome da sua marca.
3. Subheader text (Texto do subtítulo)
   Um subtítulo opcional exibido abaixo do título do passe.
4. Header text (Texto do título
   O título principal exibido com destaque no passe, por exemplo o nome do programa de fidelização. 

🟡 Corpo

A seção Body (Corpo) permite adicionar linhas de informações na parte frontal do passe. Normalmente, ela inclui o nome do cliente e campos principais, como saldo de pontos, nível de associação ou informações do evento. Você pode adicionar até três linhas, e cada uma pode conter um ou mais campos.  

🟢 Código de barras

A seção Barcode (Código de barras) permite que você configure o código digitalizável no passe, o qual pode ser usado em um ponto de venda ou na entrada de um evento. Ele pode ser um QR Code ou um código de barras padrão, e seu valor pode ser personalizado por contato.

Para configurar um código de barras: 

1. Ative a opção Show barcode (Mostrar código de barras).
2. Selecione o format (formato) do código de barras, por exemplo Code128 ou QR Code.
3. Insira o valor do código de barras a ser codificado, normalmente um ID exclusivo do contato. Use o ícone Adicionar variável { } para inserir uma variável de personalização que se adaptará a cada um dos seus clientes. 
   
4. No campo Alternative text (Texto alternativo), insira um texto legível exibido abaixo do código de barras, por exemplo o ID do contato. Use o ícone Adicionar variável { } para inserir uma variável de personalização que irá se adaptar a cada um dos seus clientes. 

🟠 Imagem

A seção Image (Imagem) permite que você carregue uma imagem de destaque exibida na parte inferior do passe para reforçar a identidade da sua marca, destacar uma promoção ou exibir elementos visuais específicos do nível. Pode ser um banner ou uma imagem hero exibida na parte inferior do cartão.

Clique em Change image (Alterar imagem) para usar uma imagem da sua content library (biblioteca de conteúdo) ou clique no ícone de exclusão para removê-la. 

Passes de carteira têm uma frente e um verso. O verso contém detalhes adicionais que seu cliente pode ler ao tocar no ícone de informações no dispositivo. 
Expanda os itens a seguir para saber mais sobre cada seção no verso do passe da Carteira do Google:

🟣 Conteúdo adicional

A seção Additional content (Conteúdo adicional) controla o conteúdo visível no verso do passe ao ser tocado por um contato na carteira. Ela pode ser usada para fornecer instruções, termos e condições, detalhes de contato, instruções de resgate, detalhes da conta ou qualquer informação adicional que seu cliente possa precisar.

🔵 Links

A seção Links permite adicionar links clicáveis ao verso do passe. Você pode usar isso para adicionar links que direcionem para o seu site, loja online, chamada para o suporte ou qualquer outra URL. Adicione um rótulo para cada link para que os clientes saibam para onde estão indo. Há três tipos de links disponíveis:

1. Email (E-mail)
   Insira uma descrição e adicione um link para abrir a caixa de correio preferida do seu cliente com uma janela para escrever um e-mail para um endereço específico.
2. Phone (Telefone)
   Insira uma descrição e adicione um link que iniciará uma chamada telefônica.
3. URL
   Adicione um link para uma página da Web. Insira uma Description (Descrição) e o URI de destino.

Etapa 1: Definir o estilo do passe da carteira

A Guia Style (Estilo) permite definir as cores do texto e do plano de fundo do seu passe da carteira.  Clique no ícone de cor ao lado do elemento ao qual você quer aplicar uma cor específica. Você pode escolher uma cor, inserir o código da cor ou usar a cor da sua marca.

Etapa 2: Configurar e personalizar seu passe da carteira

A guia Content (Conteúdo) é onde você define o texto, as imagens e os dados exibidos no seu passe da carteira. Use para:

• Adicionar e mover campos para inserir e reordenar as informações exibidas no seu passe.
• Adicionar um código de barras para exibir um código exclusivo e digitalizável no passe de cada contato.
• Inserir variáveis de personalização para exibir informações individuais, como o nome de um cliente ou pontos de fidelização.

Adicionar e mover campos no seu passe

Para inserir e mover um campo dentro do design da sua carteira: 

1. No editor da carteira, abra uma seção em que deseja adicionar ou mover um campo.
2. Clique em + Add field (+ Adicionar campo) para inserir um novo campo e preencha-o com o rótulo e o valor. 
3. Clique em Save (Salvar). 
4. Clique e segure o ícone de arrastar ao lado do nome do seu campo e arraste o campo para onde quiser colocá-lo.
    

Adicionar um código de barras ao seu passe

Você pode adicionar um código de barras ao design do seu cartão da carteira para que o cartão de cada contato exiba um código digitalizável. Isso é útil para programa de fidelização, acesso a eventos ou qualquer caso de uso que exija um identificador exclusivo por contato.

Para inserir um código de barras no design da carteira:

1. No editor da carteira, abra a seção de código de barras do seu design da Carteira da Apple ou do Google.
2. Ative a opção Show barcode (Mostrar código de barras).
3. Selecione um formato de código de barras. Os seguintes formatos estão disponíveis para a Carteira da Apple e a Carteira do Google:
   • QR Code , um código de matriz quadrada amplamente suportado por câmeras de smartphones.
   • Code 128, um código de barras linear (1D), frequentemente usado para dados alfanuméricos, como números de pedidos ou de associação.
   • Aztec, um código quadrado compacto que funciona bem em condições de impressão de baixa resolução.
   • PDF417, um código de barras linear empilhado que pode armazenar quantidades de dados maiores, comumente usado para documentos de transporte ou de identificação.
4. Se a carteira for para a Carteira da Apple, selecione uma codificação para definir como os dados do código de barras são codificados:
   • ISO88591, codificação padrão de caracteres da Europa Ocidental.
   • ISO88591 Short, uma variante compacta do ISO-8859-1.
   • UTF8, oferece suporte a uma gama mais ampla de caracteres, incluindo caracteres acentuados e alfabetos não latinos.
5. Insira o valor do código de barras. Estes são os dados codificados no código de barras, as informações que serão lidas por um leitor. Você pode inserir um valor fixo ou inserir uma variável de personalização (por exemplo, um número de cartão de fidelização exclusivo para cada contato).
6. (Opcional) Digite um texto alternativo. Este é o texto legível exibido abaixo do código de barras. Você pode inserir um valor fixo ou inserir uma variável de personalização.

Inserir variáveis de personalização no seu passe

Você pode personalizar o cartão da carteira de cada contato inserindo atributo de contato ou variáveis de fidelização diretamente no design da sua carteira. Isso permite exibir informações individuais, como o nome de um contato ou pontos de fidelização, em cada cartão gerado.

Para inserir uma variável de personalização no seu design do Wallet:

1. No editor do Wallet, abra uma seção e adicione ou escolha um campo no qual você quer inserir uma variável.
2. Clique no ícone Inserir variável { }.
3. Selecione a categoria da variável:
   • Contact attributes (Atributos do contato) para inserir informações no nível do contato, como nome, sobrenome ou endereço de e-mail.
   • Loyalty (Fidelização) para inserir dados específicos de fidelização, como saldo de pontos ou nome do nível.
4. Selecione a variável específica que deseja inserir. Ela é adicionada na posição do cursor no bloco de texto.

Sua variável de personalização foi inserida. Ao abrir o cartão da carteira, cada um dos seus contatos verá as informações individuais, aqui o nome. 

(Opcional) Etapa 3: Traduzir seu passe

Se você quiser que seu passe chegue aos contatos no idioma de preferência, é possível configurar várias versões de idioma diretamente no editor de passes. Cada contato receberá automaticamente a versão que corresponde ao idioma armazenado nos atributos de contato:

➡️ Para saber mais sobre como traduzir seu passe da carteira, confira nosso artigo dedicado Traduzir seus passes da carteira em vários idiomas.

(Opcional) Etapa 4: Configurar notificações de geofencing

Com o recurso de Geofence, engaje cliente no lugar certo e na hora certa enviando notificação quando eles se aproximarem de uma das unidades da sua loja.

Adicione localizações da loja à sua conta Brevo e configure notificações baseadas na localização. Escolha qual local aciona a notificação, personalize a mensagem que os clientes receberão quando estiverem por perto e use o ícone Adicionar variável { } para personalizá-la para cada cliente.

➡️ Para saber mais sobre como configurar notificações com base na localização, confira nosso artigo dedicado Enviar notificações de geofencing para titulares de passe da carteira.

Etapa 5: Salvar e compartilhar seu passe

Agora que seu passe foi criado para as Carteiras da Apple e do Google, clique em Save & quit (Salvar e sair) para salvar seu design. Seu passe ficará disponível em Marketing > Wallet (Marketing > Carteira).

Quando seu passe estiver pronto, compartilhe o link de instalação com seus clientes. Ao tocarem no link, eles serão avisados para adicionar o passe à Carteira da Apple ou à Carteira do Google.

Você pode distribuir o link em qualquer canal, por exemplo:

• Campanhas de e-mail ou SMS
  Inclua o link em uma campanha da Brevo para alcançar seus contatos diretamente.
• Seu site
  Adicione um botão ou link "Add to Wallet" (Adicionar à carteira) em uma página relevante, como a confirmação do checkout ou a página do seu programa de fidelização.
• Seu aplicativo móvel ou da Web
  Incorpore o link em um ponto relevante da jornada do cliente.
• Materiais impressos ou sinalização na loja
  Converta o link em um QR Code para que o cliente possa ler na hora.

➡️ Para saber mais sobre como compartilhar seu passe de carteira, confira nosso artigo dedicado Impulsione o recrutamento de cartões da Carteira com diferentes pontos de contato.

⏭️ O que vem a seguir?

• Criar uma campanha wallet
• Configurar uma automação para notificar os contatos da carteira e/ou movê-los para outro passe
• Enviar notificações de geofencing para titulares de passes da carteira

🤔 Dúvidas?

Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.

Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar à agência parceira da Brevo certa.