Enlaces telefónicos: cómo agregar enlaces «llamables» y CTA a su sitio web

Cómo funcionan los enlaces de llamadas

Hacer clic en un número de teléfono se hace fácilmente con HTML. HTML5 incluye protocolos como tel: y mailto: que los navegadores pueden usar. Los navegadores responden de manera diferente a estos protocolos. Algunos iniciarán la aplicación del teléfono y agregarán el número a la pantalla mientras esperan que haga clic en el botón Llamar. Otros harán la llamada, mientras que otros primero preguntarán si está bien.

Dado que es HTML, puede agregar los protocolos en cualquier parte de su sitio, incluidos el encabezado, el pie de página, las barras laterales, dentro del contenido de las publicaciones y páginas, y dentro de los widgets.

Adición de un enlace de llamada de número de teléfono HTML a su sitio web

Agregue el código como texto en la ubicación en la que desea que aparezca el enlace:

Href=tel: crea el enlace de la llamada. Esto le dice al navegador cómo usar el número.

“Tel: 123-456-7890” crea el número de teléfono HTML. El número entre comillas es el número al que llamará.

El número dentro de las etiquetas >< es la parte visual y puede ser cualquier cosa que desee, incluido el número de teléfono, una línea de texto como «Haga clic para llamar» o «Llamar ahora», o cualquier otra llamada a la acción que desee. desear. Debe ser descriptivo de lo que sucederá cuando hagan clic.

Mostrar un mensaje en lugar del número se vería así:

Sus visitantes verán el texto, pero cuando hagan clic en él, verán la pantalla de marcación de sus teléfonos con su número listo para que hagan clic en el botón de llamada.

Agregar una extensión

Algunos números de teléfono tienen una extensión. Puede agregar un código que creará una breve pausa antes de marcar el número de extensión. Agregar P delante de la extensión agregará una pausa de un segundo. El código podría verse así:

Esto marca el número, espera un segundo y luego marca la extensión.

Puede hacer que espere un tono de marcación utilizando  w  en lugar de  p .

Adición de códigos de país

Los códigos de países se pueden agregar al incluir un  +  junto con el código de su país antes del número de teléfono. Un ejemplo podría verse así:

Adición de microdatos para SEO local

Una de mis comodidades favoritas de llevar un teléfono inteligente es cuando busco un negocio local y el resultado en Google me da un número de teléfono en el que se puede hacer clic. Puedo hacer clic en el número para hacer la llamada sin tener que escribirlo o tratar de memorizarlo. Esta característica es ahora una necesidad. Afortunadamente, puede agregarlo a su sitio web para que Google pueda proporcionar su número de teléfono en las búsquedas locales.

Esto se hace con microdatos. Los microdatos informan a los motores de búsqueda que los números son un número de teléfono, por lo que se muestran como un enlace de llamada en el que se puede hacer clic. Puede crear esto enriqueciendo el marcado con algunas etiquetas para búsquedas locales.

Por ejemplo, el código podría verse así:

Otras llamadas a la acción

Con HTML5, no está limitado a números de teléfono. Puede agregar otras llamadas a la acción, como correo electrónico, mensajería, fax, etc. Los protocolos HTML5 incluyen:

• tel: – hacer una llamada telefónica
• mailto: – abre una aplicación de correo electrónico
• llamar a: abrir Skype
• sms: – enviar un mensaje de texto
• fax: – enviar un fax

Todos estos protocolos se utilizan de la misma manera que vimos anteriormente. Veamos algunos ejemplos.

Agregar el código a su página de contacto

Uno de los mejores lugares para agregar un enlace de llamada es dentro de su información de contacto en su página Contáctenos.

Ya sea que esté utilizando el editor clásico o el nuevo editor de Gutenberg , deberá ver la versión de texto de la página. En el editor clásico, haga clic en la pestaña Texto . En Gutenberg, haga clic en los tres puntos en la parte superior derecha y seleccione Editor de código .

Agregue el código en lugar de su número de teléfono.

