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&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