Redirecionamento entre abas

O data moblet ou redirecionamento interno é utilizado para criar um link de direcionamento para uma aba do próprio aplicativo.

**Como funciona **

1. Você deve utilizar os códigos abaixo para criar o link de direcionamento de uma aba para outra aba do aplicativo:
   
   <a href="" data-moblet="2870503">Fazer pedido</a>
   
   <button data-moblet="2870511">Fazer pedido</button>
   
   <a href="" data-moblet="2870503"> <img src="https://i.imgur.com/vdeD6Tb.png" style="width: 90%;"></img> </a>`

2. Esse código deve ser colocado dentro do campo de texto em branco, disponível em funções como Página em Branco e Lista por exemplo.
3. Clique em Código-Fonte, cole o código COM O ID DA ABA DO SEU APP, depois clique em Código-Fonte novamente e salve.

• **Onde pegar o ID da aba **

Existem duas formas.

• Primeira forma (a mais fácil):

Observe que ao acima do nome de cada aba, no editor, há um código. É esse o número que você deve pegar, sem os parênteses.

• Segunda forma:

Acesse o PWA do seu aplicativo:

pwa.app.vc/nomedoapp.

E copiar o número que aparece na barra de endereço do navegador, logo após o nome da funcionalidade:

• Substituindo o código:

Adicione o número no código abaixo:

<a href="" data-moblet="23526873">Fazer pedido</a>

**Direcionamento interno para itens **

Há a possibilidade de redirecionar o usuário internamente para itens de uma lista, campanhas do Fidelidade ou produtos do Fabapp Commerce.

Nesse caso você deverá copiar o código do moblet + o código do item em questão, conforme mostrado abaixo:



<a href="" data-moblet="23526873/1607564303748193">Fazer pedido</a>

**Exemplo de utilização **

Se deseja um modelo pronto com um html bem legal para inserir no seu app, utilize o código abaixo. Nele o usuário clica no botão agendas visita e é direcionado para uma aba de agendamento, que está oculta na home do app, visto que só é possível acessá-la clicando nesse botão. Veja como é o layout desse html:

• Copie o HTML abaixo e cole no campo de Código Fonte do seu app:
  
  
  <style type="text/css">
  
  .main{
  padding: 10px;
  }
  
  .text{
  color: #666666;
  }
  
  .btn-img{
  display: flex;
  justify-content: center;
  }
  
  .mp{
  text-align: center;
  color: #20446a;
  }
  
  .social {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top:30px;
  margin-bottom:45px;
  }
  
  .social img {
  width: 20px;
  }
  
  .btn{
  color: #ffffff;
  background-color:#20446a;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  border-radius: 10px;
  border: none;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size:15px;
  }
  
  .alinhabtn{
  text-align: center;
  margin: auto;
  }
  
  .ico{
  float:right;
  background-color: transparent;
  color:#ffffff;
  font-size:18px;
  padding-right:15px;
  }
  
  .titleb{
  color:#FFFFFF;
  float:center;
  
  }
  
  u{
  text-decoration:none;
  background-color:transparent;
  }
  </style>
  <div class="main"><img src="https://imgur.com/Mlo5fh0.png" style="width: 100%;" />
  <h2 style="color:#20446a"><span style="font-size:20px;">Conhe&ccedil;a todo os espa&ccedil;os do nosso Clube e encante-se!</span></h2>
  
  <p style="color:grey;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus tortor quis pellentesque vestibulum. Aliquam erat volutpat. Proin id ultricies.</p>
  
  <h2 style="color:#20446a"><span style="font-size:20px;">Como funciona a visita</span></h2>
  
  <p style="color:grey;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus tortor quis pellentesque vestibulum. Aliquam erat volutpat. Proin id ultricies ex.</p>
  <button class="btn" data-moblet="25661268"><u class="titleb" data-moblet="25661268">Agendar visita</u></button></div>
  

• Aviso
  
  Para que funcione no iOS é obrigatório a utilização das tags <a></a> ou <button></button>
  Caso seja utilizado a tag <a></a>, o atributo href é obrigatório (mesmo que vazio).

Atualizado em: 03/04/2023