Cómo instalar Whatsapp en mi Sitio Web

Para integrar Whatsapp en tu sitio web no es necesario el uso de plugins que puede afectar el tiempo de carga de tu página web, el método que veremos puedes usarlo sin importar el gestor de contenido usado para crear tu sitio web. Sea WordPress, Joomla, Php, otros…

Inserta tu botón de Whatsapp sin plugins

Primero insertaremos la siguiente etiqueta HTML Antes del cierre de la etiqueta </body> (Si usas WordPress y no deseas modificar tu plantilla, puedes instalar este plugin para insertar el código, sino deberás seleccionar en el menú a tu mano izquierda en tu WordPress Apariencia -> Editor del temas y allí seleccionarás el fichero acorde a la plantilla que utilizas).

<img class="btn-whatsapp" src="https://clientes.dongee.com/whatsapp.png" width="64" height="64" alt="Whatsapp" onclick="window.location.href='https://wa.me/573001112233?text=Hola!%20Estoy%20interesado%20en%20tu%20servicio'">

Cambia tu número de contacto

Es importante cambiar el número de teléfono donde llegará los mensajes cuando tus visitantes te escriban vía Whatsapp. En la etiqueta que acabas de añadir a tu página web encontrarás donde ingresar tu indicativo y número de teléfono “https://wa.me/573001112233?”.

Si deseas personalizar el mensaje por defecto en tu chat, puedes modificar el mensaje posterior al número de teléfono. El espacio entre cada palabra lo haces con los caracteres “%20”.

Añade estilos

En el encabezado de tu página web vamos a insertar los siguientes estilos CSS en medio de las etiquetas <style> y </style>.
Si usas WordPress puedes añadir los estilos en las etiquetas correspondientes en el plugin recomendado.?

<style>
img.btn-whatsapp {
display: block !important;
position: fixed;
z-index: 9999999;
bottom: 20px;
right: 20px;
cursor: pointer;
border-radius:100px !important;
}
img.btn-whatsapp:hover{
border-radius:100px !important;
-webkit-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1); 
-moz-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
transition-duration: 1s;
} 
</style>

Al guardar los cambios y actualizar tu página web ya tendrás instalado el ícono de Whatsapp en tu sitio web. Recuerda borrar el caché de tu navegador

Mejora tus canales de atención añadiendo el link de Whatsapp en Instagram. 👈

Nota:

Si un visitante abre tu chat de Whatsapp desde un computador de escritorio o portátil, le solicitará la descarga de la aplicación. De ya contar con ella, abrirá el chat automáticamente.
Si tu visitante presiona el botón del chat desde un dispositivo móvil, abrirá automáticamente la aplicación de Whatsapp.

¿Tienes un sitio web en WordPress y deseas instalar tu chat con un plugin fácil de administrar? Haz clic aquí. 👈