{"id":47461,"date":"2026-03-20T04:00:00","date_gmt":"2026-03-20T07:00:00","guid":{"rendered":"https:\/\/www.blip.ai\/blog\/?p=47461"},"modified":"2026-03-25T07:51:06","modified_gmt":"2026-03-25T10:51:06","slug":"como-anadir-boton-whatsapp-web","status":"publish","type":"post","link":"https:\/\/www.blip.ai\/blog\/es\/whatsapp\/como-anadir-boton-whatsapp-web\/","title":{"rendered":"Como a\u00f1adir un bot\u00f3n de WhatsApp en tu web"},"content":{"rendered":"\n

El bot\u00f3n de WhatsApp en una web se apoya en una mec\u00e1nica muy simple: Click to WhatsApp<\/a>. En lugar de pedir el usuario que guarde un n\u00famero de tel\u00e9fono, se le lleva directamente a una conversaci\u00f3n con la empresa. Sin fricciones ni pasos intermedios.<\/p>\n\n\n\n

La base t\u00e9cnica es un enlace de WhatsApp<\/a> con un formato est\u00e1ndar, tambi\u00e9n conocido como enlace wa.me<\/strong>:<\/p>\n\n\n\n

<\/p>\n\n\n\n

https:\/\/wa.me\/<n\u00famero_en_formato_internacional><\/em><\/p>\n\n\n\n

<\/p>\n\n\n\n

El n\u00famero debe ir sin “+”, sin espacios y sin guiones. Para Espa\u00f1a, el formato ser\u00eda 34 seguido del n\u00famero. Con esto, el bot\u00f3n funciona tanto en m\u00f3vil, abre la app,  como en escritorio, donde abre WhatsApp Web.<\/p>\n\n\n\n

C\u00f3mo a\u00f1adir un bot\u00f3n de WhatsApp en tu web (3 m\u00e9todos)<\/strong><\/h2>\n\n\n\n

M\u00e9todo 1: enlace wa.me en un bot\u00f3n HTML<\/strong><\/h3>\n\n\n\n

El m\u00e9todo m\u00e1s directo. Un bot\u00f3n o enlace que apunte a tu wa.me, listo para pegar en cualquier p\u00e1gina:<\/p>\n\n\n\n

  <\/p>\n\n\n\n

href=”https:\/\/wa.me\/34123456789?text=Hola%20me%20gustar\u00eda%20recibir%20m\u00e1s%20informaci\u00f3n”<\/em><\/p>\n\n\n\n

\u00a0\u00a0target=”_blank”<\/em><\/p>\n\n\n\n

\u00a0\u00a0rel=”noopener”<\/em><\/p>\n\n\n\n

\u00a0\u00a0aria-label=”Abrir chat en WhatsApp”<\/em><\/p>\n\n\n\n

\u00a0\u00a0style=”display:inline-block;background:#25D366;color:#fff;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:600;”<\/em><\/p>\n\n\n\n

><\/em><\/p>\n\n\n\n

\u00a0\u00a0Hablar por WhatsApp<\/em><\/p>\n\n\n\n

<\/a><\/em><\/p>\n\n\n\n

<\/p>\n\n\n\n

Dos detalles que marcan la diferencia: el par\u00e1metro text= permite que el chat se abra con un mensaje ya escrito (m\u00e1s sobre esto m\u00e1s abajo), y rel=”noopener” mejora la seguridad del enlace saliente.<\/p>\n\n\n\n

M\u00e9todo 2: bot\u00f3n flotante<\/strong><\/h3>\n\n\n\n

El bot\u00f3n flotante de WhatsApp<\/strong> se mantiene visible mientras el usuario navega, lo que suele aumentar el contacto en p\u00e1ginas largas como servicios, pricing o fichas de producto. Es el formato m\u00e1s usado en webs comerciales.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\u00a0\u00a0href=”https:\/\/wa.me\/34123456789?text=Hola%20%C2%BFpod%C3%A9is%20ayudarme%3F”<\/em><\/p>\n\n\n\n

\u00a0\u00a0class=”wa-float”<\/em><\/p>\n\n\n\n

\u00a0\u00a0target=”_blank”<\/em><\/p>\n\n\n\n

\u00a0\u00a0rel=”noopener”<\/em><\/p>\n\n\n\n

\u00a0\u00a0aria-label=”WhatsApp”<\/em><\/p>\n\n\n\n

><\/em><\/p>\n\n\n\n

<\/a><\/em><\/p>\n\n\n\n

<style><\/em><\/p>\n\n\n\n

\u00a0\u00a0.wa-float {<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0position: fixed;<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0width: 56px; height: 56px;<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0bottom: 20px; right: 20px;<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0background: #25D366; color: #fff;<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0border-radius: 50%;<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0display: flex; align-items: center; justify-content: center;<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0font-size: 24px;<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0box-shadow: 0 10px 25px rgba(0,0,0,.2);<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0z-index: 9999;<\/em><\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0text-decoration: none;<\/em><\/p>\n\n\n\n

\u00a0\u00a0}<\/em><\/p>\n\n\n\n

\u00a0\u00a0.wa-float:hover { filter: brightness(.95) }<\/em><\/p>\n\n\n\n

<\/style><\/em><\/p>\n\n\n\n

<\/p>\n\n\n\n

Hay variantes m\u00e1s elaboradas, con burbuja de “\u00bfTe ayudamos?” o un mini panel desplegable, y tambi\u00e9n opciones sin c\u00f3digo a trav\u00e9s de widgets si prefieres no tocar HTML.<\/p>\n\n\n\n

M\u00e9todo 3: plugins en WordPress, Shopify o Webflow<\/strong><\/h3>\n\n\n\n

Si el sitio est\u00e1 en un CMS, lo habitual es usar un plugin de bot\u00f3n flotante o un widget que permita personalizar el icono, el copy, los horarios de atenci\u00f3n y las p\u00e1ginas donde aparece. <\/strong>La configuraci\u00f3n t\u00edpica incluye mostrarlo solo en m\u00f3vil, excluir el checkout y activarlo \u00fanicamente en las p\u00e1ginas donde tiene sentido.<\/p>\n\n\n\n

Quiz\u00e1s te interesa: <\/strong>WhatsApp multiagente: automatiza y distribuye conversaciones con tu equipo<\/strong><\/a><\/p>\n\n\n\n

Buenas pr\u00e1cticas para que el bot\u00f3n convierta (sin resultar molesto)<\/strong><\/h2>\n\n\n\n

Ubicaci\u00f3n y copy<\/strong><\/h3>\n\n\n\n

Un bot\u00f3n de WhatsApp en una web no es “poner un icono y ya”. Para que funcione de verdad hay que pensar en d\u00f3nde se coloca y qu\u00e9 dice.<\/p>\n\n\n\n

La posici\u00f3n m\u00e1s reconocible es abajo a la derecha, que es donde el usuario espera encontrarlo. En cuanto al texto, copys gen\u00e9ricos como “Cont\u00e1ctanos” convierten menos que opciones orientadas a la intenci\u00f3n: “Hablar con admisiones”, “Resolver una duda”, “Pedir presupuesto”.<\/p>\n\n\n\n

Si hay atenci\u00f3n humana detr\u00e1s, conviene indicar el horario y dejar claro qu\u00e9 pasa fuera de \u00e9l: “Fuera de horario, deja tu consulta y te respondemos en menos de X horas.”<\/p>\n\n\n\n

h3 Mensaje predefinido y segmentaci\u00f3n por intenci\u00f3n<\/strong><\/p>\n\n\n\n

El par\u00e1metro text= del enlace funciona como primera pregunta. Un mensaje de inicio bien pensado reduce la fricci\u00f3n y ayuda a enrutar la conversaci\u00f3n desde el principio. En vez de un “Hola” gen\u00e9rico, funciona mejor algo como:<\/p>\n\n\n\n