• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Recursos / Agregar Whatsapp en WordPress sin usar plugins

Agregar Whatsapp en WordPress sin usar plugins

Whatsapp en WordPress

[ 14 febrero 2018 ] [ Actualizado: 17 junio 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Recursos - Básico] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Te gustaría añadir una opción para que tus usuarios te contacten por Whatsapp?, aprende cómo agregar un link de contacto de Whatsapp en WordPress para empezar a chatear directamente, de manera simple y sin usar plugins.

 

Resultado Final

Envío de mensaje por Whastapp en movil

 

Actualmente es posible usar directamente un enlace con la funcionalidad Click To Chat de Whatsapp, la sintaxis es la misma tanto para Android como para Iphone.

Este enlace serviría tanto para la aplicación móvil como para chatear desde un navegador.

La sintaxis es:

https://wa.me/xxx?text=yyy

 

Generalidades

Anteriormente habíamos visto cómo agregar redes sociales en WordPress sin usar plugins y compartir contenido, sin embargo en este artículo veremos cómo agregar un link de Whatsapp para empezar un chat.

Usaremos HTML para crear los enlaces de Whatsapp y dependiendo del dispositivo, usaremos CSS para ocultar o mostrar el enlace.

Para los enlaces tenemos:

  • Móvil: Usaremos el link de Whatsapp para movil el cual abrirá la App
  • Ordenador: En este caso usaremos el link alterno para abrir Whatsapp en Web
Para tener esta funcionalidad sólo usarás HTML y algo de CSS.
Es posible detectar más acertadamente si estamos en un dispositivo móvil a través de javascript.

 

1- Enlace en móvil

El enlace para acceder directamente a la aplicación Whatsapp tiene la siguiente forma:

https://wa.me/xxx?text=yyy

En donde:

  • xxx = es el número de teléfono el cual aparecerá por defecto
  • yyy = es el mensaje por defecto que aparecerá

El número de teléfono no debe llevar espacios ni signos de ningún tipo
El mensaje debe estar codificado para mostrarse en la url, es decir sin espacios ni signos especiales, puedes codificar el mensaje en este enlace

Por ejemplo:


<a class="whatsapp-movil" href="https://wa.me/34123456789?text=Quiero%20saber%20el%20precio%20del%20producto%20">Preguntar por Whatsapp</a>

El código anterior generará el siguiente enlace que puedes probar en móvil:

Preguntar por Whatsapp

 

2- Enlace para Web

El enlace para acceder Whatsapp Web tiene la siguiente forma:

https://web.whatsapp.com/send/?phone=xxx&text=yyy

En donde:

  • xxx = es el número de teléfono el cual aparecerá por defecto
  • yyy = es el mensaje por defecto que aparecerá

Al igual que en móvil, el número de teléfono no debe llevar espacios ni signos de ningún tipo
Igualmente, el mensaje debe estar codificado para mostrarse en la url, es decir sin espacios ni signos especiales, puedes codificar el mensaje en este enlace

Por ejemplo:


<a class="whatsapp-web" href="https://web.whatsapp.com/send/?phone=34123456789&text=Quiero%20saber%20el%20precio%20del%20producto%20">Preguntar por Whatsapp</a>

El código anterior generará el siguiente enlace que puedes probar en un ordenador:

Preguntar por Whatsapp

 

3- Mostrar/Ocultar Enlaces

Entonces ya tienes los dos enlaces, ahora tenemos que mostrar u ocultar uno de ellos dependiendo si estas en móvil o no, lo haremos con CSS. En el código anterior hemos usado las clases whatsapp-web y whatsapp-movil, entonces:


@media (max-width:768px){
	.whatsapp-movil{
		display:inline;
	}
	.whatsapp-web{
		display:none;
	}
}

@media (min-width:768px){
	.whatsapp-movil{
		display:none;
	}
	.whatsapp-web{
		display:inline;
	}
}

 

Conclusión

