Cómo hacer un número de teléfono clicable en un sitio web + ejemplos de diseño

Cómo hacer un número de teléfono clicable en un sitio web + ejemplos de diseño

Si tu número de teléfono está en texto plano en la versión móvil de tu sitio web, estás perdiendo clientes.

Este artículo explica cómo afecta a las tasas de conversión el hecho de no tener un número clicable, por qué necesitas un número clicable en primer lugar y cómo configurarlo en tu sitio.

Lee también: Los 10 mejores creadores de sitios web

¿Por qué necesitas un número clicable en un sitio web?

Explicar por qué un número de texto hace que algunos clientes se den de baja.

El usuario va a la versión móvil del sitio desde su dispositivo y ve un contacto con el que contactar. En nuestro caso, es un número de teléfono. Para llamarle tienes que copiar el número, minimizar el navegador con el sitio, ir al modo de marcación, pegar, pulsar el botón de llamada. O escríbelo en un papel y luego marca el número cuando quieras (pero la persona puede cambiar de opinión para entonces). O tienes que memorizar el número y luego introducirlo manualmente. Si se te olvida el número, tienes que volver al sitio web, memorizarlo, volver a minimizar el navegador y así sucesivamente. Por término medio, tienes unas 5 o más acciones. Imagina que una persona tiene que hacer varias llamadas de este tipo.

Con un número clicable, el usuario sólo necesita 3 acciones: hacer clic en el número, seleccionar el método de llamada (por teléfono o por mensajería), y luego hacer clic en el botón de llamada. Cuantas menos acciones, más probable es que el usuario siga haciendo la llamada, en lugar de abandonar en mitad del proceso.

Esto es interesante: 50 formas de aumentar las ventas

Puede Interesarte:  10 analizadores de VKontakte: recopilación de la audiencia de los grupos, análisis de fotos, publicaciones y productos

Cómo configurar un número de teléfono clicable en un sitio web – instrucciones

Cómo hacer que te llamen con un solo clic:

Método nº 1. A través del código html

Si tienes acceso al código, puedes hacer que el número de teléfono sea clicable mediante cambios en el código.

Un número de teléfono de texto (es decir, un número de teléfono no clicable) puede tener un aspecto diferente:

  1. Si es sólo un número:

<span>+7(111)111-11-11</span>

  1. Si se asigna una clase a través de los estilos CSS, el código puede tener el siguiente aspecto

<p class=»phone”>+7(111)111-11-11</p>

  1. Si el número de teléfono ha sido sometido a estilos de diseñopor ejemplo, el color, el tipo de letra, la alineación, es probable que el código sea

<div id=”número” class=”teléfono móvil texto num” style=”color: #1f21ff; text-align: center” name=”número_de_teléfono”>+7(111)111-11-11</p&gt

Para hacer que el número sea cliqueable necesitas añadir los siguientes elementos al código:

  • etiqueta …a>…<a> (responsable de la posibilidad de añadir un hipervínculo al texto);
  • atributo href=”” (responsable de redirigir al enlace, colocado dentro de la etiqueta anterior en lugar de los tres puntos);
  • parámetro tel: (responsable de llamar al número en clic, después de dos puntos debes especificar el número de teléfono sin espacios);

Es decir, para la primera opción (sólo un número de texto) el código final sería así:

<span>

<a href=”tel:+7(111)111-11-11”>+7(111)111-11-11</a>

</span>

El primer número de teléfono es el enlace, el segundo es cómo se muestra el número en el sitio. En lugar del número de teléfono, el sitio web puede mostrar una llamada para realizar una llamada, entonces el código tiene el siguiente aspecto

<span>

<a href=”tel:+7(111)111-11-11″>llámanos</a>

</span>

Si se ha escrito una clase en el código (ejemplo nº 2), el código final cliqueable con los elementos añadidos tiene este aspecto:

<p class=”teléfono”>

<a href=”tel:+7(111)111-11-11”>+7(111)111-11-11</a>

</p>

El tercer número (que aplica el tipo de letra, el color y la alineación), respectivamente, tiene el siguiente aspecto:

<div id=”número” class=”teléfono móvil texto num” style=”color: #1ff1ff; text-align: center” name=”teléfono_número”>

<a href=”tel:+7(111)111-11-11”>+7(111)111-11-11</a>

</p>

P.D. Es mejor tener estilos aplicados al número de teléfono a través de CSS, porque si sólo haces que el texto sea clicable (la primera opción más sencilla), se resaltará en azul y se subrayará como un hipervínculo normal. Visualmente parece poco atractivo.

Método nº 2. Si el sitio está hecho en un CMS o constructor

Si tienes un sitio web en un constructor, el teléfono se hace clicable aplicando un hipervínculo al número de teléfono.

Puede Interesarte:  Multitarea verdadera y falsa: por qué seguimos haciendo multitarea y qué hacer al respecto

