HTML é uma linguagem de marcação utilizada na construção de páginas na Web. Além de permitir uma aparência bastante personalizada para o app, estruturas HTML muitas vezes permitem ao usuário uma experiência de uso muito melhor. 

Por exemplo, através de um código html é possível inserir botões personalizados no app. Com eles pode ser executado uma ação como entrar nas redes sociais ou abrir uma conversa no Whatsapp, por exemplo. 

Nos apps criados com a plataforma da Fabapp é possível inserir códigos HTML dentro do campo de texto das seguintes funcionalidades:

  • Lista;
  • Lista texto;
  • Catálogo;
  • Página em Branco.

Nesse artigo oferecemos diversos códigos HTML prontos para personalização e utilização. O criador do app também pode criar o seu próprio código para suprir uma necessidade mais específica e inseri-lo no app.


 

Utilidade de um código HTML no app

As utilizações podem ser diversas. Nesse artigo orientamos as mais comuns como:

  • Clicar para enviar e-mail;
  • Clicar para ligar;
  • Redirecionamento para links externos;
  • Botões de contato;
  • Botões de redirecionamento para redes sociais;
  • Botão para redirecionamento à uma conversa no Whatsapp com um número específico.

 
Como usar HTML no app


 1. No painel de edição do app abra uma das abas com função HTML (Lista, Lista texto, Catálogo ou Página em Branco);

2. Vá para a caixa de edição de texto e então clique em em “Código-Fonte”;

3. Feito isso, insira os códigos HTML que for utilizar, cujos exemplos você pode ver abaixo;

4. Clique novamente em "Código-Fonte";

5. Clique em "Salvar alterações" e em seguida em "Publicar" localizado no canto superior direito da plataforma;

6. Recomendamos efetuar um teste do código no dispositivo. 

É possível que a personalização não apareça na pré visualização do editor.
Dentro da caixa de texto onde foi inserido o código também pode aparecer uma caixa vermelha escrito IFRAME. 

Considerando esses casos, recomendamos efetuar testes através desse passo a passo para apps ainda não publicados. Caso o app já esteja publicado é possível efetuar o teste no próprio app instalado no celular. 


Veja o passo a passo na imagem abaixo:

 

Códigos HTML: observações importantes

  • Abaixo trazemos diversas possibilidades de códigos. Perceba que em cada um deles há textos em caixa alta e de marcação (por exemplo: insira aqui o endereço de e-mail). Nesses casos é necessário efetuar o que está sendo pedido através dessa frase para que o código funcione. 

Dessa forma trazemos o código com esses textos de marcação e logo abaixo trazemos um código de exemplo com informações completas. 

Nesse caso é necessário perceber que há um link no código. Quando não for o link externo para qual o código deve redirecionar o usuário será o link da imagem que o usuário precisará clicar para executar a ação.

Por exemplo: https://i.imgur.com/suCWxMs.png

  • Caso esteja inserindo um código HTML em uma aba ou item novo, complete os dados de título, descrição e imagem do ícone para que seja possível salvar após inserir o código HTML.

 

Códigos HTML: modelos

  • E-mail

Com essa formatação, fica mais fácil para o usuário entrar em contato enviando e-mail. Quando ele clicar no e-mail adicionado ou na frase personalizada, será direcionado para o envio do e-mail diretamente do app de emails padrão que ele tiver.

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'mailto:INSIRA AQUI O ENDEREÇO DE E-MAIL',
      '_system', 'location=yes'); return false;"
  >
    FRASE PERSONALIZADA OU O PRÓPRIO E-MAIL NOVAMENTE
  </a>
</p> 

Exemplo:

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'mailto:oi@fabricadeaplicativos.com.br',
      '_system', 'location=yes'); return false;"
  >
    Envie um e-mail
  </a>
</p>

Para utilizar uma imagem ou botão no lugar da frase personalizada, você pode inserir a URL da imagem nesse formato:

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'mailto:oi@fabricadeaplicativos.com.br',
      '_system', 'location=yes'); return false;"
  >
    <img src="URL DA IMAGEM OU BOTÃO" alt="" />
  </a>
</p>

Exemplo:

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'mailto:oi@fabricadeaplicativos.com.br',
      '_system', 'location=yes'); return false;"
  >
    <img src="https://i.imgur.com/8b7Riqh.png" style="width:18%;">
  </a>
</p>


 

  • Clique para ligar

A opção de clique-para-ligar facilita a navegação do usuário do aplicativo, pois permite que ao clicar no número, ou imagem, a ligação seja feita.

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'tel:INSIRA AQUI O NÚMERO DE TELEFONE',
      '_system', 'location=yes'); return false;"
  >
    FRASE PERSONALIZADA OU O NÚMERO DE TELEFONE NOVAMENTE
  </a>
</p> 

Exemplo:

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'tel:DDD SEM O 0 + NÚMERO DE TELEFONE',
      '_system', 'location=yes'); return false;"
  >
    CLIQUE AQUI PARA LIGAR
  </a>
</p> 

