Saltar al contenido principal
móvil

Integra Whatsapp Click to Chat en WordPress

por 27 de julio de 2020#!31vie, 07 ago 2020 17:24:57 + 0200 + 02: 005731#31vie, 07 ago 2020 17:24:57 + 0200 + 02: 00-5Europe / Rome3131Europe / Romex31 07 pm31pm-31vie, 071 ago 7:240 : 57 + 0200 + 02: 005Europe / Roma3131Europe / Romex312020VIE, 07 ago 2020 17:24:57 + 0200245248pmviernes = 3816#! 31vie, 07 ago 2020 17:24:57 + 0200 + 02: 00europe / Rome81tp4August 7th, 2020#! 31vie ago 2020 17:24:57 + 0200 + 02: 005731# / 31 Vie, 07 de agosto de 2020 17:24:57 + 0200 + 02: 00-5Europe / Rome3131Europe / Romex31#!31 Vie, 07 de agosto de 2020 17:24:57 +0200+ 02 : 00Europa / Roma8#No hay comentarios

1. Encuentra un ícono de Whatsapp

En primer lugar, necesitamos un icono para que el usuario haga clic. Hay muchos sitios de imágenes libres de derechos entre los que puede elegir. Descargue un icono que le guste, cárguelo en la sección de medios y coloque la URL a un lado por ahora.

2. Defina los parámetros

Hay 2 parámetros que debes decidir:

  1. El número de teléfono al que desea enviar el mensaje. WhatsApp
  2. El mensaje que te enviaremos

3. Ponlo todo junto

Aquí está tu botón:

< A href = "Https://api.whatsapp.com/send?phone=00155555555&text=I estoy interesado en su servicio" objetivo = "_Blanco" clase = "Whatsapp" >
< img src = "Https://site.com/wp-content/uploads/2018/07/whatsapp.png" alt = "Whatsapp" >
< / a >

Copie lo anterior, pero asegúrese de cambiar el número de teléfono y el mensaje.

4. Pega el código

Por el bien de este tutorial colocaremos el icono en la parte inferior izquierda de la pantalla y le daremos una posición fija para que no lo pierdas.

Entonces, para hacer eso, pegaré el código de arriba en el mío footer.phparchivo justo antes del cuerpoetiqueta de cierre.

Una vez que haya guardado mi archivo y actualizado mi navegador, podré ver el ícono en la parte inferior de la página. Ahora seguiremos adelante y le daremos forma.

5. Dibuja el botón de Whatsapp

Todo lo que tienes que hacer es escribir algunas líneas CSSy pégalo en el tuyo style.cssexpediente.

.Whatsapp {
posición: fija;
izquierda: 5px;
abajo: 65px;
}

Como puede ver, coloqué mi icono a 5 píxeles de la izquierda de la pantalla y 65 píxeles de la parte inferior. La razón por la que hice esto es porque fijó un texto en mi pie de página cuando me desplacé hasta el final de mi página, pero puedes jugar con él como quieras.

6. El momento de la verdad

Todo lo que debe hacer ahora es actualizar la página, asegúrese de que le guste el lugar donde se encuentra el ícono, haga clic en él y asegúrese de ser transferido a Whatsapp para enviar su mensaje.

Si bien este tutorial debería ser increíblemente fácil de hacer en su sitio, si aún necesita un complemento, aquí hay un complemento que lo ayudará a implementar un botón de hacer clic para llamar de Whatsapp.

Haga clic en Chat para charlar de WhatsApp

Haga clic en Chat para el chat de WhatsApp

Este complemento tiene 10 estilos de diseño diferentes y es realmente fácil de usar. Estas son algunas otras características:

  • Elija su icono / imagen
  • animaciones
  • Estilo en una página / publicación específica
  • Define tu mensaje
  • Soporte para eventos de Google Analytics y Tag Manger
  • Soporte para eventos de Facebook

Dejar una respuesta

Selecciona tu moneda
EUR Euro