Salga del Editor de código o de la vista previa de la página y verá que su número de teléfono ahora es un enlace en el que se puede hacer clic.

Creación de código para un enlace de correo electrónico o URL

El código HTML para el correo electrónico es mailto: la dirección de correo electrónico se agrega al final, así:

Al igual que el enlace telefónico, puede usar la parte visual para agregar un mensaje, como:

Aquí hay un ejemplo de la página de contacto del paquete de diseño de Spa. Agregué un módulo de publicidad con un ícono y el texto Enviar un correo electrónico. Seleccioné la pestaña Texto y agregué el HTML del correo electrónico. Ahora se puede hacer clic en el texto y se abrirá su aplicación de correo electrónico.

Adición de código a direcciones URL abiertas

Puede tener el HTML para abrir cualquier URL que desee. Esto es bueno si desea enviar a los lectores a páginas para suscribirse a boletines, eventos, etc. Para vincularlos, su código HTML incluirá la URL. Por ejemplo:

Agregué otra propaganda con código para ver la página de eventos.

Deshabilitar en escritorio y tableta

Un problema con los enlaces de llamadas es que no son útiles para computadoras de escritorio o tabletas. Puede resolver esto con Divi creando módulos que son específicos para cada tipo de dispositivo y luego deshabilitándolos en los otros dispositivos.

Aquí, he creado dos módulos con el número de teléfono: uno incluye un número de teléfono HTML y el otro no. He deshabilitado el que tiene el número en el que se puede hacer clic en tabletas y computadoras de escritorio, por lo que nunca verán el enlace. También deshabilité el módulo sin el enlace para teléfonos, por lo que los usuarios de teléfonos solo verán el módulo con el enlace.

Agregar el código a su encabezado o pie de página

Puede agregar el código a su encabezado o pie de página usando el editor de temas. Utilice siempre un  tema secundario o su código PHP se sobrescribirá cuando actualice el tema. Esto requerirá algo de estilo CSS para que se vea bien.

En su Tablero, vaya a  Apariencia > Editor > Encabezado de tema (o Pie de página de tema ). Coloque el código dentro de la parte <cuerpo> del código. Busqué una etiqueta final </a>, hice clic en Intro para agregar algunas líneas adicionales y pegué mi código. Puede ver el código aquí en las líneas 28 y 29.

Esto es lo que parece cuando coloqué el enlace de la llamada y el enlace del correo electrónico dentro del encabezado del tema Twenty Nineteen. Está ahí y funciona, pero no es muy bonito. Esto se puede solucionar agregando color y espacio en los márgenes para que se separen entre sí. Por supuesto, esto se hace en CSS.

Dar estilo a los enlaces

Deberá agregar código al campo CSS adicional en el Personalizador.

Su código podría verse así:

Esto le dice al CSS cómo diseñar el texto para tel: y mailto:. Cambia la fuente del número de teléfono a marrón, la fuente del correo electrónico a naranja y agrega un pequeño margen a la derecha de cada enlace.

El CSS funciona dondequiera que se incluya el código en widgets, publicaciones, etc. Incluso puede usar  íconos  en lugar de texto.

Agregar el código al menú secundario de Divi

Divi puede incluir su número de teléfono y correo electrónico en el menú secundario sobre el encabezado. Ya se puede hacer clic en el botón de correo electrónico de forma predeterminada, pero no en el número de teléfono. El número de teléfono se puede convertir en un enlace de llamada usando un número de teléfono HTML similar al que hemos usado en ejemplos anteriores.

Vaya al  Personalizador de temas > Encabezado y navegación >  Elementos de encabezado . Esto le dará un cuadro de texto donde puede agregar su número de teléfono. Afortunadamente, no estás limitado a solo números. También puede agregar HTML. He agregado el HTML de los ejemplos anteriores. También aumenté el tamaño de fuente del número de teléfono para que sea más fácil ver las imágenes.

Puede hacer evidente que se puede hacer clic agregando un mensaje a la parte visual del enlace. Puede reemplazar el número con el mensaje o agregar el mensaje al final del número. Podría verse así:

