***Saiba como colocar whatsapp no site

Como quebrar linha em link do whatsapp?

Leia mais sobre: quebra de linha whatsapp api

Tem como fazer o link com quebra de texto aqui no site e logo abaixo ensino como configurar a url para aplicar a quebra de texto.

Como você já deve saber o whatsapp disponibiliza uma API para gerar link de contato pela ferramenta. Essa API tem a opção de gerar o texto com link.

Esse link é bem simples, aqui no site ensino a fazer e tem como gerar automaticamente também. O que complica um pouco é como formatar o texto que pode acompanhar os parâmetros, como tratar os caracteres que não são alfa numéricos. A API irá remover qualquer tipo de código inapropriado, pelo processo de limpeza ou sanitização.

Existe aqui no site, uma maneira bem fácil de gerar o link para o whatsapp já com o texto, basta você usar o link abaixo e dar enter na caixa de texto que o sistema já irá configurar a quebra de linha na url.

Gerador de link com texto para WhatsApp: crie e compartilhe gratuitamente

Se você não quer apenas gerar o link, mas precisa usar isso em algum site ou sistema, vou explicar em seguida como configurar a url, mostrando quais os padrões de codificação usados.

Para usar o texto formatado na API do whatsapp você precisa usar o url encode no seu código, pois assim o texto irá ficar no padrão utilizado em url e que o whatsapp interpreta corretamente.

Isso irá substituir no texto os caracteres que não são letras sem acento e números pelo seu correspondente de acordo com o padrão ASCII. Isso significa que os espaços serão substituídos por %20 por exemplo.

Para o enter ou quebra de linha é usado %0A, e se quiser ainda pular uma linha poder ser usado duas vezes, %0A%0A.

Por exemplo, o texto: "texto sem quebre de linha";
Ficária assim: "texto%20sem%20quebre%20de%20linha";
Agora o "texto com quebra de linha";
Ficaria: "texto%0Acom%0Aquebra%0Ade%0Alinha";
No whatsapp seria impresso assim:

texto
com
quebra
de
linha

Já o "texto pulando linha";
Ficaria: "texto%0A%0Apulando%0A%0Alinha";
No whatsapp seria impresso assim:

texto

pulando

linha

Então o %0A já resolve a quebra de linha, até em navegadores antigos. Se quiser aplicar isso no código clique no link abaixo.

Como fazer formatação de texto do link do whatsapp?

Veja mais:

Como colocar espaço no link do WhatsApp?
Como criar um Bit.ly para WhatsApp?
Como criar um link do whatsapp de graça?
Como criar um link para o seu WhatsApp?
Como criar uma URL personalizada?
Como dar Enter e pular linha no WhatsApp Web?
Como editar o link curto do WhatsApp Business?
Como fazer link whatsapp com anexo?
Como personalizar o link?
Como personalizar uma mensagem no WhatsApp?
Como pular linha no whatsapp android?
como pular linha no whatsapp pelo celular?
Como Pular Linha no Whatsapp Web?
Como pular para outra linha?
como quebrar linha whatsapp web?
Como transformar um texto em link no WhatsApp?
Qual é a diferença entre \n e \r\n?
Que mensagem deixar no link do WhatsApp?
Como gerar um link para WhatsApp?
Como fazer o link do WhatsApp pequeno?

Leia mais sobre: quebra de linha whatsapp api

Como fazer botão flutuante no site?

Leia mais sobre: Botão flutuante

Para isso é usado principalmente position: fixed; no CSS assim:

Segue abaixo o código dos botões flutuantes utilizados aqui no site, usando o whatsapp como exemplo, começando pelo CSS.

.icones { /* Aqui é iniciado a configuração geral dos botões ou icones. */
    position: fixed; /* Aqui é definido o position como fixed que torna o bloco inserido flutuante com orientação na página geral. */
    bottom: 2%; /* Para deixar os botões na parte inferior da página é usado o bottom com um valor pequeno, no caso 2%. */
    left: 50%; /* Para centralizar os botões no meio da página é usado o left com 50%. */
    padding: 1%; /* Aqui é inserido um pequeno espaço dentro do bloco. */
    z-index: 10000000; /* O z-index é usado para uma ordenação do estilo, por isso aqui é usado um valor alto, para ficar por cima dos outros. */
}
.icones img:hover { /* Aqui é definido o efeito quando o mouse passa por cima da imagem */
    filter: invert(100%); /* Foi usado o filter: invert para colocar as cores opostas das imagens. */
}

Abaixo segue a parte do código em HTML com o exemplo do botão do whatsapp, mas pode ser usado qualquer outro. Primeiro vou inserir a linha do HTML e depois comentá-las.

<div class="icones col-sm-12" >

<a href="https://api.whatsapp.com/send?text=<?php echo 'https://diretoaoponto-tech.com.br'.$_SERVER["REQUEST_URI"]; ?>" target="_blank">

<img class="img-responsive" src="/img/whatsapp-watercolor.png" alt="botão de compartilhamento whatsapp" title="Compartilhe o link da página no whatsapp">

</a>

</div>

Como colocar botão do whatsapp no site?

Leia mais sobre: Botão whatsapp no site

Pode ser usada uma imagem para fazer o link para whatsapp web logado.

Como essa:

Com um link como esse:

<a href="https://api.whatsapp.com/send?phone=CELULAR_DO_WHATSAPP&text=Oi%2C%20encontrei%20o%20site%20na%20internet%2C%20gostaria%20de%20saber%20mais%20sobre" target="_blank">

<img src="/imagens/whats.png">

</a>

O link é para api do whatsapp. Nele são passados alguns parâmetros obrigatórios ou não.

O primeiro é o phone, aqui é passado o telefone com whatsapp que irá receber a mensagem. Esse parâmetro é obrigatório.

Depois pode ser passado um texto padrão para o contato, passado no text. Neste exemplo é passado "Oi encontrei o site na internet gostaria de saber mais sobre".

Por último se usa uma tag a target com _blank para abrir a página do whatsapp em uma nova aba, sem tirar o cliente do site.

Leia mais sobre: Botão whatsapp no site