{"id":1501,"date":"2024-06-27T17:37:07","date_gmt":"2024-06-27T17:37:07","guid":{"rendered":"https:\/\/orpot.com\/blog\/?p=1501"},"modified":"2024-06-27T17:40:55","modified_gmt":"2024-06-27T17:40:55","slug":"como-crear-un-boton-en-html-para-enviar-un-mensaje-por-whats-app","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/como-crear-un-boton-en-html-para-enviar-un-mensaje-por-whats-app\/","title":{"rendered":"\u00bfComo crear un bot\u00f3n en HTML para enviar un mensaje hacia WhatsApp?"},"content":{"rendered":"

Parece una tarea compleja pero es mas f\u00e1cil de lo que te imaginas .<\/p>\n

Para crear un enlace en HTML que env\u00ede un mensaje a trav\u00e9s de WhatsApp, puedes utilizar la API de WhatsApp, la cual permite abrir un chat con un n\u00famero espec\u00edfico y opcionalmente, prefijar un mensaje. A continuaci\u00f3n, te muestro c\u00f3mo hacerlo:<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Enlace para WhatsApp<\/title>\r\n<!--Iconify para usar el icono de Whats app-->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/iconify-icon@2.1.0\/dist\/iconify-icon.min.js\"><\/script>\r\n    <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <a href=\"https:\/\/wa.me\/1234567890?text=Hola%20quiero%20m\u00e1s%20informaci\u00f3n\" class=\"button-whatsapp\" target=\"_blank\">\r\n       <iconify-icon icon=\"ic:baseline-whatsapp\" width=\"1.2rem\" height=\"1.2rem\"><\/iconify-icon> \r\n        Enviar Mensaje\r\n    <\/a>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Para dar un estilo parecido a WhatsApp podemos usar un simple css :<\/p>\n
\/* Estilos para el bot\u00f3n de WhatsApp *\/\r\n.button-whatsapp {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 10px 20px;\r\n    background-color: #25D366;\r\n    color: white;\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    text-decoration: none;\r\n    border-radius: 50px;\r\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n    transition: background-color 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n\r\n\/* Estilo para la imagen dentro del bot\u00f3n *\/\r\n.button-whatsapp img {\r\n    width: 24px;\r\n    height: 24px;\r\n    margin-right: 10px;\r\n    filter: invert(1);\r\n    \/* Esto convierte los colores de la imagen a blanco. Puedes ajustarlo o eliminarlo seg\u00fan la imagen que uses *\/\r\n}\r\n\r\n\/* Efectos al pasar el rat\u00f3n por el bot\u00f3n *\/\r\n.button-whatsapp:hover {\r\n    background-color: #1EBE56;\r\n    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.button-whatsapp:active {\r\n    background-color: #169E49;\r\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n}\r\n<\/pre>\n
Explicaci\u00f3n<\/h3>\n
    \n
  • Enlace (<a><\/code>)<\/strong>:\n
      \n
    •  href=\u00bbhttps:\/\/wa.me\/1234567890?text=Hola%20quiero%20m\u00e1s%20informaci\u00f3n\u00bb : Este enlace utiliza la API de WhatsApp. Reemplaza 1234567890<\/code> con tu n\u00famero de tel\u00e9fono en formato internacional (sin el signo de m\u00e1s) y el texto que deseas enviar despu\u00e9s de text=<\/code>, donde los espacios deben ser reemplazados por %20<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
      Recomendaciones<\/h3>\n
        \n
      • N\u00famero de tel\u00e9fono<\/strong>: Aseg\u00farate de usar el n\u00famero en formato internacional. Por ejemplo, para un n\u00famero en M\u00e9xico ser\u00eda algo como 521234567890<\/code>.<\/li>\n
      • Texto del mensaje<\/strong>: Puedes personalizar el mensaje predeterminado cambiando el valor de text<\/code> en el enlace. Aseg\u00farate de codificar los espacios y caracteres especiales correctamente (por ejemplo, %20<\/code> para un espacio).<\/li>\n<\/ul>\n
        Estos pasos deber\u00edan permitirte crear un enlace funcional para enviar mensajes a trav\u00e9s de WhatsApp desde una p\u00e1gina web.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Parece una tarea compleja pero es mas f\u00e1cil de lo que te imaginas . Para…<\/p>\n","protected":false},"author":1,"featured_media":1502,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[147],"tags":[190],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1501"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1501"}],"version-history":[{"count":6,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1501\/revisions"}],"predecessor-version":[{"id":1508,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1501\/revisions\/1508"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/1502"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}