Para utilizar uma imagem ou botão no lugar da frase personalizada, você pode inserir a URL da imagem nesse formato:

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'tel:DDD SEM O 0 + NÚMERO DE TELEFONE',
      '_system', 'location=yes'); return false;"
  >
    <img src="URL DA IMAGEM/BOTÃO">
  </a>
</p>  

Exemplo:

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'tel:11999999999',
      '_system', 'location=yes'); return false;"
  >
    <img src="https://i.imgur.com/ykosfkB.png" style="width:18%;">
  </a>
</p> 

  • Botões de contato na mesma linha

Insira todos os contatos dentro do mesmo parágrafo. O código para isso é <p> para abrir e </p> para fechar. Ou seja, se deseja que todos os códigos de botões permaneçam na mesma linha insira dessa forma:

<p> INSIRA AQUI TODOS OS CÓDIGOS DE BOTÕES DE CONTATO </p>

Se quiser que cada botão fique em uma linha, abra um parágrafo para cada um. Por exemplo:

<p> CÓDIGO DO BOTÃO DE E-MAIL </p>
<p> CÓDIGO DO BOTÃO DE TELEFONE </p>


 

  • Links Externos

Esse código permite direcionar o usuário do app para um site externo, fora do aplicativo, em apenas um clique.

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'URL DA PÁGINA EXTERNA',
      '_system', 'location=yes'); return false;"
  >
    FRASE PERSONALIZADA
  </a>
</p> 

Exemplo:

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'https://www.fabricadeaplicativos.com.br',
      '_system', 'location=yes'); return false;"
  >
    Acesse nosso site
  </a>
</p> 

Para utilizar uma imagem ou botão no lugar da frase personalizada, você pode inserir a URL da imagem nesse formato:

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'https://www.fabricadeaplicativos.com.br',
      '_system', 'location=yes'); return false;"
  >
    <img src="URL DA IMAGEM">
  </a>
</p>

Exemplo:

<p>
  <a
    href="#" style="text-decoration: none;"
    onclick="window.open(
      'https://www.fabricadeaplicativos.com.br',
      '_system', 'location=yes'); return false;"
  >
    <img src="https://i.imgur.com/vzqfZTh.png" style="width:18%;">
  </a>
</p>

 
 

  • E-mail 
<a
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'mailto:oi@fabricadeaplicativos.com.br',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/RSfJSAa.png" style="width:10%;">
</a>

 

  • Telefone 
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'tel:11999999999',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/SmGIKJk.png" style="width:10%;">
</a>

 
 

  • Website
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://www.fabricadeaplicativos.com.br',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/jPisUHA.png" style="width:10%;">
</a>


 

  • Facebook 
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://www.facebook.com/FabricaDeAplicativos/',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/ZrEcZLx.png" style="width:10%;">
</a>

 
 

  • Twitter
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://twitter.com/FabricadeApp',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/NfSIFFv.png" style="width:10%;">
</a>

 

  • Linkedin
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://pt.linkedin.com/company/fabricadeaplicativos',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/xLOLhGu.png" style="width:10%;">
</a>

 

  • Whatsapp
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/suCWxMs.png" style="width:10%;">
</a>

 

  • Instagram
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://www.instagram.com/fabricadeaplicativos/',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/x8bcdVD.png" style="width:10%;">
</a>


  • Botões de compartilhamento

Como fazer para que todos os botões de contato permaneçam na mesma linha

Para isso você precisa inserir todos dentro do mesmo parágrafo, o código para isso é <p> para abrir e </p> para fechar, ou seja, se deseja que todos os códigos de botões permaneçam na mesma linha você insere:

<p> TODOS OS CÓDIGOS DE BOTÕES </p>

Agora, se quer que cada botão fique em uma linha, você abre um parágrafo para cada um, exemplo:

<p> CÓDIGO DO BOTÃO DE E-MAIL </p>
<p> CÓDIGO DO BOTÃO DE TELEFONE </p>

 

  • Facebook
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://www.facebook.com/share.php?u=https://fabricadeaplicativos.com.br/',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/ZrEcZLx.png" style="width:18%;">
</a>

 
 

  • Twitter
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://twitter.com/share?url=https://fabricadeaplicativos.com.br/',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/NfSIFFv.png" style="width:18%;">
</a>

 

  • Linkedin
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://www.linkedin.com/shareArticle?url=https://fabricadeaplicativos.com.br/',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/xLOLhGu.png" style="width:18%;">
</a>

  • Google Play
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://plus.google.com/share?url=https://fabricadeaplicativos.com.br/',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/Nh5PhWN.png" style="width:18%;">
</a>

 

  • Whatsapp
<a 
  href="#" style="text-decoration: none;"
  onclick="window.open(
    'https://api.whatsapp.com/send?text=Veja:LINK_QUE_DESEJA_COMPARTILHAR',
    '_system', 'location=yes'); return false;"
>
  <img src="https://i.imgur.com/suCWxMs.png" style="width:18%;">
</a>

__________________________________________________________

Nosso objetivo é o seu sucesso. Por isso, em qualquer dificuldade ou necessidade, não exite 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?