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.
<style>
.main-content {
background-color: #FF007F;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
}
</style>
<div class="main-content">
<!-- Escreva seu conteudo aqui -->
Teste
</div>
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.
<p>
<a href="mailto:INSIRA AQUI O ENDEREÇO DE E-MAIL" >
FRASE PERSONALIZADA OU O PRÓPRIO E-MAIL NOVAMENTE
</a>
</p>
Exemplo:
<p>
<a href="mailto:oi@fabricadeaplicativos.com.br" >
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="mailto:oi@fabricadeaplicativos.com.br">
<img src="URL DA IMAGEM OU BOTÃO" alt="" />
</a>
</p>
Exemplo:
<p>
<a href="mailto:oi@fabricadeaplicativos.com.br">
<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="tel:DDD + 0 + NÚMERO DE TELEFONE">
<img alt="" style="width: 20%; height: " />
CLIQUE AQUI PARA LIGAR
</a>
</p>
Exemplo:
<p>
<a href="tel:+5511999999999">
<img alt="" style="width: 20%; height: " />
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="tel:+5511999999999">
<img alt="" src="URL DA IMAGEM/BOTÃO" style="width: 20%; height: " />
</a>
</p>
Exemplo:
<p>
<a href="tel:+5511999999999">
<img alt="" src="https://i.imgur.com/ykosfkB.png" style="width: 20%; height: "/>
</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="URL DA PÁGINA EXTERNA">
FRASE PERSONALIZADA
</a>
</p>
Exemplo:
<p>
<a href="https://www.fabricadeaplicativos.com.br">
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="https://www.fabricadeaplicativos.com.br">
<img src="URL DA IMAGEM">
</a>
</p>
Exemplo:
<p>
<a href="https://www.fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/vzqfZTh.png" style="width:18%;"/>
</a>
</p>
E-mail
<p>
<a href="mailto:oi@fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/RSfJSAa.png" style="width:10%;">
</a>
</p>
Telefone
<p>
<a href="tel:11999999999">
<img src="https://i.imgur.com/SmGIKJk.png" style="width:10%;">
</a>
</p>
Website
<p>
<a href="https://www.fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/jPisUHA.png" style="width:10%;">
</a>
</p>
Facebook
<p>
<a href="https://www.fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/ZrEcZLx.png" style="width:10%;">
</a>
</p>
Twitter
<p>
<a href="https://www.fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/NfSIFFv.png" style="width:10%;">
</a>
</p>
Linkedin
<p>
<a href="https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000">
<img src="https://i.imgur.com/xLOLhGu.png" style="width:10%;">
</a>
</p>
Whatsapp
<p>
<a href="https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000"
><img src="https://i.imgur.com/suCWxMs.png" style="width: 20%" />
</a>
</p>
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
<p>
<a href="https://www.instagram.com/fabricadeaplicativos/">
<img src="https://i.imgur.com/x8bcdVD.png" style="width:10%;">
</a>
</p>
Telegram
<p>
<a href="https://t.me/Nomedeusuário/">
<img src="https://i.imgur.com/1P4IIaD.png" style="width:12%;"/>
</a>
</p>
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>
Aba completa para divulgar um estabelecimento
<style type="text/css">body{
padding: 5px 30px 5px 10px;
background-color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0px;
font-family: 'Roboto', sans-serif;
}
.s {
width: 100%;
display: flex;
justify-content: space-around;
margin-top:30px;
margin-bottom:45px;
}
p{
color:grey;
}
.titleb2{
color:#ffffff;
float:center;
}
.btn1{
color: #ffffff;
background-color:#742fc2;
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;
}
u{
text-decoration:none;
}
</style>
<!--Botões de mídias sociais-->
<div>
<div class="s"><a href="#" onclick="window.open('https://www.instagram.com/fabricadeaplicativos/', 'location=yes');
return false;" style="text-decoration: none;"><img src="https://i.imgur.com/x8bcdVD.png" width="30px" /> </a> <a href="#" onclick="window.open('https://www.facebook.com/', 'location=yes');
return false;" style="text-decoration: none;"> <img src="https://i.imgur.com/ZrEcZLx.png" width="30px" /> </a> <a href="#" onclick="window.open(
'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
'_system', 'location=yes'); return false;" style="text-decoration: none;"> <img src="https://i.imgur.com/suCWxMs.png" width="30px" /> </a></div>
</div>
<!--Texto da apresentação-->
<h3>ÓTICAS CAROL</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus sodales dictum. Ut rutrum libero in lacus porta maximus. Duis mattis magna non sem vestibulum, in congue erat hendrerit. Integer dignissim, nisl sed dignissim vestibulum, odio ex congue dui, in rhoncus nisl justo at felis. Vestibulum rutrum faucibus massa ultrices imperdiet. Nulla consectetur ipsum tellus. Phasellus hendrerit et diam molestie ultrices. Sed erat ligula, eleifend nec lacinia at, eleifend sit amet augue.</p>
<iframe allowfullscreen="" height="300" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14628.782787138132!2d-46.6558819!3d-23.561414!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe904f6a669744da1!2sMuseu%20de%20Arte%20de%20S%C3%A3o%20Paulo%20Assis%20Chateaubriand!5e0!3m2!1spt-BR!2sbr!4v1638538245328!5m2!1spt-BR!2sbr" style="border:0;" width="100%"></iframe>
<p><!--Botão de contato--></p>
<div class="alinhabtn">
<p><button class="btn1" data-moblet="" href="#" onclick="window.open(
'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
'_system', 'location=yes'); return false;" style="text-decoration: none;"><u class="titleb2" data-moblet="21981142">Contato</u></button></p>
</div>
<p>Veja o template desta tela <a href="#" onclick="window.open(
'https://jsfiddle.net/lucasranna/9j4Lrspw/',
'_system', 'location=yes'); return false;" style="text-decoration: none;">aqui</a></p>
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:
<style type="text/css">.main{
padding: 10px;
}
.s {
width: 100%;
display: flex;
justify-content: space-around;
margin-top:30px;
margin-bottom:45px;
}
b{
font-size:20px;
font-family: 'Roboto', sans-serif;}
p{
color:grey;
}
.titleb{
color:#20446a;
float:center;
}
.titleb2{
color:#FFFFFF;
float:center;
}
.btn{
color: #ffffff;
background-color:transparent;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
border-radius: 10px;
border: 1px solid #5F81B0 ;
margin-top: 5px;
margin-bottom: 5px;
font-size:15px;
}
.btn1{
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;
}
u{
text-decoration:none;
}
</style>
<!--Botões de mídias sociais-->
<div class="main">
<div>
<div class="s"><a href="#" onclick="window.open('https://www.instagram.com/fabricadeaplicativos/', 'location=yes');
return false;" style="text-decoration: none;"><img src="https://imgur.com/Qjn4NwR.png" width="70px" /> </a> <a href="#" onclick="window.open('https://www.facebook.com/', 'location=yes');
return false;" style="text-decoration: none;"> <img src="https://imgur.com/zdHUhCY.png" width="70px" /> </a> <a href="#" onclick="window.open(
'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
'_system', 'location=yes'); return false;" style="text-decoration: none;"> <img src="https://imgur.com/jC7puOo.png" width="70px" /> </a></div>
</div>
<!--Texto da apresentação-->
<h3><strong>Regatas Club</strong> - onde o descanso e o entretenimento andam juntos</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus sodales dictum. Ut rutrum libero in lacus porta maximus. Duis mattis magna non sem vestibulum, in congue erat hendrerit. Integer dignissim, nisl sed dignissim vestibulum, odio ex congue dui, in rhoncus nisl justo at felis. Vestibulum rutrum faucibus massa ultrices imperdiet. Nulla consectetur ipsum tellus. Phasellus hendrerit et diam molestie ultrices. Sed erat ligula, eleifend nec lacinia at, eleifend sit amet augue.</p>
<iframe allowfullscreen="" height="650" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14621.459985938072!2d-46.563328!3d-23.6270962!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5d272179ba1d%3A0x696e324c84fb0abc!2sMercure%20S%C3%A3o%20Caetano%20do%20Sul!5e0!3m2!1spt-BR!2sbr!4v1647270193995!5m2!1spt-BR!2sbr" style="border:0;" width="600"></iframe>
<p><!--Botão de contato Whatsapp--></p>
<div class="alinhabtn">
<p><button class="btn1" data-moblet="" href="#" onclick="window.open(
'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
'_system', 'location=yes'); return false;" style="text-decoration: none;"><u class="titleb2" data-moblet="">Contato</u></button></p>
</div>
<!--Link do template de html-->
<p>Veja o template desta tela <a href="#" onclick="window.open(
'https://jsfiddle.net/lucasranna/pL4ahbcz/',
'_system', 'location=yes'); return false;" style="text-decoration: none;">aqui</a></p>
</div>
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.
<style>
.main-content {
background-color: #FF007F;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
}
</style>
<div class="main-content">
<!-- Escreva seu conteudo aqui -->
Teste
</div>
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.
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="mailto:INSIRA AQUI O ENDEREÇO DE E-MAIL" >
FRASE PERSONALIZADA OU O PRÓPRIO E-MAIL NOVAMENTE
</a>
</p>
Exemplo:
<p>
<a href="mailto:oi@fabricadeaplicativos.com.br" >
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="mailto:oi@fabricadeaplicativos.com.br">
<img src="URL DA IMAGEM OU BOTÃO" alt="" />
</a>
</p>
Exemplo:
<p>
<a href="mailto:oi@fabricadeaplicativos.com.br">
<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="tel:DDD + 0 + NÚMERO DE TELEFONE">
<img alt="" style="width: 20%; height: " />
CLIQUE AQUI PARA LIGAR
</a>
</p>
Exemplo:
<p>
<a href="tel:+5511999999999">
<img alt="" style="width: 20%; height: " />
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="tel:+5511999999999">
<img alt="" src="URL DA IMAGEM/BOTÃO" style="width: 20%; height: " />
</a>
</p>
Exemplo:
<p>
<a href="tel:+5511999999999">
<img alt="" src="https://i.imgur.com/ykosfkB.png" style="width: 20%; height: "/>
</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="URL DA PÁGINA EXTERNA">
FRASE PERSONALIZADA
</a>
</p>
Exemplo:
<p>
<a href="https://www.fabricadeaplicativos.com.br">
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="https://www.fabricadeaplicativos.com.br">
<img src="URL DA IMAGEM">
</a>
</p>
Exemplo:
<p>
<a href="https://www.fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/vzqfZTh.png" style="width:18%;"/>
</a>
</p>
<p>
<a href="mailto:oi@fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/RSfJSAa.png" style="width:10%;">
</a>
</p>
Telefone
<p>
<a href="tel:11999999999">
<img src="https://i.imgur.com/SmGIKJk.png" style="width:10%;">
</a>
</p>
Website
<p>
<a href="https://www.fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/jPisUHA.png" style="width:10%;">
</a>
</p>
<p>
<a href="https://www.fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/ZrEcZLx.png" style="width:10%;">
</a>
</p>
<p>
<a href="https://www.fabricadeaplicativos.com.br">
<img src="https://i.imgur.com/NfSIFFv.png" style="width:10%;">
</a>
</p>
<p>
<a href="https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000">
<img src="https://i.imgur.com/xLOLhGu.png" style="width:10%;">
</a>
</p>
<p>
<a href="https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000"
><img src="https://i.imgur.com/suCWxMs.png" style="width: 20%" />
</a>
</p>
Você pode usar esse site para gerar um link com uma mensagem automática de direcionamento:
https://www.convertte.com.br/gerador-link-whatsapp/
<p>
<a href="https://www.instagram.com/fabricadeaplicativos/">
<img src="https://i.imgur.com/x8bcdVD.png" style="width:10%;">
</a>
</p>
Telegram
<p>
<a href="https://t.me/Nomedeusuário/">
<img src="https://i.imgur.com/1P4IIaD.png" style="width:12%;"/>
</a>
</p>
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>
<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>
<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>
<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>
<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>
Aba completa para divulgar um estabelecimento
<style type="text/css">body{
padding: 5px 30px 5px 10px;
background-color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0px;
font-family: 'Roboto', sans-serif;
}
.s {
width: 100%;
display: flex;
justify-content: space-around;
margin-top:30px;
margin-bottom:45px;
}
p{
color:grey;
}
.titleb2{
color:#ffffff;
float:center;
}
.btn1{
color: #ffffff;
background-color:#742fc2;
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;
}
u{
text-decoration:none;
}
</style>
<!--Botões de mídias sociais-->
<div>
<div class="s"><a href="#" onclick="window.open('https://www.instagram.com/fabricadeaplicativos/', 'location=yes');
return false;" style="text-decoration: none;"><img src="https://i.imgur.com/x8bcdVD.png" width="30px" /> </a> <a href="#" onclick="window.open('https://www.facebook.com/', 'location=yes');
return false;" style="text-decoration: none;"> <img src="https://i.imgur.com/ZrEcZLx.png" width="30px" /> </a> <a href="#" onclick="window.open(
'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
'_system', 'location=yes'); return false;" style="text-decoration: none;"> <img src="https://i.imgur.com/suCWxMs.png" width="30px" /> </a></div>
</div>
<!--Texto da apresentação-->
<h3>ÓTICAS CAROL</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus sodales dictum. Ut rutrum libero in lacus porta maximus. Duis mattis magna non sem vestibulum, in congue erat hendrerit. Integer dignissim, nisl sed dignissim vestibulum, odio ex congue dui, in rhoncus nisl justo at felis. Vestibulum rutrum faucibus massa ultrices imperdiet. Nulla consectetur ipsum tellus. Phasellus hendrerit et diam molestie ultrices. Sed erat ligula, eleifend nec lacinia at, eleifend sit amet augue.</p>
<iframe allowfullscreen="" height="300" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14628.782787138132!2d-46.6558819!3d-23.561414!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe904f6a669744da1!2sMuseu%20de%20Arte%20de%20S%C3%A3o%20Paulo%20Assis%20Chateaubriand!5e0!3m2!1spt-BR!2sbr!4v1638538245328!5m2!1spt-BR!2sbr" style="border:0;" width="100%"></iframe>
<p><!--Botão de contato--></p>
<div class="alinhabtn">
<p><button class="btn1" data-moblet="" href="#" onclick="window.open(
'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
'_system', 'location=yes'); return false;" style="text-decoration: none;"><u class="titleb2" data-moblet="21981142">Contato</u></button></p>
</div>
<p>Veja o template desta tela <a href="#" onclick="window.open(
'https://jsfiddle.net/lucasranna/9j4Lrspw/',
'_system', 'location=yes'); return false;" style="text-decoration: none;">aqui</a></p>
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:
<style type="text/css">.main{
padding: 10px;
}
.s {
width: 100%;
display: flex;
justify-content: space-around;
margin-top:30px;
margin-bottom:45px;
}
b{
font-size:20px;
font-family: 'Roboto', sans-serif;}
p{
color:grey;
}
.titleb{
color:#20446a;
float:center;
}
.titleb2{
color:#FFFFFF;
float:center;
}
.btn{
color: #ffffff;
background-color:transparent;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
border-radius: 10px;
border: 1px solid #5F81B0 ;
margin-top: 5px;
margin-bottom: 5px;
font-size:15px;
}
.btn1{
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;
}
u{
text-decoration:none;
}
</style>
<!--Botões de mídias sociais-->
<div class="main">
<div>
<div class="s"><a href="#" onclick="window.open('https://www.instagram.com/fabricadeaplicativos/', 'location=yes');
return false;" style="text-decoration: none;"><img src="https://imgur.com/Qjn4NwR.png" width="70px" /> </a> <a href="#" onclick="window.open('https://www.facebook.com/', 'location=yes');
return false;" style="text-decoration: none;"> <img src="https://imgur.com/zdHUhCY.png" width="70px" /> </a> <a href="#" onclick="window.open(
'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
'_system', 'location=yes'); return false;" style="text-decoration: none;"> <img src="https://imgur.com/jC7puOo.png" width="70px" /> </a></div>
</div>
<!--Texto da apresentação-->
<h3><strong>Regatas Club</strong> - onde o descanso e o entretenimento andam juntos</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus sodales dictum. Ut rutrum libero in lacus porta maximus. Duis mattis magna non sem vestibulum, in congue erat hendrerit. Integer dignissim, nisl sed dignissim vestibulum, odio ex congue dui, in rhoncus nisl justo at felis. Vestibulum rutrum faucibus massa ultrices imperdiet. Nulla consectetur ipsum tellus. Phasellus hendrerit et diam molestie ultrices. Sed erat ligula, eleifend nec lacinia at, eleifend sit amet augue.</p>
<iframe allowfullscreen="" height="650" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14621.459985938072!2d-46.563328!3d-23.6270962!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5d272179ba1d%3A0x696e324c84fb0abc!2sMercure%20S%C3%A3o%20Caetano%20do%20Sul!5e0!3m2!1spt-BR!2sbr!4v1647270193995!5m2!1spt-BR!2sbr" style="border:0;" width="600"></iframe>
<p><!--Botão de contato Whatsapp--></p>
<div class="alinhabtn">
<p><button class="btn1" data-moblet="" href="#" onclick="window.open(
'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',
'_system', 'location=yes'); return false;" style="text-decoration: none;"><u class="titleb2" data-moblet="">Contato</u></button></p>
</div>
<!--Link do template de html-->
<p>Veja o template desta tela <a href="#" onclick="window.open(
'https://jsfiddle.net/lucasranna/pL4ahbcz/',
'_system', 'location=yes'); return false;" style="text-decoration: none;">aqui</a></p>
</div>
Atualizado em: 23/03/2023