O data-moblet é um recurso 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 para uma 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>`

Onde pegar o ID do moblet

Para obter o ID do moblet para o qual deseja direcionar o link você deve acessar o PWA do seu aplicativo:

pwa.app.vc/nomedoapp.

E copiar o número que aparece na barra de endereço do navegador:

Substituindo no código fonte o ID que está como exemplo por esse ID que você copiou da aba:

<a href="" data-moblet="2870493">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="2870493/15791995891883980">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

  • Porém, 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).

__________________________________________________________________
Nosso objetivo é o seu sucesso. Por isso, em qualquer dificuldade ou necessidade, não hesite em nos contatar pelo messenger.

Até a próxima, equipe Fabapp.


Quer saber mais?

Como testar o app antes de publicar
App offline
Inserir Iframe no app


Encontrou sua resposta?