Os banners são imagens que você cadastra no Backoffice para exibir no App White Label. Eles podem aparecer em diferentes partes da página inicial e é possível definir a ordem de exibição. Além disso, você pode configurar uma ação que será realizada quando o cliente tocar no banner, como abrir uma página específica do aplicativo, exibir um produto ou mostrar um cupom de desconto.

Neste artigo, explicaremos como cadastrar os banners que são exibidos no aplicativo.

Como ajustar as configurações do App White Label no Backoffice? Clique aqui.

Como definir o estilo do App White Label? Clique aqui.

Como cadastrar um banner para exibir no App White Label?

1. No Backoffice, acesse o caminho Delivery e Autoatendimento > App White Label > Banners do App:

2. Primeiro, clique no ícone  para cadastrar um novo banner:

3. Em seguida, insira a imagem do banner seguindo os passos abaixo:

• • Clique no ícones ;
  • Selecione a opção Upload;
  • Localize e selecione a imagem desejada;
  • Clique em Abrir;
  • Depois em Enviar.

Lembre-se de verificar as dimensões recomendadas de acordo com o Local de exibição do banner na etapa 5, para assegurar a qualidade visual.

4. Marque o Status como Ativo para habilitar o banner:

Dica: O banner pode ser ativado ou desativado, permitindo controlar sua exibição.

5. Escolha o local de exibição do banner. Cada local de exibição tem uma posição específica no app, considere as seguintes opções:

• • Topo da página: Será exibido no topo da página inicial do aplicativo para chamar a atenção dos clientes. A dimensão recomendada da imagem é de 640px de largura por 640px de altura. 
  • Início da página: Será exibido no início da página inicial do aplicativo. A dimensão recomendada da imagem é de 350px de largura por 220px de altura.
  • Fim da página: Será exibido ao final da página inicial do aplicativo. A dimensão recomendada da imagem é de 350px de largura por 220px de altura.

6. Defina a ordem de exibição do banner dentro do local de exibição escolhido:

Dica: Se dois banners tiverem a mesma ordem no mesmo local, o sistema exibirá primeiro o banner criado mais recentemente. Para garantir a sequência correta, é importante definir ordens diferentes para cada banner.

7. Agora, escolha qual será a ação ao tocar no banner, considerando as opções abaixo:

• • Sem ação ao tocar: O banner será exibido, mas não fará nenhuma ação ao ser tocado.
  • Exibir lista de cupons de desconto: Ao tocar, o cliente será redirecionado para uma página que exibe os cupons de desconto disponíveis. 
  • Divulgar um cupom de desconto específico: Ao tocar, exibe informações detalhadas sobre um cupom específico, incluindo o código e as condições de uso. Se essa opção for escolhida, é necessário selecionar o cupom desejado. Saiba mais sobre o cadastro do cupom clicando aqui.
  • Divulgar um produto específico: Se o produto tiver detalhes adicionais (etapas, adicionais ou observações), eles serão exibidos automaticamente. Se não, o cliente será direcionado para o menu do produto. É necessário selecionar  o produto e o menu do produto. 
  • Levar para a página de cashback: Redireciona o cliente para a página do histórico de  uso e o plano de cashback do cliente logado. Se não estiver logado, redireciona para a tela de login. Saiba mais sobre o cashback clicando aqui.
  • Levar para a página de comprar: O cliente será direcionado para a página principal de compras, onde poderá informar o endereço, visualizar as lojas disponíveis, acessar o cardápio, fazer pedidos e pagar.

8. Por fim, clique em para salvar as alterações:

No exemplo, a loja cadastrou um banner para ser exibido no topo da página, na ordem de exibição 1. Ao tocar no banner, se o produto tiver etapas, adicionais ou observações, o cliente será redirecionado para o produto X-Tudo, onde essas informações serão exibidas automaticamente. Se não houver, o cliente será direcionado para o menu Lanches.

9. O banner será exibido no topo da página de Início do App White Label:

Ajude-nos a evoluir deixando seu feedback nos comentários e compartilhando sugestões para novos artigos!