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
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>`
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.
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ça todo os espaç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