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:
- El número de teléfono al que desea enviar el mensaje. WhatsApp
- El mensaje que te enviaremos
3. Ponlo todo junto
Aquí está tu botón:
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.php
archivo justo antes del cuerpo
etiqueta 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 CSS
y pégalo en el tuyo style.css
expediente.
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
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