Links de telefone: como adicionar links e CTAs que podem ser chamados ao seu site

Muitos sites de negócios mostram um número de telefone para que seus clientes possam contatá-los. Quando os desktops eram a forma mais popular de acessar os sites, os usuários anotavam o número de telefone e ligavam de um dispositivo separado. Claro, a maioria dos usuários agora acessa o site e faz a ligação do mesmo dispositivo. Isso abre uma oportunidade para adicionar um link de chamada - criando um número de telefone HTML que pode ser clicado.

Neste artigo, veremos como adicionar um link de chamada, bem como alguns outros links clicáveis, como e-mail e outros CTAs.

Inscreva-se no nosso canal no Youtube

Como funcionam os links de chamada

Tornar um número de telefone clicável é feito facilmente com HTML. HTML5 inclui protocolos como tel: e mailto: que os navegadores podem usar. Os navegadores respondem de maneira diferente a esses protocolos. Alguns irão iniciar o aplicativo de telefone e adicionar o número ao display enquanto esperam que você clique no botão Ligar. Outros farão a ligação, enquanto outros perguntarão se está tudo bem primeiro.

Uma vez que é HTML, você pode adicionar os protocolos em qualquer lugar em seu site, incluindo o cabeçalho, rodapé, barras laterais, dentro do conteúdo de postagens e páginas e dentro de widgets.

Adicionando um link de chamada de número de telefone HTML ao seu site

Adicione o código como texto ao local em que deseja que o link apareça:

<a href="tel:123-456-7890">123-456-7890</a>

Href = tel: cria o link de chamada. Isso informa ao navegador como usar o número.

“Tel: 123-456-7890“ cria o número de telefone HTML. O número entre aspas é o número para o qual ligará.

O número dentro das> <tags é a parte visual e pode ser qualquer coisa que você quiser, incluindo o número de telefone, uma linha de texto como “Click to Call” ou “Call Now”, ou qualquer outra frase de chamariz para você quer. Deve ser descritivo do que acontecerá quando eles clicarem.

Exibir uma mensagem em vez do número ficaria assim:

<a href="tel:123-456-7890">CLICK TO CALL</a>

Seus visitantes verão o texto, mas quando clicarem nele, verão a tela de discagem de seus telefones com o seu número pronto para clicarem no botão de chamada.

Adicionar uma extensão

Alguns números de telefone têm ramal. Você pode adicionar um código que criará uma breve pausa antes de discar o número do ramal. Adicionar P na frente da extensão adicionará uma pausa de um segundo. O código pode ser assim:

<a href="tel:123-456-7890p123">CLICK TO CALL</a>

Isso disca o número, espera um segundo e disca o ramal.

Você pode fazer com que ele espere por um tom de discagem usando w em vez de p .

Adicionar códigos de país

Os códigos de país podem ser adicionados incluindo um + junto com o código do seu país antes do número de telefone. Um exemplo pode ser assim:

<a href="tel:+1123-456-7890">123-456-7890</a>

Adicionando Microdados para SEO Local

Uma das minhas conveniências favoritas de carregar um smartphone é quando eu procuro por uma empresa local e o resultado no Google me dá um número de telefone clicável. Posso clicar no número para fazer a ligação sem precisar anotá-lo ou tentar memorizá-lo. Este recurso agora é uma necessidade. Felizmente, você pode adicioná-lo ao seu site para que o Google possa fornecer seu número de telefone em pesquisas locais.

Isso é feito com microdados. Os microdados informam aos mecanismos de pesquisa que os números são um número de telefone, portanto, são exibidos como um link de chamada clicável. Você pode criar isso enriquecendo a marcação com algumas tags para pesquisas locais.

Por exemplo, o código pode ser assim:

<div itemscope itemtype="https://schema.org/LocalBusiness">
<h1 itemprop="name">WordPress Theme</h1>
Phone: <span itemprop="telephone"><a href="tel:+123456890">
234567890</a></span>
</div>

Outras frases de chamariz

Com HTML5, você não está limitado a números de telefone. Você pode adicionar outras frases de chamariz, como e-mail, mensagem, fax etc. Os protocolos HTML5 incluem:

• tel: - fazer uma chamada
• mailto: - abre um aplicativo de e-mail
• callto: abrir o Skype
• sms: - enviar uma mensagem de texto
• fax: - enviar um fax