Como verás, es posible integrar Whatsapp en tu sitio web simplemente usando HTML y CSS y evitar el uso de un plugin, al ser además código HTML puedes en lugar del texto colocar alguna imagen.

 
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar Whatsapp flotante en WordPressAgregar Whatsapp flotante en WordPress
  • Consultar dudas de produtos por Whatsapp en WooCommerceConsultar dudas de produtos por Whatsapp en WooCommerce
  • Redes sociales sin plugins en WordPressAñadir redes sociales sin plugins en WordPress
  • Evita que tu sitio sea cargado desde un iframeEvita que tu sitio sea cargado desde un iframe
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (10 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Miguel

    15 febrero, 2018

    Perfecto! Lo voy a implementar a ver que tal, tengo 2 clientes que son “whatsapperos”

  2. Javier Cruz

    16 febrero, 2018

    Hola
    muy agradecido de tu articulo me salvaste justo en el momento preciso.
    Este si es el correcto 😀 DECODECMS.
    Saludos!

  3. JUAN MARQUEZ

    18 febrero, 2018

    Hola.
    Muchas gracias por la aportacion.
    ….
    Seria posible enlazar a una imagen sin texto, por ejemplo al icono de WSSapp?

    • Jhon Marreros Guzmán

      18 febrero, 2018

      Hola, si, claro, en el video coloco una imagen dentro del link, luego la saco para que se vea más claramente, pero la idea es la misma. En el siguiente enlace revisa la sección : Image as a link https://www.w3schools.com/html/html_images.asp

      • Juan marquez

        18 febrero, 2018

        Gracias….
        Ya lo tengo línkeado a unos buttons.
        ….
        He detectado una incompatibilidad con dispositivos Android 4.0 y 5.0 en la url para móviles.
        En dispositivos con Android 7 funciona perfecto.
        Podríamos solucionar eso de algún modo?
        …
        Un saludo.

        • Jhon Marreros Guzmán

          19 febrero, 2018

          Hola, muy raro lo que comentas, puedes probarlo con la API genérica, revisa: https://faq.whatsapp.com/en/general/26000030

  4. elda

    30 abril, 2018

    excelente gracias

  5. David Arias

    27 febrero, 2019

    Hola muy buen artículo, te felicito pero no se que pasa 🙁 pero no me funciona, salen los dos siempre. Podría ser que la plantilla esta bloqueando el CSS??

    • Jhon Marreros Guzmán

      3 marzo, 2019

      Hola, si, podría ser algún conflicto CSS con tu theme, para descartar prueba cambiar temporalmente de theme y verifica.

  6. Monica

    9 marzo, 2019

    Hola!!! muchas gracias por el aporte!!! pero no me funciona 🙁 Al igual que a David y pobre cambiar de plantilla como indicaste, y tampoco :(, tenes idea que puede ser? muchas gracias. Un saludo

    • Jhon Marreros Guzmán

      11 marzo, 2019

      Hola es posible que el código CSS que estas usando no se ejecute porque o bien esta mal escrito o porque otro código lo sobrescriba , en cualquier caso sería cuestión de ver la url de tu sitio, puedes escribirme al formulario de contacto con detalles adicionales.

    • Víctor

      4 diciembre, 2021

      Hola Mónica. Finalmente pudiste solucionar? Te vengo siguiendo desde otros foros porque tengo el mismo problema! Saludos y gracias! victorastete@gmail.com

  7. Viviana Martinez

    4 abril, 2019

    mil gracias que articulo tan útil, una pregunta ¿como puedo hacer lo mismo para generar acción de llamada?

    • Jhon Marreros Guzmán

      7 abril, 2019

      Hola, en el href, podrías usar tel, es decir quedaría por ejemplo: href=”tel:34123456789″

  8. Viviana Martinez

    8 abril, 2019

    infinitas gracias

  9. Luis Diaz

    24 abril, 2019

    Me aparecen los dos enlaces aun

    • Jhon Marreros Guzmán

      29 abril, 2019

      Hola, asegúrate de haber ingresado el código CSS correctamente.

  10. nilton

    9 mayo, 2019

    Exlente aporte, muchas gracias.

  11. Carlos

    26 mayo, 2019

    Buenísimo, muy claro. Gracias!

  12. IVAN ARANGO

    30 junio, 2019

    Buenas, soy diseñador y soy inexperto en el manejo de códigos HTML y CSS, lo que he logrado realizar en la página que estoy montando lo he hecho con tutoriales y este ha sido de gran ayuda pero aún tengo un problema, y es que no he podido copiar el codigo CSS en el lugar correcto para que muestre sólo el enlace dependiendo si es WEB o WhatsApp. Estoy utilizando una plantilla Betheme Child y la pague en Betheme base.css, ya que en la raíz de la hoja de estilo salía un mensaje: All css files are placed in /css/ folder; y al ver el contenido de ese sitio era lo más parecido a lo que vi en el video. Aún me siguen saliendo los 2 links y no se donde pegarlo para que funcione la orden. Muchas gracias por su ayuda

    • Jhon Marreros Guzmán

      2 julio, 2019

      Hola, desde la administración de WordPress, prueba pegando el código CSS en la opción de CSS de la plantilla, desde, Apariencia – Personalizar

  13. Antonio

    19 agosto, 2019

    Hola, muy buen tengo una ecommerce y quiero que en todos mis productos aparezca el botón para preguntar producto por whatsapp, la cosa es que quiero en ese botón aparezca por defecto el nombre del producto, un ejemplo: preguntar por …. el nombre del producto…aquí, hay algún código para hacer esto posible?

    • Jhon Marreros Guzmán

      20 agosto, 2019

      Hola, puedes revisar el siguiente artículo: https://decodecms.com/consultar-dudas-de-produtos-por-whatsapp-en-woocommerce/

  14. Ma.

    3 septiembre, 2019

    Hola! Sabes si hay un plugin para poder enviar mensajes al whatsapp de cada miembro de un sitio wordpress? Osea integrarlo con Ultimate Member…
    gracias!

    • Jhon Marreros Guzmán

      4 septiembre, 2019

      Hola, al parecer tienes que tener habilitado la API de negocios, podrías revisar: https://www.whatsapp.com/business/api , pero no he visto igualmente un plugin para esto, posiblemente sea a través de un servicio o algo programado a medida.

  15. Santiago

    5 septiembre, 2019

    Excelente Maestro! Contenido de alta calidad.

  16. jose

    5 septiembre, 2019

    Quiero que se vean mas bonitos, les coloque css y solo funciona en la clase whatsapp web, la clase movil se le desactiva el css

    • Jhon Marreros Guzmán

      7 septiembre, 2019

      Tal vez tengas que usar !important, o especificar un poco más las clases a usar. Puedes escribirme al formulario de contacto y enviarme la url de tu sitio para verificar.

  17. JEAN CHACON

    3 octubre, 2019

    buenos dias, coloco el enlace pero se borra solo en el divi???
    whatsapp://send/?phone=34123456789&text=Quiero%20saber%20el%20precio%20del%20producto%20

    • Jhon Marreros Guzmán

      6 octubre, 2019

      Hola, en qué bloque estas colocando esto? prueba colocarlo en un bloque HTML.

  18. Cristian Camacho

    15 noviembre, 2019

    Hola Jhon, gracias por el tutorial que es muy útil. Tengo la siguiente pregunta: Se puede hacer que al dar click en alguna de las dos opciones abra el whatsapp pero en una ventana diferente sin sacarlo de la página web? Gracias

    • Jhon Marreros Guzmán

      15 noviembre, 2019

      Hola, supongo que te refieres a un popup, podrías usar un iframe, pero igual requeriría más programación, y también habría que revisar si la aplicación web de Whatsapp permite insertar iframes, ya que es posible que igualmente no este permitido.

  19. Boris

    27 diciembre, 2019

    Hola!!1 la instrucción para móvil me molestó, se eliminó del html de salida, probablemente por seguridad o algo… finalmente usé esto: https://wa.me/NUMERO

    • Jhon Marreros Guzmán

      29 diciembre, 2019

      Hola Boris, efectivamente, ese enlace es una actualización y ahora te reconoce directamente el dispositivo. Saludos.

  20. Tomás

    10 febrero, 2020

    Hola Jhon,

    Te felicito por esta gran artículo, eres increíble de verdad!

    Lo he implementado en mi Woocommerce y funciona de maravilla de verdad!!

    Una pregunta, ¿es posible que esto provoque un aumento consumo en CPU?

    Muchas gracias y saludos!!!

    • Jhon Marreros Guzmán

      10 febrero, 2020

      Hola, no hay operaciones matemáticas, ni bucles, ni código exhaustivo que te incremente el uso de CPU por lo que no debes preocuparte.

      • Tomás

        16 febrero, 2020

        Muchas gracias Jhon,
        De nuevo te felicito por tu blog.

        Un saludo!!

  21. Jaime E

    21 abril, 2020

    Excelente, me ayudo mucho, con esto prácticamente ya no usaria plugins… que es lo mismo de no cargar tanto wordpress.

    puedes personalizarlo con tu codigo php para que sea mas dinamico; por ejemplo, que tome el numero de acuerdo a la pagina, post, o contacto.

    Saludos desde Morelos, Mexico.

    • Jhon Marreros Guzmán

      22 abril, 2020

      Hola, si podrías hacerlo, por ejemplo tomando el dato del número telefónico desde un campo personalizado, aunque como bien dices ya no sería sólo HTML sino PHP, me lo anoto para evaluar hacerlo en un futuro artículo.

  22. Jose v

    22 abril, 2020

    Buen dia, muchas gracias por el articulo , quisiera consultar algo : el codigo para web funciona sin problema pero el de movil no abre el enlace (quiero decir que no abre mi whatsapp para enciar el mensaje predeterminado.. que podria hacer para ello ..muchas gracias

    • Jhon Marreros Guzmán

      22 abril, 2020

      Hola, acabo de actualizar el enlace porque la API de Whatsapp cambió, prueba con https://wa.me, revisa nuevamente el artículo.

  23. Christian

    24 abril, 2020

    Hola buenas!
    Lo mismo que Jose V, no me muestra el enlace en movil, solo en web

    • Jhon Marreros Guzmán

      24 abril, 2020

      Hola Christian, efectivamente, había un error con un caracter ya lo he solucionado, prueba nuevamente.

      • Víctor

        4 diciembre, 2021

        Hola Jhon. Me pasa que no puedo abrir el chat de WhatsApp desde el móvil. Sigo todos los pasos desde WordPress y no hay forma. de abrir desde el móvil. Gracias por la ayuda, si es que hay solución.
        En el móvil utilizo Chrome.
        Abrazo!

        • Jhon Marreros Guzmán

          6 diciembre, 2021

          Hola, prueba seguir este artículo que es más reciente: https://decodecms.com/agregar-whatsapp-flotante-en-wordpress/

  24. Christian

    8 mayo, 2020

    Gracias Jhon, funciona bien en web y movil.

    Pero tengo un problema!!… al insertar el objeto logo de ws.. se visualizan ambos logos tanto en web como en movil..ahi quedé tirado!!

    • Jhon Marreros Guzmán

      9 mayo, 2020

      Hola Christian, que bueno que pudiste avanzar, verás creo que tienes mal tu código, primero el enlace tiene que tener una clase (class) y luego se muestra o se oculta con el código CSS: https://decodecms.com/agregar-whatsapp-wordpress-sin-usar-plugins/#Mostrar/Ocultar_Enlaces , revisa cuidadosamente tu código. Saludos.

  25. Digitalización Badalona

    5 junio, 2020

    Gracias Jhon. Me molestaba un poco que me entraran los posibles clientes por Whats, simplemente por ser un tipo organizado y metódico; una vez trabajamos ya no me corto a usar el Whats…
    El caso es que la tendencia es innegable y tus consejos me han venido bien: ya puestos a usar Whats, al menos que lo hagan a mi manera 🙂
    Un saludo!

  26. Alfonso

    8 junio, 2020

    Muchas gracias por el articulo. Muy útil y bien explicado!

  27. Camilo

    21 junio, 2020

    Hola John, no se si haz usado kadence theme, no logro hacer que se oculten, ya probe haciendolo en un child y nada =/ en mi caso agregeu el boton de whatsapp desde una imagen que subí, de la sgte manera… sin embargo no me agarra el ocultar el segundo boton…

    • Jhon Marreros Guzmán

      21 junio, 2020

      Hola, debe ser algún problema con CSS, prueba agregando !important, por ejemplo: display:none!important; y display:inline!important;

  28. franco

    16 agosto, 2020

    Hola que tal? aqui mi consulta. yo quiero crear un boton de whatsapp que vaya a un numero variable, es decir que cambie en cada pagina de mi sitio depende en la tienda que entraron, y customizar el mensaje depende a lo que compraron. es posible eso? no me importa si es con plugin o no, solo que no puedo mezclar esas dos funciones. Sí hacerlas por separado. muchas gracias

    • Jhon Marreros Guzmán

      19 agosto, 2020

      Hola, por código podrías evaluar el siguiente artículo: https://decodecms.com/agregar-whatsapp-flotante-en-wordpress/ , sin embargo en tu caso el código PHP tiene que tener condicionales de acuerdo a la página en la que te encuentes cambie el número, muestre otro mensaje, etc.

  29. Jenny

    8 septiembre, 2020

    Hola querido amigo, muchas gracias por tu aporte tan importante , amo tu página , podrías ayudarme a poner un botón en productos únicos donde pueda direccionar mis clientes a Mis productos de mercado libre, ya que se genera más confianza , ojalá me puedas ayudar con este duda , muchas gracias.

    • Jhon Marreros Guzmán

      9 septiembre, 2020

      Hola, sigue este artículo de referencia en donde se crea un enlace por producto, aunque lo hace para WhatsApp podrías usarlo para cualquier otro fin: https://decodecms.com/consultar-dudas-de-produtos-por-whatsapp-en-woocommerce/

  30. Pedro

    16 diciembre, 2020

    A mi me gustaría que sean 2 opciones. 1 para llamar y otro para whatsapp pero para cada producto. Ya que mi tienda no tiene carrito de compra, es como una especie de clasificados.

    • Jhon Marreros Guzmán

      18 diciembre, 2020

      Hola, revisa el siguiente artículo: https://decodecms.com/consultar-dudas-de-produtos-por-whatsapp-en-woocommerce/ en donde se diferencia por producto.

      • Luis Alfredo

        5 marzo, 2021

        Buenos días, amigo realice los pasos que indicas y me funciona a media, al precionar el boton, conecta con el whatsapp del número predefinido pero no envía el mensaje

        • Jhon Marreros Guzmán

          5 marzo, 2021

          Hola, revisa el siguiente artículo relacionado que usa una sintaxis diferente para llamar a la url de Whatsapp: https://decodecms.com/agregar-whatsapp-flotante-en-wordpress/

  31. Luis Alfredo

    5 marzo, 2021

    Por otro lado, no se si podrias ayudarme en lo siguiente: yo necesito colocar un boton que al darle clic tome el numero de teléfono de un label (donde el visitante a la pagina coloque el numero donde desee recibir o enviar una información predefinida, por ejemplo los datos de la página y una imagen)

    • Jhon Marreros Guzmán

      5 marzo, 2021

      Si el número ya se muestra como HTML, entonces podrías evaluar usar javascript para seleccionar el número y usarlo en el envío.

  32. Luis Alfredo

    6 marzo, 2021

    Dejame explicarme mejor… yo necesito colocar un label o cuadro de texto solo para que permita al usuario colocar un numero de teléfono (no para guardarlo ni enviarlo, solo para usarlo), el cual debe ser tomado por la configuración de un boton para enviar un mensaje predefinido a ese número colocado en el label

  33. Enoch Alvarado

    24 mayo, 2021

    Me sirvió mucho. Todo muy bien explicado. Muchas gracias.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Mostrar el nombre del archivo que esta usando un theme

Cómo duplicar un Widget en WordPress con Javascript

Agregar breadcrumbs de Yoast SEO a tu tema

Cambiar desplegable por botones en las variaciones de productos de WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados