Cómo activar una llamada telefónica al hacer clic en un enlace en una página web en un teléfono móvil

493

Necesito crear una página web para dispositivos móviles. Solo hay una cosa que aún no he descubierto: ¿cómo puedo activar una llamada telefónica con un clic de texto?

¿Hay alguna URL especial que pueda ingresar como la mailto:etiqueta para correos electrónicos?

No se prefieren soluciones específicas para dispositivos.

Sé que el iPhone reconoce automáticamente los números de teléfono y crea un enlace para esto, pero sería genial si esto también se pudiera hacer para las imágenes ... y también para la mayoría de los dispositivos móviles.

Frederic Morin
fuente

Respuestas:

868

La mayoría de los dispositivos modernos admiten el esquema tel:. Así que usa <a href="tel:555-555-5555">555-555-5555</a>y deberías estar listo.

Si desea usarlo para una imagen, la <a>etiqueta puede manejar la <img/>ubicación en ella al igual que otras situaciones normales con:<a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" /></a>

meme
fuente
12
¿Cómo se degrada esto para el escritorio? Obviamente no quieres que esto lleve el enlace a los escritorios, ¿verdad? ¿O tengo que rastrear el navegador y eliminar la etiqueta adjunta?
3Dom
99
@ 3Dom Pruébalo. Se inicia o solicita su programa de teléfono.
Cees Timmerman
1
@ 3Dom No hay problema en el escritorio Aurora 29.0a2 (2014-02-07). Puede usar un enlace de imagen para llamar (ver la respuesta de Andrew) y tener el número al lado en texto plano.
Cees Timmerman
2
Para referencia futura: en OS X Yosemite y superiores, se iniciará la aplicación Facetime y, si el usuario tiene un iPhone, les permite llamar con su computadora de escritorio / portátil.
Jeff Huijsmans
8
Hola, no olvides poner el signo más y el código de país como este: + 1-555-555-5555 si usas Skype, esto es imprescindible para la marcación instantánea.
Samuel Ramzan
59

El esquema de URL adecuado es tel: [número], así que lo haría

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

Quiere agregar una respuesta aquí en aras de la integridad.

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

Funciona bien en la mayoría de los dispositivos. Sin embargo, en los escritorios, esto aparecerá como un enlace que no hace nada cuando hace clic en él, por lo que debe considerar usar CSS para que sea visible condicionalmente solo en dispositivos móviles.

Además, debe saber que Skype (que es bastante popular) usa una sintaxis diferente de manera predeterminada (pero se puede configurar para usar tel :).

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

Sin embargo, creo que en los últimos navegadores móviles (lo sé con certeza en Android) ahora la telsintaxis debería ofrecer una ventana emergente de aplicaciones disponibles que se pueden usar para completar la acción de llamada.

vvohra87
fuente
sabría cómo abrir el diálogo de compartir en android, para una url?
whizcreed
@ whizcreed lo siento hermano, no es mi área.
vvohra87
44
¿El protocolo "tel" funciona con Skype, o solo su protocolo "callto"?
Hutch Moore el
@HutchMoore Es posible asociar el prefijo "tel:" a Skype. Hay una opción en los parámetros de Skype (junto a la opción que permite iniciar llamadas con el prefijo "callto:".
salcoin
20

Código de enlace del teléfono inteligente en el que se puede hacer clic:

El siguiente enlace se puede usar para hacer un enlace de teléfono en el que se pueda hacer clic. Puede copiar el código a continuación y pegarlo en su página web, luego editar con su número de teléfono. Es posible que este código no funcione en todos los teléfonos, pero funciona para iPhone, Droid / Android y Blackberry.

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

Los enlaces de números de teléfono se pueden usar con los guiones, como se muestra arriba, o sin ellos, así como en el siguiente ejemplo:

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

También es posible usar cualquier texto en el enlace siempre que el número de teléfono esté configurado con el "tel: 18475555555" como en este ejemplo:

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

A continuación se muestra un hipervínculo de teléfono en el que puede hacer clic que puede consultar. En la mayoría de los navegadores que no son teléfonos, este enlace le dará el error "No se puede mostrar la página web" o no sucederá nada.

NOTA: El navegador Safari de iPhone detectará automáticamente un número de teléfono en una página y convertirá el texto en un enlace de llamada sin usar ninguno de los códigos de esta página.

Código de enlace del teléfono inteligente WTAI: a continuación se muestra el código de enlace WTAI o "Interfaz de aplicación de telefonía inalámbrica". Se considera que este código es el protocolo correcto para teléfonos móviles y funcionará en teléfonos inteligentes como Droid, sin embargo, es posible que no funcione para Apple Safari en iPhone y se recomienda el código anterior.

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

Esencialmente, use un <a>elemento con un hrefatributo que apunte al número de teléfono con el prefijo tel:. Tenga en cuenta que las ventajas se pueden usar para especificar el código del país, y los guiones se pueden incluir simplemente para los ojos humanos.

MDN Web Docs

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

El elemento HTML<a> (o elemento de anclaje), junto con su atributo href, crea un hipervínculo a otras páginas web, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico o cualquier otra URL.

[...]

Ofrecer enlaces telefónicos es útil para los usuarios que ven documentos web y computadoras portátiles conectadas a teléfonos.

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

Documentos IETF

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

El telURI para números telefónicos

El URI "tel" tiene la siguiente sintaxis:

telephone-uri = "tel:"suscriptor telefónico

[...]

Ejemplos

tel:+1-201-555-0123: Este URI apunta a un número de teléfono en los Estados Unidos. Los guiones se incluyen para hacer que el número sea más legible para los humanos; separan el país, el código de área y el número de suscriptor.

tel:7042;phone-context=example.com: El URI describe un número de teléfono local válido dentro del contexto "ejemplo.com".

tel:863-1234;phone-context=+1-914-555: El URI describe un número de teléfono local que es válido dentro de un prefijo de teléfono en particular.

2540625
fuente
0

Simplemente use la etiqueta de anclaje HTML <a>y comience el atributo hrefcon tel:. Sugiero comenzar el número de teléfono con el código del país. preste atención al siguiente ejemplo:

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

Para este ejemplo, el código del país es +98.

Sugerencia : es tan adecuado para teléfonos celulares, conozcotel:llamadas de prefijoFaceTimeen macOS pero en Windows no estoy seguro, pero supongo que causó el lanzamiento de Skype.

Para obtener más información : puede visitar la lista de esquemas de URL compatibles con los navegadores para conocer todos los hrefprefijos de valores.

AmerllicA
fuente