Como adicionar um botão de ligação nas páginas do site

Um botão de ligação nas páginas do site faz uma coisa pequena muito bem: transforma seu número de telefone num link que o visitante toca uma vez para iniciar a ligação. Sem copiar dígitos, sem trocar de aplicativo, sem apertar os olhos para ler um rodapé. Para um negócio local que vive de ligações, esse único toque muitas vezes é a diferença entre um trabalho fechado e um visitante que vai embora.

Este guia percorre a configuração real, as partes que a maioria dos tutoriais pula (ramais, acessibilidade, teste em celulares reais), e como saber se o botão está cumprindo o papel dele. Quase tudo aqui se aplica seja qual for a ferramenta ou plataforma que você use.

Por que ligações ainda importam para negócios locais

Se você tem uma equipe de telhados, uma empresa de ar-condicionado, uma operação de restauração ou um estúdio de bem-estar, seus clientes muitas vezes querem falar com um humano antes de se comprometer. Alguém com um telhado vazando às 19h não vai preencher um formulário de contato e esperar dois dias. Ela quer ouvir uma voz.

Ligações também tendem a ter intenção mais alta que preenchimentos de formulário. Quem disca seu número já decidiu que quer ajuda agora. É por isso que tantos donos tratam o telefone como seu canal de venda principal e todo o resto do site como um jeito de fazer as pessoas pegarem o telefone.

O problema é o atrito. Numa tela de celular, um número simplesmente impresso obriga o visitante a memorizá-lo, sair do seu site, abrir o discador e digitar. Cada uma dessas etapas perde algumas pessoas. Um link de ligação com um toque remove todas elas.

O que é, de fato, um botão de ligação

Por baixo do capô, isso não é complicado. Um link comum aponta para um endereço web. Um link de ligação aponta para um número de telefone usando um pequeno pedaço de código padrão chamado protocolo "tel". Quando alguém toca nele no celular, o sistema operacional reconhece o número e abre o discador com o seu número já preenchido.

O link tem duas partes:

O destino, escrito como a palavra tel, dois pontos, e o seu número em formato internacional (com código do país, sem espaços ou traços).
O texto ou botão visível que o visitante de fato vê e toca, como "Ligar para nós" ou o seu número formatado.

Então a parte legível por máquina pode ser tel:+5511912345678 enquanto a parte que seu cliente vê diz Ligar (11) 91234-5678. A versão visível pode ser bonita e amigável; a versão oculta precisa ser rígida e limpa.

O formato de número que evita ligações que caem

Esse é o lugar único mais comum onde as pessoas erram, e raramente aparece até um cliente reclamar.

Sempre escreva o número no link em formato internacional completo. Isso significa um sinal de mais, depois o código do país, depois o número completo, sem parênteses, espaços, traços ou pontos. Para um número brasileiro isso fica como +5511912345678. Para um número de Portugal fica como +351210000000.

Por que ser tão rígido? Porque uma fatia crescente de visitantes está em redes móveis que roteiam de forma diferente, está viajando, ou usa um celular configurado para outra região. Um número escrito no jeito local solto (só os dígitos) pode falhar para essas pessoas mesmo funcionando perfeitamente no seu próprio celular. O formato internacional funciona em todo lugar, então use-o sempre, mesmo para um público puramente local.

Mais um detalhe: o texto visível não precisa combinar com o formato rígido. Mostre para as pessoas a versão amigável e legível. Mantenha a versão rígida dentro do próprio link.

Lidando com ramais e menus

A maioria dos guias para no número básico, o que deixa de fora quem precisa chegar a um setor específico. Se suas ligações passam por um ramal ou um menu automático, você pode embutir isso no link para o telefone discar sozinho para o visitante.

Dois caracteres especiais ajudam aqui:

Uma vírgula insere uma pausa curta, normalmente de uns dois segundos. Use-a para esperar um menu começar a falar antes de enviar os próximos dígitos.
Um ponto e vírgula marca dígitos que o telefone deve esperar para enviar até a ligação conectar e o menu estar pronto.

Então um link pode discar sua linha principal, pausar, e aí enviar um ramal automaticamente. O suporte a isso varia um pouco entre modelos de celular, então se ramais importam para o seu negócio, teste o link exato em alguns aparelhos reais antes de depender dele.

Onde colocar o botão para as pessoas de fato usarem

Um link de ligação que ninguém vê é como se não existisse. Posicionamento importa mais que estilo.

Topo da página. Coloque um número tocável no cabeçalho para ele ficar visível no instante em que alguém chega, sem rolar.
Um botão fixo ou flutuante. Um botão pequeno que fica na tela enquanto o visitante rola mantém a opção de ligar sempre a um toque do polegar. Isso costuma funcionar bem em celulares onde o espaço de tela é apertado.
Perto de cada chamada para ação. Onde quer que você peça para agendar, orçar ou marcar, ofereça a opção de ligar bem ao lado. Algumas pessoas sempre vão preferir falar a digitar.
O rodapé. Não substitui os itens acima, mas é um recurso confiável para quem rola até o fim procurando dados de contato.

