Como acionar uma ligação telefônica ao clicar em um link em uma página da web no celular

493

Preciso criar uma página da web para dispositivos móveis. Ainda há uma coisa que ainda não descobri: como posso acionar uma ligação telefônica com o clique do texto?

Existe um URL especial que eu possa inserir como a mailto:tag para e-mails?

A solução específica do dispositivo não é preferida.

Sei que o iPhone reconhece automaticamente os números de telefone e cria um link para isso, mas seria ótimo se isso pudesse ser feito também para imagens ... e também para a maioria dos dispositivos móveis.

Frederic Morin
fonte

Respostas:

868

A maioria dos dispositivos modernos suporta o esquema tel :. Então use <a href="tel:555-555-5555">555-555-5555</a>e você deve estar pronto.

Se você deseja usá-lo para uma imagem, a <a>tag pode manipular o local <img/>nela, assim como outras situações normais, com:<a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" /></a>

meme
fonte
12
Como esse downgrade para desktop? Você obviamente não quer que isso carregue o link para os desktops, certo? Ou eu tenho que farejar e matar a etiqueta anexa?
3Dom
9
@ 3Dom Experimente. Ele inicia ou solicita o seu programa de telefone.
Cees Timmerman
1
@ 3Dom Não há problema no Aurora 29.0a2 da área de trabalho (07-02-2014). Você pode usar um link de imagem para ligar (consulte a resposta de Andrew) e ter o número ao lado em texto sem formatação.
Cees Timmerman
2
Para referência futura: no OS X Yosemite e versões posteriores, o aplicativo Facetime será iniciado e, se o usuário tiver um iPhone, permitirá que eles efetuem chamadas com seu desktop / laptop.
Jeff Huijsmans
8
Olá, não se esqueça de colocar o sinal de adição e o código do país assim: + 1-555-555-5555 se você usa o Skype, esta é uma obrigação para discagem instantânea.
Samuel Ramzan 17/07
59

O esquema de URL apropriado é tel: [number], então você faria

<a href="tel:5551234567"><img src="callme.jpg" /></a>
Jess
fonte
45

Deseja adicionar uma resposta aqui por uma questão de integridade.

<a href="tel:1234567">Call 123-4567</a>

Funciona bem na maioria dos dispositivos. No entanto, nas áreas de trabalho, isso aparecerá como um link que não faz nada quando você clica nele; portanto, considere usar o CSS para torná-lo visível condicionalmente apenas em dispositivos móveis.

Além disso, você deve saber que o Skype (que é bastante popular) usa uma sintaxe diferente por padrão (mas pode ser parametrizado para usar tel :).

<a href="callto:1234567">Call 123-4567</a>

No entanto, acho que nos navegadores móveis mais recentes (tenho certeza no Android) agora a telsintaxe deve oferecer um pop-up de aplicativos disponíveis que podem ser usados ​​para concluir a ação de chamada.

vvohra87
fonte
saberia sobre como abrir o diálogo de compartilhamento no android, para um URL?
21315 whizcreed
@whizcreed desculpe mano, não é a minha área.
vvohra87
4
O protocolo "tel" funciona com o Skype ou apenas o protocolo "callto"?
Hutch Moore
@HutchMooreÉ possível associar o prefixo "tel:" ao Skype. Há uma opção nos parâmetros Skype (ao lado opção que permitem iniciar chamadas com o "callto:" prefixo.
salcoin
20

Código de link clicável para smartphone:

O link a seguir pode ser usado para criar um link telefônico clicável. Você pode copiar o código abaixo e colá-lo em sua página da web e depois editar com seu número de telefone. Esse código pode não funcionar em todos os telefones, mas funciona para iPhone, Droid / Android e Blackberry.

<a href="tel:1-847-555-5555">1-847-555-5555</a>

Os links de número de telefone podem ser usados ​​com os traços, como mostrado acima, ou sem eles, assim como no exemplo a seguir:

<a href="tel:18475555555">1-847-555-5555</a>

Também é possível usar qualquer texto no link, desde que o número de telefone esteja configurado com o "tel: 18475555555", como neste exemplo:

<a href="tel:18475555555">Click Here To Call Support 1-847-555-5555</a>

Abaixo está um hiperlink de telefone clicável que você pode conferir. Na maioria dos navegadores que não são de telefone, esse link exibirá um erro "A página da web não pode ser exibida" ou nada acontecerá.

NOTA: O navegador Safari do iPhone detecta automaticamente um número de telefone em uma página e converte o texto em um link de chamada sem usar nenhum código nesta página.

Código de link para smartphone WTAI: O código de link WTAI ou "Wireless Telephony Application Interface" é mostrado abaixo. Esse código é considerado o protocolo correto do telefone móvel e funcionará em smartphones como o Droid; no entanto, ele pode não funcionar no Apple Safari no iPhone e o código acima é recomendado.

<a href="wtai://wp/mc;18475555555">Click Here To Call Support 1-847-555-5555</a> 
Gaurang P
fonte
3

Essencialmente, use um <a>elemento com um hrefattr apontando para o número de telefone prefixado por tel:. Observe que vantagens podem ser usadas para especificar o código do país e hifens podem ser incluídos simplesmente para os olhos humanos.

Documentos da Web MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link

O elemento HTML<a> (ou elemento âncora), juntamente com seu atributo href, cria um hiperlink para outras páginas da web, arquivos, locais na mesma página, endereços de email ou qualquer outro URL.

[...]

A oferta de links telefônicos é útil para usuários que visualizam documentos da Web e laptops conectados a telefones.

<a href="tel:+491570156">+49 157 0156</a>

Documentos IETF

https://tools.ietf.org/html/rfc3966

O telURI para números de telefone

O URI "tel" possui a seguinte sintaxe:

telephone-uri = "tel:"assinante de telefone

[...]

Exemplos

tel:+1-201-555-0123: Este URI aponta para um número de telefone nos Estados Unidos. Os hífens são incluídos para tornar o número mais legível por humanos; eles separam país, código de área e número de assinante.

tel:7042;phone-context=example.com: O URI descreve um número de telefone local válido no contexto "example.com".

tel:863-1234;phone-context=+1-914-555: O URI descreve um número de telefone local válido dentro de um prefixo de telefone específico.

2540625
fonte
0

Basta usar a tag âncora HTML <a>e iniciar o atributo hrefcom tel:. Sugiro iniciar o número de telefone com o código do país. preste atenção ao seguinte exemplo:

<a href="tel:+989123456789">NO Different What it is</a>

Para este exemplo, o código do país é +98.

Dica : é tão adequado para telefones celulares que conheçotel:prefixosFaceTimeno macOS, mas no Windows não tenho certeza, mas acho que isso causou o lançamento do Skype.

Para mais informações : você pode visitar a lista de esquemas de URL suportados pelos navegadores para conhecer todos os hrefprefixos de valores.

AmerllicA
fonte