Por ejemplo, el constructor Tilda. El número de teléfono suele aparecer en la cabecera, en el pie de página, en el menú del sitio o en una página separada con los contactos. Pero te mostraremos un ejemplo de un bloque de texto ordinario; el resto se hace por analogía.

Aquí tenemos un bloque de texto en la página que tiene un número de teléfono. Si seleccionas el número, aparecerá el menú de edición de texto. Haz clic en la herramienta de añadir enlace en ella.

En el campo “especificar enlace” escribimos tel:+711111111. El número de teléfono debe especificarse sin espacios, comillas ni puntos.

También es posible ajustar el color y el estilo de la referencia – es una ventaja, ya que no es necesario molestarse con los estilos CSS. Por cierto, el color y el estilo de los enlaces se pueden establecer de antemano al crear una página de destino y así no tendrás que ajustarlos manualmente cada vez.

Haz clic en “Aplicar” y obtendrás un número de teléfono clicable.

Si el sitio está en WixEl teléfono está configurado de forma similar, con una diferencia. Cuando resaltes el texto y hagas clic en la herramienta de enlace, aparecerá un menú adicional en el que podrás seleccionar a dónde lleva el enlace.

En este menú, selecciona “Número de teléfono”. El número de teléfono debe tener el formato +7(111)111-11-11.

Si el sitio está en WordPressAdemás de cambiar el código o añadir un hipervínculo al texto, puedes utilizar plugins de terceros. Por ejemplo, el plugin gratuito del botón Llamar ahora. Añade un botón de color destacado con un icono de teléfono y una llamada para llamar. Todo lo que necesitas es instalar el plugin en WordPress, especificar el número de teléfono, el color del botón y la ubicación en el sitio en la configuración.

Método nº 3. A través de un servicio de seguimiento de llamadas

Servicios modernos de seguimiento de llamadas utiliza la función de suplantación de número. Y la mayoría de las veces, se asignan atributos (clases) a los números. Por ejemplo, en el seguimiento de llamadas de Callibri es class=”callibri_phone” y class=”phone”.

Puede Interesarte:  Secretos, trucos y consejos de Instagram en 2020

En este rastreador de llamadas, si está configurado el número de intercambio automático, el enlace tendrá la forma

<p class=»phone”><a class=”callibri_phone”href=”tel:+71111111111”>+7(111)111-11-11</a></p>

Es importante: Para los servicios de seguimiento de llamadas, tienes que comprobar el código en las instrucciones del servicio o con el servicio técnico. Porque tienen sus propias clases y los ajustes pueden cambiar. Cada servicio de seguimiento de llamadas tendrá sus propios enlaces.

Cómo hacer que un número de WhatsApp, Viber, Skype y Telegram sea clicable

El número de teléfono cliqueable para los mensajeros se hace a través de un código html como describimos en el método nº 1 de este artículo. La única diferencia es el propio hipervínculo.

Para WhatsApp:

<a href=”https://wa.me/71111111111”>+7(111)111-11-11</a>

Número de teléfono en el propio enlace (entre comillas) sin paréntesis, espacios ni guiones.

Para Viber:

<a title=”Viber” href=”viber://add?number=7111111111111″>Viber</a>

Para Skype:

<a href=”skype:skype_user?call”>¡Marca en Skype!

skype_user es tu nombre de usuario de skype. El parámetro de llamada te permite iniciar la llamada inmediatamente, si no lo añades al enlace, sólo abrirá el perfil.

Si quieres que el chat se abra automáticamente al hacer clic en el número de skype, entonces añade el chat en lugar del parámetro de llamada, y lo conseguirás:

<a href=”skype:skype_user?chat”>¡Escribe a skype!

Para el telegrama:

Puedes añadir un breve hipervínculo al texto del formulario:

https://t.me/login

El enlace se encuentra en la configuración de tu cuenta de Telegram. Al hacer clic en el enlace se abrirá un diálogo con el usuario y también podrás llamar allí.

Artículo de referencia: Cómo añadir un enlace de Votsap a Instagram

Ejemplos de diseño de números clicables

El número de teléfono del sitio web del servicio de seguimiento de llamadas Callibri. Aquí también está subrayado para mayor claridad.

Número clicable en el sitio web de Tinkoff Bank. El número de teléfono no está resaltado visualmente, pero pulsando sobre él puedes hacer una llamada.

Librería Chitai-Gorod: el número aparece en la página web como un elemento de menú independiente, que no se diferencia visualmente de los demás elementos.

Conclusión

Un número de teléfono en el que se puede hacer clic permite a los visitantes del sitio hacer una llamada con un solo clic. Sin ningún movimiento innecesario. Esto ahorra tiempo y proporciona una experiencia positiva de interacción con el sitio. Como resultado, un número clicable puede aumentar la tasa de conversión del sitio. Una cosa pequeña, pero que funciona.

Enlaces útiles:

Deja un comentario

UnComoHacer
ForoPc
Tarabu
Tecnomaniacos
UnMeroTecnologico
VidaParalela
Nekuromansa
Superfantasy