• 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 flotante en WordPress

Agregar Whatsapp flotante en WordPress

Agregar Whatsapp flotante en WordPress

[ 14 enero 2020 ] [ Actualizado: 17 junio 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

mejoras social

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En un artículo anterior vimos cómo agregar un enlace de Whatsapp en WordPress, sin embargo sólo era visible como parte del contenido, en este artículo veremos cómo agregar un icono de Whatsapp que se mantenga visible siempre de forma flotante en la parte inferior del sitio.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen, mostrando el icono de Whatsapp de manera fija en la parte inferior de tu sitio.

Icono Whatsapp flotante en WordPress

 
Cuando se use el botón de Whatsapp se verá algo simila a lo que se muestra en la siguiente imagen:

Envío de mensaje por Whastapp en movil

 

Código necesario para mostrar Whatsapp

Puedes agregar el siguiente código PHP al final de tu archivo functions.php de tu child-theme o usando algún plugin de snippets.

add_action('wp_footer','dcms_add_footer_whatsapp');

function dcms_add_footer_whatsapp(){
	$tel = "34123456789";
	$ms = urlencode("Este es un texto por defecto");

	$url = "https://wa.me/${tel}?text=${ms}";
	$img = get_stylesheet_directory_uri().'/img/whatsapp-icon.svg';
	echo "<div id='float-whatsapp' style='position:fixed;bottom:40px;right:40px;'>";
	echo " <a href=${url} target='_blank'>";
	echo " <img src='${img}' width=60 height=60 />";
	echo " </a>";
	echo "</div>";
}

Puedes modificar el número de teléfono en la variable $tel, el número de teléfono no debe llevar espacios ni signos de ningún tipo.
Puedes modificar el mensaje por defecto en la variable $ms
Puedes descargar el icono de Whatsapp icono whatsapp desde este enlace.

En el código anterior:

  • Usamos el hook wp_footer que hace referencia a la función dcms_add_footer_whatsapp
  • Dentro de la función podemos cambiar el valor del número telefónico en la variable $tel, que debe constar sólo de números
  • También podemos enviar un mensaje por defecto en la variable $ms
  • Con estos datos formamos la url, en la variable $url
  • Hacemos referencia a la imagen de whatsapp en la variable $img, la tenemos en una carpeta img dentro del theme o child-theme
  • Finalmente formamos el HTML con CSS en línea usando todos los valores de las variables anteriores

 

Conclusión

Como hemos visto, puedes agregar un icono de Whatsapp de manera simple en el pie de tu sitio web a través de código y sin usar plugins adicionales.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Consultar dudas de produtos por Whatsapp en WooCommerceConsultar dudas de produtos por Whatsapp en WooCommerce
  • Whatsapp en WordPressAgregar Whatsapp en WordPress sin usar plugins
  • Redes sociales sin plugins en WordPressAñadir redes sociales sin plugins en WordPress
  • Contenido de relleno en WordPressContenido de relleno en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Juan Carlos

    14 enero, 2020

    Excelente tutorial
    Sabes solé tengo una duda como haría para que se sevea en una página diferente ya que tengo varias páginas y quería saber si es posible poner varios WhatsApp en diferentes paginas con diferentes números es posible buenos me gustaría saber si hay esa posibilidad de hacerlos

    • Jhon Marreros Guzmán

      14 enero, 2020

      Hola, si, claro que es posible, podrías usar por ejemplo la función de WordPress is_page() para comprobar la página en la que te encuentras (como parámetro puedes poner el alias de la página o el ID).

      La idea es reemplazar las dos líneas del telefono y mensaje y colocarlas en condicionales, por ejemplo:

      if ( is_page('contacto') ){
      	$tel = "34123456789";
      	$ms = urlencode("Este es un texto para contacto");
      }
      if ( is_page('servicios') ){
      	$tel = "34123456789";
      	$ms = urlencode("Este es un texto para servicios");
      }
      

      Saludos.

      • Juan Carlos

        17 enero, 2020

        Hola, estuve intentando y no tuve resultado, habrá la forma que puedas poner el código completo como se vería en cada pagina diferente con numero ya que se me complico seria genial.
        Muchas gracias bendiciones 👍

        • Juan Carlos

          17 enero, 2020

          y volví a intentarlo y se ve en todas las paginas yo quiero saber si se puede ver en una pagina especifica
          Por ejm:
          Tengo una área de Post Venta y otro de Servicios
          como seria la forma correcta de poner el código completo serie genial su ayuda muchas gracias.

        • Jhon Marreros Guzmán

          17 enero, 2020

          Hola, ¿será el mismo contacto para ambas páginas?, si es el mismo contacto para ambos entonces puedes probar:

          function dcms_add_footer_whatsapp(){
          	//Si cumple esta condición hacemos un return, sino continuará
          	if ( ! is_page(xxx) && ! is_page(yyy)  ) return;
          
          	$tel = "34123456789";
          	$ms = urlencode("Este es un texto por defecto");
          ...
          }

          Tienes que reemplazar xxx y yyy por los IDs de las páginas. Puedes averiguar el ID desde el backend de WordPress al ingresar a editar la página verás un parámetro en la url de la barra de direcciones de tu navegador post=xxx, donde xxx es un número

      • Juan Carlos

        18 enero, 2020

        Hola,
        estuve revisando y aun no encuentro resultado.
        quisas no me explique bien y como no tengo conocimiento en PHP se me es complicado por ahora.
        Ejm
        Quisera que el boton de whatsapp sevea en una pagina especifica.
        En inicio de la web no! y solo en areas que yo especifique!
        en una entrada* ahi tengo el post venta* (con un numero distinto)
        en otra entrada* ahi tengo are de servicios* (con un numero distinto)
        en otra entrada* ahi tengo venta* (con un numero distinto)
        y asi de esa manera que pueda agregar mas si fuera el caso pero
        que no se repita en las demas paginas que sea independientes es posible quedo atento
        muy agradecido desde ya! muchas gracias.

  2. No Experto en PHP

    14 enero, 2020

    Como hago para ocultarlo en paginas especificas, y como hago para ocultarlo en la seccion de blog de la pagina

    • Jhon Marreros Guzmán

      14 enero, 2020

      Hola

      Puedes poner todas tus condiciones antes de que se ejecute el código, es decir, sino quieres mostrarlo en algunas páginas o en la lista de categorías puedes usar por ejemplo:

      function dcms_add_footer_whatsapp(){
      	//Si cumple esta condición hacemos un return, sino continuará
      	if ( is_page(xxx) || is_category() ) return;
      
      	$tel = "34123456789";
      	$ms = urlencode("Este es un texto por defecto");
      ...
      }
      

      cambia xxx por el ID de la página, si quieres más páginas agrégalas de manera similar con la condicional ||

      Saludos.

      • No Experto en PHP

        14 enero, 2020

        Muchas Gracias, y ¿para ocultarlo de todas las entradas de blog?

        • Jhon Marreros Guzmán

          14 enero, 2020

          Hola, en ese caso puedes usar is_single() que devuelve verdadero cuando es una entrada, tu código quedaría:

          function dcms_add_footer_whatsapp(){
          	//Si cumple esta condición hacemos un return, sino continuará
          	if ( is_single() ) return;
          
          	$tel = "34123456789";
          	$ms = urlencode("Este es un texto por defecto");
          ...
          }
          

          Saludos.

  3. No Experto en PHP

    14 enero, 2020

    Ya logre ocultar el boton en los blogs, gracias! Por cierto tengo el boton de Messenger pero como plugin y carga un al cargarse, ¿es posible ocultarlo tambien en las entradas de blog? hay algun comando php para ocultar plugins en ciertas paginas del sitio web, o en su defecto habra alguna opcion de cargar un estilo (display:none;) para que no salga. Serias muy bueno si me ayudas gracias 🙂

    • Jhon Marreros Guzmán

      15 enero, 2020

      Hola, lo más práctico en ese caso, puesto que no conozco como esta programado, es ocultarlo por CSS, podrías evaluar usar la clase CSS .archive, que se crea a nivel de body y luego buscar la clase o id del elemento que quieres ocultar. Revisa el siguiente artículo y video: https://decodecms.com/estilos-css-defecto-genera-wordpress/

      • No Experto en PHP

        15 enero, 2020

        Gracias funciono usando:

        **CSS**
        /*ocultar burbuja de facebook messenger en articulos de blog*/
        .post-template-default .hidefbbubble {
        display: none!important;
        }

        y abriendo configuración del plugin y yendo a un apartado que dice “Code Snippet”:

        Era
        …

        Le añadi algo
        …

        Y funciono, Ahora ya la burbuja de chat de Messenger no sale en los articulos de blog.

        • Jhon Marreros Guzmán

          17 enero, 2020

          Hola, que bueno que lo solucionaste 🙂

  4. Mauricio C

    14 enero, 2020

    Hola, muchas gracias por los tutoriales, están geniales, solo quisiera saber como poner que si están en mi página por el celular, entonces les abra la aplicación, pero si están por la web, que les abra el web whatsapp.
    Muchas Gracias

    • Jhon Marreros Guzmán

      15 enero, 2020

      Hola, eso ya lo hace el código a través de la url https://wa.me/ , esa url es parte de la API de Whatsapp y al acceder se interpreta que se irá a una web (en caso de ordenador) o a la app (en caso de un móvil)

      • Mauricio C

        15 enero, 2020

        No me funciona, pues al accesar por la Web, me arroja a una página, que pareciera que es la del Whatsapp, sin embargo no lo abre, y me dice Abre Whatsapp o descarga, al pinchar “abre”, me abre el web whatsapp, pero no con los parámetros que agregamos, sino que solo lo abre…. 🙁 (Puedes verlo en la página)

        • Jhon Marreros Guzmán

          15 enero, 2020

          Hola, tienes razón, ya he corregido el código que había un / en la formación de la url que hacia que se pierda el número, debe ser:

          $url ="https://wa.me/${tel}?text=${ms}";

          Gracias por el aviso.

  5. Mauricio C

    15 enero, 2020

    Muchas gracias, de igualmanera no levanta ditectamente Web Whatsapp, dice que la aplicación no está instalada, pero aperece un link que dice “usar web whatsapp” y ahí si lo envía….. Muchas Gracias

    • Jhon Marreros Guzmán

      15 enero, 2020

      Hola, si, efectivamente, en este caso particular wa.me hace eso, al parecer la API esta buscando promocionar su aplicación de escritorio. Tomaré nota para evaluar mejorar el código con una condición de detección de movil por PHP, y usar una url u otra, Aunque en el futuro puede ser que igualmente web.whatsapp.com haga algo similar.

  6. alejandro PEREIRA

    22 febrero, 2020

    esta URL “https://web.whatsapp.com/send?phone=”
    funciona en web whatsapp y en la app sin preguntar va directamente a la app

    • Jhon Marreros Guzmán

      23 febrero, 2020

      Hola, es posible entonces que tenga una redirección, aunque en la documentación recomiendan https://wa.me

  7. Jorge

    7 marzo, 2020

    Hola, me sale el icono pero no logro hacer que se vea la imagende whatsapp solo un cuadro transparente, creo no estoy poniendo bien la ruta, subi la imagen por filezilla, tienes un tutorial de como puedo subir la imagen y poner su liga paso por paso gracias! tu canal es muy bueno sencillo y funcona

    • Jhon Marreros Guzmán

      7 marzo, 2020

      Hola, debes colocar la imagen en una carpeta img que se encuentre dentro del tema activo que estes usando. Si sigues con problemas envíame detalles a través del formulario de contacto: https://decodecms.com/contacto/

      • Jorge

        7 marzo, 2020

        Ya pude, si busque el archivo functions dentro del tema activo como dices y puse la carpeta ahi junto y funciono muchas gracias

  8. Saúl

    27 marzo, 2020

    Hola:

    A mí no me funciona el enlace si hacemos scroll por encima del footer, queda como por debajo del contenido. Algo estaré haciendo mal.

    ¡Gracias!

    • Saúl

      27 marzo, 2020

      Solucionado, disculpa. Me faltaba el “z-index”. Muchas gracias por el aporte.

  9. lissa

    29 marzo, 2020

    hola buenas he visto tus comentario hermano .
    me gustaria saber si a ese codigo se le puede añadir o modificar para que tome el link o url de donde el cliente mando el mensaje.. ? por ejemplo si el cliente envio el mensaje desde la pagina home, que una ves que el envie el mesaje tambien tome la url home automaticamente ?

    • Jhon Marreros Guzmán

      29 marzo, 2020

      Hola, si, pero en lugar de comprobar la url puedes comprobar la página, el home se comprueba con is_home() o is_front_page(), revisa esta respuesta: https://decodecms.com/agregar-whatsapp-flotante-en-wordpress/#comment-4675

  10. Alex

    5 junio, 2020

    Buen post, una duda. No me carga la imagen, solo se ve un cuadro con imagen rota. Intente desde mis archivos y con el link directo del post pero no se ve el icono de Whatsapp. Que peude ser?

    • Jhon Marreros Guzmán

      5 junio, 2020

      Hola, revisa qué url se genera, puedes usar el inspector de código de tu navegador, asegúrate de que la url de la imagen cargue en el navegador, puedes usar la barra de direcciones, antes de usarla en el código.

  11. Dámaris

    24 junio, 2020

    Hola Jhon! Muchas gracias por todos tus tutoriales. Soy fan de no usar plugins así que tu contenido me ayuda muchísimo haciendo mi primer sitio.
    Oye, quisiera preguntarte si sabes porque el logo flotante desaparece o se oculta cuando llego al footer?
    Estoy tratando de no usar plugins para el footer pero he tenido problemas porque tampoco puedo insertar los códigos de Facebook de “me gusta” y “compartir” ahí.
    ¿A qué se deberá?
    Espero puedas ayudarme. Muchas gracias.

    • Jhon Marreros Guzmán

      25 junio, 2020

      Hola, si se esta ocultando es posible que el footer sea igualmente fixed o que tenga un z-index mayor, podrías probar agregando a z-index un valor alto. style=’position:fixed;bottom:40px;right:40px;z-index:9999′

  12. Carolina

    2 julio, 2020

    Hola, cómo estás? Gracias por tu aporte. Queria consultarte cómo puedo hacer para que me abra el link en otra ventana diferente. Veo que está la etiqueta target blank pero no funciona. Gracias

    • Jhon Marreros Guzmán

      2 julio, 2020

      Hola, si funciona, en el video al final lo prueba y se abre una nueva pestaña, revisa que lo hayas escrito bien, es _blank, con guion bajo al inicio.

  13. Mandra

    8 julio, 2020

    Todo el código me funciona bien pero el icono de WhatsApp no sale

    • Jhon Marreros Guzmán

      8 julio, 2020

      Hola, debe ser debido a una ruta incorrecta de la imagen, usa el inspector de código para ver la ruta que se genera, si sigues con problemas envía la url del sitio en donde lo implementaste para revisar.

  14. Tomas

    17 agosto, 2020

    Hola como va, pensando en páginas que usan acf, existe la posibilidad de que dentro del mensaje que se personaliza capture la url desde donde pulso el botón?. Ej:si estaba mirando un auto “X”…el mensaje diga “queria consultar más información sobre este auto : http://www.lapagina.com/el-auto-en-cuestion )

    • Jhon Marreros Guzmán

      19 agosto, 2020

      Hola, podrías probar usar la función https://developer.wordpress.org/reference/functions/get_http_origin/ para obtener la url de origen

  15. Tefa

    17 agosto, 2020

    Hola Jhon, pregunta, usé el código que compartiste y anda perfecto, pero en mi sitio versión movil no se vé, que tengo que hacer o modificar para que aparezca en la versión movil? Gracias

    • Jhon Marreros Guzmán

      19 agosto, 2020

      Hola, si se ve en tu ordenador, si que debería verse en movil, sin embargo cuida que el nombre del archivo de imagen no tenga caracteres especiales y sea de un formato adecuado (.svg, .png, .jpg) ya que en móviles algunos navegadores como safari pueden tener problemas.

  16. Gaston

    21 agosto, 2020

    He seguido todos los pasos, pero no me sale el boton flotante, yo la imagen del whatsapp la importe desde cpanel y la guarde en la carpeta images del theme. Esta bien? o estoy fallando en algo?

    • Jhon Marreros Guzmán

      22 agosto, 2020

      Hola, teóricamente lo que comentas es correcto, asegúrate de que tu imagen es accesible desde una url, luego usa esa url en el código.
      Te sugiero no usar espacios ni caracteres especiales como parte del nombre de tu imagen.

  17. Javier

    10 septiembre, 2020

    Hola Jhon, gracias por tus aportes.
    Una pregunta:
    Si tengo varios usuarios ofreciendo sus servicios, como hacer que el boton de whatsapp obtenga un numero diferente para cada uno de ellos?

    • Jhon Marreros Guzmán

      11 septiembre, 2020

      Hola, ¿desde qué página se enviaría los mensajes de Whatsapp?, si es desde alguna página del perfil de usuario, entonces podrías recuperar este dato del usuario que se esta mostrando actualmente.

  18. Andres

    26 octubre, 2020

    Hola, ¿porque será que no se visualiza la imagen del icono?

    • Jhon Marreros Guzmán

      30 octubre, 2020

      Es posiblemente debido a la ruta en donde esta el archivo, puedes inspeccionar el código generado y comprobar qué ruta esta utilizando para la imagen, asegúrate que sea una ruta válida, puedes usar el inspector de código de tu navegador para esto.

  19. alessandro

    24 diciembre, 2020

    ayuda. Ahora me quedo un problema. no puedo modificar el numero. Me aparece siempre el del ejemplo. He intentado tambien eliminando toda la linea de codigo nueva, pero sigue apareciendome el icono sin imagen y el numero de telefono de ejemplo. Es muy raro y no se por que quedo asi. Como puedo volver a eliminar el codigo?

    • Jhon Marreros Guzmán

      29 diciembre, 2020

      Hola, si ya realizaste los cambios y no se reflejan, posiblemente sea un problema de cache, ya sea por un plugin de cache o por la cache del navegador. Saludos.

  20. Noelia

    7 abril, 2021

    Hola,

    Muchas gracias por compartir el código, pero en la vista móvil el icono se me va de la plantilla y se ve una columna blanca y luego el icono, ¿hay alguna manera de ajustarlo para que quede también dentro de la vista móvil y no la desconfigure?
    En la vista normal el icono aparece correctamente.

    gracias

    • Jhon Marreros Guzmán

      10 abril, 2021

      Hola posiblemente requieras hacer un retoque CSS para la vista móvil, ya que tu theme debe tener algún estilo diferente para movil que entra en conflicto. Podrías revisar media queries de CSS para aplicar código sólo a la vista móvil.

  21. Carlos

    8 abril, 2021

    Hola, Jhon. Muchas gracias por tu código.
    Me gustaría preguntarte: Cómo puedo agregar un texto + función en la variable $ms?

    Por ejemplo:

    $ms = urlencode( Pregunta por este producto: get_the_title());

    Gracias, un saludo

  22. Juann

    7 mayo, 2021

    Hola excelente tutorial, una pregunta cómo puedo colocarlo exactamente en ese lugar pero del lado izquierdo, lo hice moviendo los valores de la posición 40 x 40, pero no es responsive, si lo veo en escritorio o en pantallas más grande no Mante una posición congruente, como lo puedo hacer responsive para todos los dispositivos?

    • Jhon Marreros Guzmán

      10 mayo, 2021

      Hola, en lugar de right:40px, usa left:40px

  23. Fredy Pineda

    7 junio, 2021

    Hola. Lo he instalado y funciona correctamente. Sin embargo, se borra el código casi al día siguiente de la instalación.

    • Jhon Marreros Guzmán

      10 junio, 2021

      Hola, tal vez insertaste el código en algún archivo temporal que te crea algún plugin de optimización.

  24. Beatriz

    20 enero, 2023

    Hola! Qué buena explicación!
    Lo he instalado y en el ordenador funciona perfectamente, pero en el móvil y en tablet se ve el botón gigante, por encima de todo lo demás.
    ¿Cómo podría solucionarlo?
    Muchas gracias

    • Jhon Marreros Guzmán

      20 enero, 2023

      Hola, en la url de usuario no veo que se muestre un botón flotante de Whatsapp, envíame la url exacta en donde aparece para revisar.

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

Modificar desplegable de orden de productos en WooCommerce

Subir archivos en WordPress usando Ajax

Clases CSS basadas en el Rol de usuario en WordPress

Mostrar categorías y etiquetas en lista de productos WooCommerce

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