Todos esses protocolos são usados ​​da mesma maneira que vimos acima. Vejamos alguns exemplos.

Adicionando o código à sua página de contato

Um dos melhores lugares para adicionar um link de chamada é nas informações de contato da página Fale conosco.

Quer esteja usando o Editor Clássico ou o novo editor Gutenberg, você precisará visualizar a versão Texto da página. No editor clássico, clique na guia Texto . Em Gutenberg, clique nos três pontos no canto superior direito e selecione Editor de código .

Adicione o código no lugar do seu número de telefone.

Saia do Editor de código ou visualize a página e você verá que seu número de telefone agora é um link clicável.

Criação de código para um link de e-mail ou URL

O código HTML para e-mail é mailto: O endereço de e-mail é adicionado ao final, assim:

<a href="mailto:[email protected]"> [email protected] </a>
Just like the phone link, you can use the visual portion to add a message, such as:
<a href="mailto: [email protected]"> Click here to send me an email</a>

Assim como o link do telefone, você pode usar a parte visual para adicionar uma mensagem, como:

< href="mailto: [email protected]"; Click here to send me an email</a>

Aqui está um exemplo da página de contato do pacote de layout do Spa. Eu adicionei um módulo de sinopse com um ícone e o texto Send an Email. Selecionei a guia Texto e adicionei o HTML do e-mail. O texto agora é clicável e abrirá seu aplicativo de e-mail.

Adicionando código para abrir URLs

Você pode ter o HTML para abrir qualquer URL que desejar. Isso é bom se você deseja enviar leitores a páginas para inscrições em boletins informativos, eventos, etc. Para criar um link para eles, seu código HTML incluirá o URL. Por exemplo:

<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>

Eu adicionei outra sinopse com código para ver a página de eventos.

Desativar na área de trabalho e tablet

Um problema com links de chamada é que eles não são úteis para desktops ou tablets. Você pode resolver isso com o Divi criando módulos específicos para cada tipo de dispositivo e, em seguida, desativando-os nos outros dispositivos.

Aqui, criei dois módulos com o número de telefone: um inclui um número de telefone HTML e o outro não. Desativei aquele com o número clicável em tablets e desktops, então eles nunca verão o link. Também desativei o módulo sem o link para telefones, de forma que os usuários de telefones só verão o módulo com o link.

Adicionando o código ao seu cabeçalho ou rodapé

Você pode adicionar o código ao seu cabeçalho ou rodapé usando o editor de tema. Sempre use um tema filho ou seu código PHP será sobrescrito quando você atualizar o tema. Isso exigirá algum estilo CSS para ter uma boa aparência.

Em seu painel, vá para Aparência> Editor> Cabeçalho do tema (ou rodapé do tema ). Coloque o código na parte <body> do código. Procurei uma tag de finalização </a>, cliquei em Enter para adicionar algumas linhas extras e colei em meu código. Você pode ver o código aqui nas linhas 28 e 29.

Esta é a aparência quando coloco o link de chamada e o link de e-mail no cabeçalho do tema Twenty Nineteen. Está aí e funciona, mas não é muito bonito. Isso pode ser corrigido adicionando cor e espaço de margem para que fiquem separados um do outro. Claro, isso é feito em CSS.

Estilizando os Links

Você precisará adicionar código ao campo CSS adicional no personalizador.

Seu código pode ser assim:

a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="mailto:"] {
color: orange;
text-decoration: none;
margin-right: 0.8em;
}

Isso informa ao CSS como definir o estilo do texto para tel: e mailto :. Ele altera a fonte do número de telefone para marrom, a fonte do email para laranja e adiciona uma pequena margem à direita de cada link.

O CSS funciona onde quer que o código esteja incluído em widgets, posts, etc. Você pode até usar ícones em vez de texto.

Adicionando o Código ao Menu Divi Secundário

Divi pode incluir seu número de telefone e e-mail no menu secundário acima do cabeçalho. O botão de e-mail já pode ser clicado por padrão, mas o número de telefone não. O número de telefone pode ser transformado em um link de chamada usando um número de telefone HTML semelhante ao que usamos nos exemplos anteriores.