Faça a área de toque grande o bastante para um polegar. Uma boa regra é ao menos uma área de 44 por 44 pixels para as pessoas não precisarem mirar. Adicione um pequeno ícone de telefone e use uma cor que se destaque do resto da página para o botão parecer clicável, não decoração.

Visitantes no computador: o que acontece quando clicam

Celulares são o evento principal, mas cliques no computador não devem quebrar. No computador, tocar num link de ligação não faz um telefone tocar. Em vez disso, o navegador normalmente pergunta qual aplicativo deve lidar com isso, ou abre o software de chamada instalado, como um app de videochamada ou de voz. Às vezes nada óbvio acontece.

Tudo bem, desde que você se prepare para isso. Mantenha o número legível como texto ao lado ou dentro do botão para o visitante no computador ainda vê-lo e discar do próprio celular. Nunca esconda seu número atrás de um ícone apenas, porque um usuário de computador que não consegue clicar não tem como te alcançar.

Acessibilidade: a parte que quase todos pulam

Um botão que funciona para quem usa leitor de tela é um botão que funciona para todo mundo, e é fácil de acertar.

Use texto de link de verdade, não só um ícone. Se o botão é apenas um símbolo de telefone, adicione um rótulo oculto para a tecnologia assistiva anunciar algo como "Ligar para o nosso escritório" em vez de "link".
Descreva a ação. "Ligar para nós no 11 91234-5678" diz ao visitante exatamente o que o toque faz. Rótulos vagos como "clique aqui" não ajudam ninguém.
Mantenha bom contraste de cor. O texto do botão precisa se destacar claramente do fundo para pessoas com baixa visão conseguirem lê-lo.
Torne-o alcançável pelo teclado. Um link adequado recebe foco e pode ser acionado sem mouse. Botões personalizados feitos do jeito errado às vezes perdem isso, então confira se você consegue chegar nele com Tab e ativá-lo pelo teclado.

Essas pequenas escolhas também tornam seu botão mais claro para todo visitante apressado, distraído e usando uma mão só, que é a maioria deles.

Como testar antes de confiar

Não presuma que funciona só porque parece certo no seu notebook. Passe por este checklist rápido em hardware real:

Abra a página no ar num celular de verdade, não só numa prévia de navegador de computador, e toque no botão. O discador deve abrir com o número correto preenchido.
Teste tanto num iPhone moderno quanto num Android, se puder. O comportamento difere levemente entre eles.
Confirme que o número que aparece está completo e correto, incluindo o código do país.
Se você usa ramal ou pausa de menu, faça uma ligação de teste real até o fim.
Verifique que o botão fica visível sem dar zoom e que seu polegar acerta nele com facilidade.

Um botão de ligação que disca o número errado, ou um número com um dígito faltando, é pior que nenhum botão. Ele manda clientes motivados em silêncio para um beco sem saída. Teste no dia em que adicionar, e de novo toda vez que trocar seu número.

Saber se o botão está funcionando

Adicionar o botão é o passo um. Saber se ele gera ligações é o passo dois, e é onde você decide o que melhorar.

A maioria das ferramentas de análise permite registrar um clique num link de ligação como um evento. Configure isso para poder ver quantas pessoas tocam para ligar por semana e quais páginas geram mais toques. Compare isso com seus trabalhos fechados de fato para ter uma noção de quantos toques viram conversas reais.

Um alerta: um toque nem sempre é uma ligação concluída. As pessoas mudam de ideia, discam errado ou desligam. Trate a contagem de cliques como um sinal de interesse, não uma promessa de faturamento, e apoie-se no que sua equipe de fato ouve no telefone para julgar a qualidade.

Um caminho mais simples se código não é a sua praia

Se editar o código do seu site, procurar o painel de HTML e testar links tel entre aparelhos parece uma chatice, você não está sozinho. Muitos donos só querem que o número funcione e o botão fique certo sem tocar em código.

Essa é uma das pequenas coisas que a Saynovo tira do seu prato. Quando ela monta seu site a partir do Perfil da Empresa no Google, ela lê o número de telefone que você já listou lá e configura um botão de ligação com um toque adequado para você, formatado corretamente e posicionado onde os visitantes no celular vão vê-lo. Se seu número mudar, você diz ao site em linguagem comum e ele atualiza, então você não volta para um editor de código atrás de um link quebrado. É uma abordagem feita pra você, voltada para donos de negócios locais e de serviços para a casa que preferem atender ligações a administrar código.

A versão curta

Um botão de ligação nas páginas do site é uma das mudanças de maior retorno e menor esforço que um negócio local pode fazer. Acerte três coisas e você já está à frente da maioria dos concorrentes:

Escreva o número no link em formato internacional completo para funcionar para todos.
Coloque um botão grande, óbvio e amigável ao polegar onde os visitantes no celular o veem sem rolar, e mantenha o número legível para computador.
Teste em celulares reais e acompanhe os toques para saber que ele está cumprindo o papel.

Faça isso, e a próxima pessoa com um problema urgente chega até você em um único toque, em vez de desistir e ligar para outro.