Generador de botón de WhatsApp para tu página web

Qué hace este botón de WhatsApp para tu página web

Es un botón redondo que queda fijo en una esquina de tu página web mientras el visitante baja. Al tocarlo se abre un chat de WhatsApp con tu número y, si lo configuraste, con un mensaje ya escrito. Por dentro es un enlace wa.me, el mismo del generador de link de WhatsApp, con unas líneas de CSS para que flote.

El código es HTML y CSS, sin JavaScript. No carga archivos de otros servidores, no tiene rastreadores y no depende de esta página ni de ningún servicio externo: queda dentro de tu sitio.

Cómo crear el botón, paso a paso

1. 1Elige el país y escribe tu número de WhatsApp. Sirve el de la aplicación, el de WhatsApp Business o uno conectado a la API oficial.
2. 2Escribe el mensaje con el que te van a escribir. “Vengo de la página web” te dice de dónde llegó el cliente sin preguntarle.
3. 3Si quieres, agrega un texto corto al lado del ícono, como “¿Hablamos?” o “Pide por WhatsApp”.
4. 4Elige el color, la esquina, el tamaño y la distancia al borde. Mira la vista previa en computador y en celular.
5. 5Toca Copiar código y pégalo en tu sitio como se explica abajo. Después abre la página desde tu celular y toca el botón para probarlo.

Dónde pegar el código

El código va una sola vez, en una parte que se repita en todas las páginas: antes de la etiqueta </body> o en el pie de página. Los nombres de los menús cambian con las versiones; si no encuentras uno, busca el equivalente.

WordPress

Para que salga en todo el sitio, ponlo en el pie de página con un bloque HTML personalizado: en los temas de bloques, desde Apariencia → Editor, en la parte de plantilla del pie; en los temas clásicos, desde Apariencia → Widgets, si tu tema tiene una zona en el pie. Si al guardar se borra el estilo, tu usuario o tu plan no permite ese código: usa un plugin para insertar código en el pie. Más opciones en WhatsApp para WordPress y WooCommerce.

Wix

En el panel de tu sitio entra a Configuración → Código personalizado (en inglés, Custom Code), agrega el código, elige Todas las páginas y ubícalo al final del Body. Wix pide que el sitio esté publicado y con dominio conectado. No uses el elemento de insertar HTML del editor: pone el código en un recuadro aparte y el botón no flotaría.

Shopify

En el administrador ve a Tienda online → Temas, abre el menú de tu tema (los tres puntos) y elige Editar código. En la carpeta Layout abre theme.liquid, pega el código justo antes de </body> y guarda. Shopify recomienda duplicar el tema antes, como respaldo. Si vendes por Shopify, mira también cómo integrar WhatsApp con Shopify.

Sitio en HTML

Abre cada página, o la plantilla del pie que comparten, y pega el código antes de </body>. Si tu sitio lo hizo un desarrollador, envíale el código: no hace falta cambiar nada más.

Ideas para negocios colombianos

• Tienda en línea. Una marca de ropa de Medellín usa el mensaje “Hola, tengo una pregunta sobre las tallas” y el texto “¿Te ayudamos con la talla?” al lado del botón.
• Consultorio o clínica. Con “Quiero agendar una valoración”, la recepción sabe qué responder desde el primer mensaje. Si prefieres que el paciente reserve solo, mira cómo agendar citas por WhatsApp.
• Restaurante con domicilios. Con “Pide por WhatsApp” junto al botón y el mensaje “Quiero hacer un pedido a domicilio”, el cliente llega directo a pedir.
• Un mensaje por sección. Una inmobiliaria de Barranquilla pega un código distinto en la página de arriendos (“Me interesa un arriendo”) y en la de ventas, y sabe qué busca cada persona.

Errores comunes

• Pegarlo en una sola página. Dentro del texto de la página de inicio, solo aparece ahí.
• Chocar con otro elemento de la esquina. El aviso de cookies, el botón de “volver arriba” o un chat que ya tenías pueden quedar encima. Cambia de esquina o sube el margen.
• Olvidar el indicativo. Sin el 57, o el de tu país, el chat no abre. La herramienta lo agrega y te avisa si el número parece incompleto.
• No ver los cambios. Si tu sitio usa un plugin de caché o una red de distribución (CDN), borra la caché después de pegar el código.
• No probarlo en el celular. Abre tu página desde un celular con WhatsApp y toca el botón: debe abrir el chat con tu número y el mensaje escrito.

Botón de WhatsApp o chat web con bandeja compartida

Este botón solo abre WhatsApp: la conversación sigue en el celular de quien tenga tu número. Alcanza si una persona atiende y los mensajes son pocos.

Un chat web es otra cosa: el visitante escribe sin salir de tu página, aunque no tenga WhatsApp, y el mensaje llega a una bandeja que comparte tu equipo, con el historial de cada cliente. El botón de WhatsApp y chat en vivo de Omniia pone las dos opciones con un solo código, y lo que escriben en el chat se atiende junto a tus conversaciones de WhatsApp multiagente.