Vá para o Customizador de tema > Cabeçalho e navegação > Elementos do cabeçalho . Isso lhe dará uma caixa de texto onde você pode adicionar seu número de telefone. Felizmente, você não está limitado apenas a números. Você também pode adicionar HTML. Eu adicionei o HTML dos exemplos anteriores. Também aumentei o tamanho da fonte do número do telefone para facilitar a visualização das imagens.

Você pode deixar claro que é clicável adicionando uma mensagem à parte visual do link. Você pode substituir o número pela mensagem ou adicionar a mensagem ao final do número. Pode ser assim:

<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>

Este exemplo mostra apenas o texto.

Neste, adicionei o número do telefone junto com o texto.

Teste no celular

Eu recomendo testar os links com dispositivos móveis para ter certeza de que funciona. Se você não tiver acesso a um smartphone, pode usar as Ferramentas do desenvolvedor do Google Chrome.

Clique com o botão direito na sua página inicial e selecione Inspecionar . No canto superior esquerdo da tela, você verá uma lista de dispositivos. Selecione aquele para ver a aparência do seu site na tela. Clicar no link do número de telefone em HTML deve abrir uma caixa de diálogo solicitando que você escolha um aplicativo. Se você ver isso, o link funciona. Ainda recomendo experimentá-lo em um smartphone real, mas esta é uma boa indicação de que o link está fazendo alguma coisa.

Adicionando links de chamada com plug-ins

Você também pode adicionar um link de chamada ao seu cabeçalho com um plug-in. Eles normalmente incluem recursos de estilo, adição de várias frases de chamariz e a capacidade de serem ativados ou desativados com base no dispositivo do visitante. Eles também são fáceis de configurar e usar. Essas são ótimas opções se você não deseja manipular código. Aqui estão algumas das melhores opções.

Botão Ligar agora

O botão Ligar agora adiciona um botão clique para ligar na parte inferior da tela para os visitantes móveis. Não é mostrado em outros dispositivos. Você também pode adicionar texto, se desejar. O botão é um ícone de telefone, então é fácil entender para que serve. Tudo que você precisa fazer é habilitar o botão e inserir seu número de telefone. Você pode alterar o comportamento padrão nas configurações avançadas.

Mais Informações

Botões laterais pegajosos

Este plugin permite adicionar botões que ficam na lateral do seu site e permanecem na tela quando o usuário rola a página. Você pode adicionar um número de telefone clicável, endereço de e-mail, ícones de mídia social e locais de loja. Defina-os à direita ou à esquerda, escolha estilos de animação e rollover, personalize as cores e escolha onde elas serão exibidas.

Mais Informações

Barra de contato de velocidade

Este adiciona uma barra de contato que inclui links clicáveis ​​para um número de telefone, número de fax, título, endereço, e-mail, redes sociais e URLs personalizados. Defina a barra para cima ou para baixo e ajuste o tamanho, a cor, a cor do texto e dos links e como a barra reage. Você também pode ajustar o tamanho. você pode adicionar mais conteúdo usando ganchos de filtro.

Mais Informações

Barra de contato móvel

Este plugin adiciona links para o seu site quando visualizado em dispositivos móveis. Você pode escolher quais links são mostrados a partir de 13 opções, incluindo telefone, e-mail, Skype, URLs personalizados e redes sociais. Possui integração FontAwesome para os ícones. Você pode estilizar os links e escolher o tamanho, borda, opacidade, etc. Defina o menu na parte superior ou inferior da tela. O menu permanece na tela quando o usuário rola. Também inclui rolar para cima e carrinho WooCommerce com botões de contador de itens.

Mais Informações

Pensamentos finais

A popularidade dos smartphones para acessar sites está aumentando a cada dia. Essa popularidade transforma os links de chamada de uma simples conveniência em uma necessidade completa. Adicionar números de telefone clicáveis ​​pode fazer a diferença entre os usuários ligando para sua empresa ou para seus concorrentes. Felizmente, não é tão difícil criar links clicáveis ​​para adicionar números de telefone HTML aos cabeçalhos, rodapés, widgets, páginas e postagens do seu site WordPress.

Nós queremos ouvir de você. Você adicionou links de chamada ao seu site? Conte-nos sobre sua experiência nos comentários abaixo.

Imagem em destaque via Jane Kelly / shutterstock.com