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
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
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!