Parece una tarea compleja pero es mas fácil de lo que te imaginas .
Para crear un enlace en HTML que envíe un mensaje a través de WhatsApp, puedes utilizar la API de WhatsApp, la cual permite abrir un chat con un número específico y opcionalmente, prefijar un mensaje. A continuación, te muestro cómo hacerlo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enlace para WhatsApp</title>
<!--Iconify para usar el icono de Whats app-->
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="https://wa.me/1234567890?text=Hola%20quiero%20más%20información" class="button-whatsapp" target="_blank">
<iconify-icon icon="ic:baseline-whatsapp" width="1.2rem" height="1.2rem"></iconify-icon>
Enviar Mensaje
</a>
</body>
</html>
Para dar un estilo parecido a WhatsApp podemos usar un simple css :
/* Estilos para el botón de WhatsApp */
.button-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
background-color: #25D366;
color: white;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Estilo para la imagen dentro del botón */
.button-whatsapp img {
width: 24px;
height: 24px;
margin-right: 10px;
filter: invert(1);
/* Esto convierte los colores de la imagen a blanco. Puedes ajustarlo o eliminarlo según la imagen que uses */
}
/* Efectos al pasar el ratón por el botón */
.button-whatsapp:hover {
background-color: #1EBE56;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.button-whatsapp:active {
background-color: #169E49;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
Explicación
- Enlace (
<a>):- href=»https://wa.me/1234567890?text=Hola%20quiero%20más%20información» : Este enlace utiliza la API de WhatsApp. Reemplaza
1234567890con tu número de teléfono en formato internacional (sin el signo de más) y el texto que deseas enviar después detext=, donde los espacios deben ser reemplazados por%20.
- href=»https://wa.me/1234567890?text=Hola%20quiero%20más%20información» : Este enlace utiliza la API de WhatsApp. Reemplaza
Recomendaciones
- Número de teléfono: Asegúrate de usar el número en formato internacional. Por ejemplo, para un número en México sería algo como
521234567890. - Texto del mensaje: Puedes personalizar el mensaje predeterminado cambiando el valor de
texten el enlace. Asegúrate de codificar los espacios y caracteres especiales correctamente (por ejemplo,%20para un espacio).
Estos pasos deberían permitirte crear un enlace funcional para enviar mensajes a través de WhatsApp desde una página web.
