Artigos sobre: Opções do editor

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


  1. 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.
  2. 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