Este ejemplo solo muestra el texto.

En este, he agregado el número de teléfono junto con el texto.

Pruebas en el móvil

Recomiendo probar los enlaces con dispositivos móviles para asegurarse de que funciona. Si no tiene acceso a un teléfono inteligente, puede usar las herramientas para desarrolladores de Google Chrome.

Haga clic derecho en su página de inicio y seleccione  Inspeccionar . En la esquina superior izquierda de su pantalla, verá una lista de dispositivos. Seleccione uno para ver cómo se ve su sitio web en esa pantalla. Al hacer clic en el enlace del número de teléfono HTML, se abrirá un cuadro de diálogo que le pedirá que elija una aplicación. Si ves esto, el enlace funciona. Todavía recomiendo probarlo en un teléfono inteligente real, pero esta es una buena indicación de que el enlace está haciendo algo.

Agregar enlaces de llamadas con complementos

También puede agregar un enlace de llamada a su encabezado con un complemento. Por lo general, incluyen funciones para diseñar, agregar múltiples llamadas a la acción y la capacidad de activarse o desactivarse según el dispositivo del visitante. También son fáciles de configurar y usar. Estas son excelentes opciones si no desea manejar el código. Estas son algunas de las mejores opciones.

Botón llamar ahora

El botón Llamar ahora agrega un botón de clic para llamar en la parte inferior de la pantalla para sus visitantes móviles. No se muestra en otros dispositivos. También puede agregar texto si lo desea. El botón es un ícono de teléfono, por lo que es fácil entender para qué sirve. Todo lo que tienes que hacer es habilitar el botón e ingresar tu número de teléfono. Puede cambiar el comportamiento predeterminado en la configuración avanzada.

Más información

Botones laterales adhesivos

Este complemento le permite agregar botones que se adhieren al costado de su sitio web y permanecen en la pantalla cuando el usuario se desplaza. Puede agregar un número de teléfono en el que se pueda hacer clic, una dirección de correo electrónico, íconos de redes sociales y ubicaciones de tiendas. Colóquelos a la derecha o a la izquierda, elija estilos de animación y rollover, personalice los colores y elija dónde se muestran.

Más información

Barra de contacto de velocidad

Este agrega una barra de contacto que incluye enlaces en los que se puede hacer clic para un número de teléfono, número de fax, un titular, dirección, correo electrónico, redes sociales y URL personalizadas. Coloque la barra en la parte superior o inferior y ajuste el tamaño, el color, el color del texto y los enlaces, y cómo reacciona la barra. También puede ajustar el tamaño. puede agregar más contenido usando ganchos de filtro.

Más información

Barra de contacto móvil

Este complemento agrega enlaces a su sitio web cuando se ve en dispositivos móviles. Puede elegir qué enlaces se muestran entre 13 opciones que incluyen teléfono, correo electrónico, Skype, URL personalizadas y redes sociales. Tiene integración FontAwesome para los íconos. Puede diseñar los enlaces y elegir el tamaño, el borde, la opacidad, etc. Configure el menú en la parte superior o inferior de la pantalla. El menú permanece en la pantalla cuando el usuario se desplaza. También incluye desplazamiento hacia arriba y carrito de WooCommerce con botones de contador de artículos.

Más información

Pensamientos finales

La popularidad de los teléfonos inteligentes para acceder a sitios web aumenta cada día. Esta popularidad hace que los enlaces de llamadas pasen de ser una simple conveniencia a una completa necesidad. Agregar números de teléfono en los que se puede hacer clic puede marcar la diferencia entre los usuarios que llaman a su empresa o a sus competidores. Afortunadamente, no es tan difícil crear enlaces en los que se pueda hacer clic para agregar números de teléfono HTML a sus encabezados, pies de página, widgets, páginas y publicaciones de su sitio web de WordPress.

Queremos escuchar de ti. ¿Ha agregado enlaces de llamadas a su sitio web? Háganos saber acerca de su experiencia en los comentarios a continuación.

Imagen destacada a través de Jane Kelly / shutterstock.com