El uso de los dispositivos móviles para visitar páginas web es algo muy común hoy en día. De hecho en determinados sectores el acceso web vía móvil es superior al acceso vía ordenadores de escritorio.
Debido a este uso generalizado del móvil (o celular) se hace muy interesante poder poner un botón para llamar en la página web.
Al hacer clic en el botón automáticamente el número aparece ya marcado en el móvil a la espera de hacer clic en el botón de llamada. De este modo nos ahorramos tener que memorizar el número de teléfono que vemos en la web para poder marcarlo en el móvil, hacemos clic sobre el botón “Clic to call” y listo.
Este tipo de botones se denominan “click to call” traducidos como “clic para llamar”.
Con este tipo de accione mejoraremos las conversiones y sobre todo la experiencia de usuario.
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
ÍNDICE DEL POST
1.- Botón de llamar HTML
De manera general para hacer que un número de teléfono se marque en el móvil al hacer clic sobre un enlace el código HTML deber ser el siguiente:
<a href=”tel://658545547”>658 545 547</a>
Pon este texto en la pestaña de HTML del editor de texto de WordPress general, o en un módulo de texto o código del divi builder (constructor de la plantilla Divi).
Compara el código con el de un enlace normal:
<a href=”http://www.midominio.com”>Ir a la página 2</a>
Como ves los dos códigos son bastante similares, lo que cambia es la ruta dentro del «href«. En el caso del enlace HTML para llamar tiene un prefijo tel:// mientras que en el de un enlace web normal tiene el prefijo http://
El contenido del href indica al navegador el destino tras hacer clic en el enlace.
DESCUENTOS PLANTILLA DIVI
En anchor text, que es el texto visible del enlace, en el caso de un enlace de llamada para móvil normalmente será el número móvil al que se quiere llamar. Pero podría ser un texto del tipo “llámanos” “clic para llamar” “contáctanos” “teléfono”, etc.
Enlace para llamar por teléfono en HTML
También puedes probar a ponerlo en un módulo tipo botón del divi builder (page builder de la plantilla Divi de WordPress)
Módulo botón de Divi con enlace para llamar por teléfono
2.- Enlace para llamar por teléfono en el número de teléfono del header de la plantilla Divi de WordPress
Si utilizas la plantilla Divi, que como sabes es mi plantilla favorita para WordPress, sabrás que en la parte superior del header, más concretamente en el menú secundario del header se puede poner un número de teléfono de contacto.
De por si este número que aparece en el header no es del tipo “click to call”. Para convertirlo en un enlace de llamada por teléfono tendrás que ir a: “Divi > personalizador de temas > Cabecera y navegación > Elementos de cabecera” y en el campo “Número de teléfono” introducir el código html que hemos visto en el apartado 1.
Sería algo del tipo:
<a href=”tel://658545547”>658 545 547</a>
A continuación Guarda y listo.
3.- Plugin botón de llamada en tu web WordPress fijo en dispositivos móviles
Vamos a ver ahora un plugin para wordpress muy interesante (gratuito), pues nos permite situar un botón de «clic para llamar» fijo en la parte inferior de la web. Pero este botón solo será visible cuando el visitante esté viendo la web en un dispositivo móvil.
IR AL PLUGIN
El plugin se denomina “Call now button” y es un plugin gratuito del repositorio de wordpress.org
Plugin Call Now Button para llamar en la web
Una vez lo hayas instalado y activado, para configurarlo tendrás que ir a: “Ajustes > Call Now Button”. Tendrás las siguientes opciones:
a.- Button status: si marcamos el check box el botón aparecerá, y si no lo marcamos no aparecerá.
b.- Phone number: aquí introduciremos el número de teléfono al que llamará el visitante al hacer clic en el botón de click to call.
Ahora haz clic en “+ Advanced settings” para que se muestren el resto de opciones de configuración.
c.- Button color: elegiremos el color del botón de clic para llamar.
d.- Position: elegiremos la posición del botón en la pantalla del móvil. Right corner (esquina derecha), Left corner (esquina izquierda), Center button (centro), Full button (ancho completo).
Opciones de configuración del plugin wordpress call now button
e.- Limit apparence: si no pones nada el botón aparecerá en cualquier página de la web. Pero si introduces aquí IDs de páginas o entradas de blog, el botón de clic para llamar solo aparecerá en dichas páginas o posts.
f.- Back to old button desing: si marcas este check box cambiarás del diseño moderno del botón al antiguo.
En la siguiente imagen puedes ver el botón antiguo (derecha) y el nuevo (izquierda). Elige el que prefieras.
A mí personalmente me gusta más el antiguo, pero esto es solo una cuestión de gustos.
Diseño del botón de llamada en página web
En la siguiente imagen puedes ver cuál es el resultado de la configuración del plugin. Verás en la parte inferior izquierda de la web el botón de llamada para la web en móvil.
El botón solo aparecerá en la versión móvil de la web y no en la versión de escritorio.
Cuando hagamos scroll el botón permanecerá fijo y siempre visible.
Botón para llamar en página web con plugin wordpress «Call Now Button»
4.- Plugin de botón para llamar en WordPress y botón de mapa
He encontrado otro plugin para wordpress interesante, también gratuito que se llama: “Mobile call now & map button”.
IR AL PLUGIN
Este plugin no lo he probado, si quieres pruébalo y nos dices que tal te parece.
Con este plugin se mostrará en el footer de la web un botón de “clic para llamar” como con el plugin anterior, pero en éste además se mostrará un botón para ver la localización en un mapa.
En la configuración del plugin podremos determinar en qué tipo de móviles (anchura) queremos que aparezcan estos botones.
Configuraremos el color de la barra y de los botones.
Introduciremos el número de teléfono que se marcará al hacer clic en el botón de llamar y también tendremos que introducir la dirección que queremos que aparezca al hacer clic sobre el botón de localización.
También podrás personalizar el texto que aparece en los botones
Plugin WordPress con botón de llamada en página web + botón de localización
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
como hago para que el enlace de llamada que esta dentro de un email no haga que el email sea spam y vaya a la bandeja de correo no deseado de la persona a quien se dirige el correo?
Buenas Patricia.
El tema del spam en el correo depende del email del destinatario (los gmail tienen filtros muy restrictivos, mietras que muchos correos corporativos no). También puede depender de tu servidor de correo, que es el que te proporciona tu empresa de alojamiento. Por lo que, yo en tu lugar, en primera instancia consultaría a tu empresa de hosting. Te invito a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Voy a probar el segundo pligin que citas a ver si me vale lo del mapa. Gracias!
Hola Rogelio.
El post tiene tiempo ya. Prueba a ver si está más o menos actualizado el plugin.
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Excelente blog, me quedo con esta opción de Plugin de botón para llamar en WordPress y botón de mapa; pero sabes de algún otro plugin que además me permita colocar el botón de Whastapp.
Gracias, saludos desde Ecuador.
Hola Henry.
Échale un vistazo a esta lista de plugins wordpress: búsqueda plugins «Whatsapp button»
Hola Joaquín! gracias por tu blog! te consulto si es posible poner un shortcode directamente en un botón del menú. ¿es posible eso? Gracias!!
Hola Leo.
No sé a que te refieres con un botón del menú. Pero, prueba a poner el shortcode en un enlace personalizado del menú.
Hola Joaquin. He instalado en mi sitio web el plugin call now buttom y lo he parametrizado segun tus indicaciones. Luego cuando ejecuto y clico sobre el botón de llamada, me da el siguiente error que no entiendo. ¿ Como puedo solucionarlo ?
«No se puede abrir la página porque la dirección es invalida (-302)
Intenta esto:
Comprueba la dirección a la que has accedido y reintenta usando la URL correcta.»
Buenas.
El aviso es de que no has introducido una url válida.
Revisa si has puesto el http:// o https:// (según sea tu caso) antes de la url
Muy buen aporte
Hola tengo un sitio en wordpres , con diferentes anunciantes en portfolios diferentes con imágenes de cada anunciante , tengo la idea de poner un botón de llamada y de whatsap en cada anunciante, (lo vi en otra página), pero no encuentro un plujin para hacer esto, los que encuentro solo me permiten configurar un solo número de telfono para toda la página, y no para cada portfolio, como puedo hacer eso?
Buenas David.
1.- En el post, se explica como hacer un botón de llamada manual a través del código HTML. Seguramente, eso es lo que tendrás que hacer para el botón de llamada independiente en cada página. El código HTML es realmente un enlace, que puedes asociar a cualquier imagen.
2.- Para el tema del Whatsapp, yo probaría a buscar el código HTML que genera uno de esos botones e intentaría proceder de la misma manera.
Hola joaquin, he llegado hasta tu web porque estoy buscando algo parecido a lo que comentas del boton para llamar a moviles desde wordpress. Mi pregunta es la siguiente: sabes como se hace la llamada a mobiles pero que se active la videollamada? es decir cuando pulsamos en el enlace salte el facetime, o videollamada en el movil y activemos la camara del movil para videollamada.
Hola Javier,
Lo siento, pero no se cómo se puede hacer para que se active la videollamada de manera directa, al hacer clic sobre el botón.
Joaquin desde el constructor divi puedo agregarle a un botón de llamar ya existente y configurado, un script de conversión de google adwords?
Hola,
¿te refieres a un módulo botón del divi builder?
Excelente artículo, pero me he perdido un poco, no entiendo mucho de programación y quiero implementar la estrategia del botón click to call en mi web.
En varias conferencias me mostraron un ejemplo de una compañía llamada Vozy, que tienen en su landing page un click to call bastante bueno y rápido.
¿Podrías ayudarme y darme consejos de como instalar uno similar?
Hola Juan Carlos,
Para añadir el botón de llamada en WordPress no necesitas programar nada. Solo tienes que instalar el plugin y configurarlo.
Por el momento es el único plugin que he encontrado para wordpress para incluir este tipo de botón.
Gracias por el artículo tío!!
Me he descargado la aplicación y ningún problema para configurarla, si he echado de menos poder cambiar el tipo de símbolo para el teléfono que no me ha dejado. Super bien explicado, gracias!
Gracias a tí Alberto,
Cierto, el plugin no tiene ninguna opción para cambiar el icono
hola joaquin, gracias por este post, de que forma puedo poner a un lado de la hamburguesa la opcion de llamar con un icono?
Buenas,
cuando se usa el diseño de header tipo hamburguesa, los itmens de menú aparecen tras desplegarse el menú. Por ese motivo no podríamos poner ningún enlace o icono junto al icono del menú hamburguesa
Buenas Joaquin,
enhorabuena por este artículo porque la verdad he encontrado muy poca información sobre poner boton de llamada en wordpress.
He probado el plugin Call now button y va muy bien pero me gustaría poner mi numero de telefono en el mismo menú y quen versión móvil al verlo y hacer click puedan llamarme directamente.
Eso como se puede hacer?
Saludos
Hola Juan,
Mira el código del apartado 1 del post en el que se muestra el código que se debe poner para que al hacer clic sobre el número se marque en el móvil. Usa ese código en el campo «Texto enlace» de un Enlace personalizado y en el campo URL pon #
Añade el enlace personalizado al menú y prueba a ver
Parece que no funciona Joaquín,
me abre como una url que no existe.
No abre en el telefono para llamar.
Alguna otra posibilidad?
Prueba a poner en el enlace personalizado en el campo URL lo que aparece después de href y sin comillas. Es decir,
tel://654545454y en en el campo de texto el número: 654 54 54 54
Ahora si funciona, muchísimas gracias por tu ayuda.
Un abrazo 😉
Correcto, gracias
Buenas noches quisiera que me ayudaras tengo una pagina jimdo free en la cual es de anuncios o avisos comerciales nesecito colocar el boton de llamada en la parte de abajo de cada uno de los avisos .para b que el que consulte la pagina pueda llamar acada uno de los anunciadores.
agradesco mucho su colaboracion.
atte. alvaro acosta
Hola Álvaro,
no conozco ni utilizo Jimdo,
solo trabajo con wordpress y Prestashop y solo de estos dos CMS puedo dar soporte,
gracias
Hola Joaquin. Muchas gracias por tu articulo. Probe meter el código en el Divi Builder ; no funciono. Me descargue el plugin y tampoco. Luego me di cuenta desde el teléfono que si pulsaba el numero en el menu secundario, se produci¡a la llamada o salia la página de mail. Conclusión los de Elegant Theme en alguna de sus ultimas actualizaciones ya han resuelto el tema para no utilizar plugins de terceros.
Gracia por tu aportación
Miguel Angel
Voy a probar haber que tal joaquin
ya nos cuentas Raul que tal te ha ido con el botón de «clic para llamar»