Personalização com HTML

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

• 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);
• Vá para a caixa de edição de texto e então clique em em “Código-Fonte”;
• Feito isso, insira os códigos HTML que for utilizar, cujos exemplos você pode ver abaixo;
• Clique novamente em "Código-Fonte";
• Clique em "Salvar alterações" e em seguida em "Publicar" localizado no canto superior direito da plataforma;
• 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 do tutorial "Como testar o app antes de publicar
" disponível nessa Central de ajuda 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

Redirecionamento interno entre abas do app: busque nessa Central de ajuda por "Guia de utilização do data-moblet" e saiba mais.

• Alterar cor do fundo

Utilize esse código caso queira mudar a cor de fundo da página em branco ou do campi rich text o qual insere o código html.

Após, insira o restante do seu código. Lembre-se que a cor que deseja inserir deve ser colocada no lugar de #FF007F no formato hexadecimal. Defina a cor que deseja usar e procure no Google o hexadecimal da mesma. Depois só substitua esse código.

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

Exemplo:

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

• Botões de contato na mesma linha

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

• Links Externos

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

• E-mail

• Telefone

• Website

• Facebook

• Twitter

• Linkedin

• Whatsapp

Você pode usar esse site para gerar um link com uma mensagem automática de direcionamento:

https://www.convertte.com.br/gerador-link-whatsapp/

• Instagram

• Telegram

• 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 é para abrir e para fechar, ou seja, se deseja que todos os códigos de botões permaneçam na mesma linha você insere:

• 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;"

• Twitter

<a
href="#" style="text-decoration: none;"
onclick="window.open(
'https://twitter.com/share?url=https://fabricadeaplicativos.com.br/',
'_system', 'location=yes'); return false;"

• 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;"

• 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;"

• 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;">

Personalização de página em branco

Caso deseje uma página com ícone de redes sociais + mapa + descrição e título + botão para entrar em contato, o código abaixo é perfeito para você.

O interessante é que os botões de redes sociais são imagens, então, se desejar mudar a cor dos mesmos, basta retirar o link dessas imagens do código e substituir pelo link da imagem que você alterou e hospedou.

• Código:

<div class="main">

<div>

Atualizado em: 23/03/2023