O data-moblet é um atributo que pode ser usado em tags html dentro da plataforma para fazer a navegação entre abas do app, ou seja, redirecionamento interno entre abas do app.

Como funciona

Este atributo faz com que o elemento passe a ser um link para outra aba dentro do aplicativo. Esse link é feito através do id do moblet, dessa maneira: data-moblet="2870511" ou caso seja um item de uma aba, ficaria assim, separado por uma barra data-moblet="2870511/15791995891883980"

Onde pegar o id do moblet

Tanto o id do moblet quanto do item ficam visíveis no endereço da página, acessando pelo pwa (não acesse pelo editor do app e sim pelo link pwa.app.vc/nomedoapp.

Veja como direcionar para uma aba específica:

Veja como direcionar para um item específico:

Exemplo de utilização

Aqui abaixo estão alguns exemplos que são garantidos de funcionar perfeitamente em todas as plataformas.

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

Este atributo - teoricamente - pode ser utilizado em qualquer tag html.

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).

Modelo de HTML com data moblet

Se deseja um modelo pronto com um html bem legal para inserir no seu app, utilize o código abaixo. 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>

__________________________________________________________________
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?