Enviando un mensaje de WhatsApp a través de link
En este post te mostraré a crear un enlace para compartir una página web o un enlace en WhatsApp usando la (muy limitada) API de WhatsApp. También te enseñaré a enviar un mensaje a un usuario específico según su número, de modo que al tocar el enlace se nos llevará directo a su chat.
Voy a mostrarte cómo crear un enlace usando HTML puro, otro usando PHP y otro usando JavaScript.
Un enlace para compartir en WhatsApp tiene el siguiente formato:
https://api.whatsapp.com/send?text=texto_codificado
Así de simple, solo hay que cambiar la variable de texto_codificado que va después del parámetro text. Por ejemplo, veamos otro enlace:
https://api.whatsapp.com/send?text=Visita%20el%20blog%20de%20Parzibyte%20en%20https://parzibyte.me/blogEso es un mensaje codificado en donde los espacios y otros caracteres especiales se remplazan.
Prueba el enlace haciendo click aquí.
Si lo abres en un móvil, se verá lo siguiente:
Ahí puedes seleccionar al receptor del mensaje. Cuando lo elijas, tendrás que confirmar.
Finalmente el mensaje enviado se verá así:
Una cosa similar pasa en la web con WhatsApp web.
Igualmente podemos generar un link para enviar un mensaje a un número en específico. Esto sirve para cuando, por ejemplo, queremos que nos envíen un mensaje a nuestro número de manera automática.
El enlace se convierte en:
https://wa.me/Número/?text=Texto
De este modo podemos generar un enlace para que se envíe un mensaje a un número en específico. Los parámetros que tenemos que cambiar son el número y el texto. Por cierto, el número no debe llevar guiones y debe estar en formato internacional.
Solo como ejemplo (aquí en México los números empiezan en +52) para un enlace de WhatsApp al número +529999999999 con el texto Saludos, el link sería:
https://wa.me/529999999999/?text=Saludos
Fíjate en que no estoy incluyendo el signo de +. De este modo al hacer clic en el enlace se abrirá un chat de WhatsApp con el número que hayamos indicado y con el texto indicado igualmente. El usuario solo tendrá que tocar el botón de enviar.
La información la tomé de aquí.
Coloca una etiqueta a con un enlace y el texto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Enviar por WhatsApp by parzibyte</title>
</head>
<body>
<h1>Enlace de WhatsApp</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br>
<!-- Comienza el enlace -->
<a href="https://api.whatsapp.com/send?text=Aprendiendo a compartir desde https://parzibyte.me/blog">Compartir en WhatsApp</a>
</body>
</html>En este caso no es necesario codificar, pues con suerte el navegador lo hace por nosotros.
Para generarlo con JavaScript hay que llamar a window.open y pasarle la dirección. El mensaje hay que codificarlo con encodeURIComponent.
Veamos un ejemplo. Definimos el diseño:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Enviar por WhatsApp by parzibyte</title>
</head>
<body>
<h1>Enlace de WhatsApp</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br><br>
<input id="texto" type="text" placeholder="Lo que quieres compartir">
<button id="btnCompartir">Compartir</button>
<script src="script.js"></script>
</body>
</html>Ahora el script:
const $btnCompartir = document.querySelector("#btnCompartir"),
$texto = document.querySelector("#texto");
$btnCompartir.addEventListener("click", () => {
let mensaje = $texto.value;
if (!mensaje) return alert("Escribe algo");
window.open("https://api.whatsapp.com/send?text=" + encodeURIComponent(mensaje));
});Cuando se hace click en el botón, se abre la ventana para compartir en WhatsApp.
Finalmente también podemos implementarlo en PHP.
En PHP no existe una función equivalente a la que existe en JavaScript: encodeURIComponent (y urlencode no funcionaba) pero la he tomado de otro lugar.
El código se ve así:
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php
# Tomada de https://stackoverflow.com/questions/1734250/what-is-the-equivalent-of-javascripts-encodeuricomponent-in-php
function encodeURIComponent($str) {
$revert = array('%21'=>'!', '%2A'=>'*', '%27'=>"'", '%28'=>'(', '%29'=>')');
return strtr(rawurlencode($str), $revert);
}
$mensaje = "Creando enlaces de WhatsApp desde PHP. https://parzibyte.me/blog";
$enlace = "https://api.whatsapp.com/send?text=" . encodeURIComponent($mensaje);
?>
<a href="<?php echo $enlace ?>">Compartir</a>
</body>
</html>Al final de todo es generar un simple enlace y codificar el mensaje.
La forma de obtención del mensaje y la implementación queda en ti
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.
Ver comentarios
haciendo pruebas veo que el mensaje de wassap llega con el titulo de tu pagina y la imagen que esta en la pestaña de la ur de la pagina a compartirl...como haces para la imagen ? a mi solo me sale el titulo de mi pagina en el mensaje,,,,Gracias
Hola. Si tiene alguna consulta puede hacérmela llegar en https://parzibyte.me/#contacto
Saludos!
Hola. Me gustaría disponer de un generador de enlaces personalizado en mi página web, pero no entiendo cómo hacerlo. El generador solo lo utilizaría para crear mis propios mensajes para marketing digital. Me podrías ayudar?
Hola. Ya le he respondido al mensaje privado que me envió.
Saludos!