Botón de WhatsApp para sitio web
Botón de WhatsApp para sitio web
Ponga en la esquina de su sitio un botón que abre la conversación con su empresa, con un mensaje listo. Vea la vista previa, elija el lado de la pantalla y copie el código para pegarlo en el sitio.
- Sin registro
- Funciona en su navegador
- El código no carga nada de XBASE
Arme su botón
Solo el código de área y el número, sin el código del país y sin el 0 inicial.
Escríbalo como lo escribiría su cliente.
Vista previa
HTML simple, sin script y sin rastreo.
Todo ocurre en su navegador. Nada de lo que escribe se envía a XBASE.
Por dentro del botón
Cómo funciona el botón de WhatsApp
Es un enlace de WhatsApp en forma de botón, fijo en una esquina de la página. Quien hace clic sale del sitio y cae en la conversación con su empresa, en la aplicación del celular o en WhatsApp Web, con el mensaje listo en el campo de escritura.
<a href="https://wa.me/55119XXXXXXXX?text=Hola%2C%20vengo%20del%20sitio" aria-label="Conversar por WhatsApp">…</a>El botón lleva la conversación a WhatsApp; no ocurre dentro de la página. Para atender dentro del sitio, existe el chat en el sitio de XBASE.
Menos fricción
Por qué poner el botón en el sitio
Contacto siempre a la vista
Quien quiere hablar con usted encuentra el camino en cualquier página, sin copiar un número.
La duda en el momento en que aparece
Quien está viendo un producto pregunta ahí mismo, sobre precio, plazo o talle.
En la aplicación que ya usa
En el celular, la conversación se abre directo en WhatsApp.
La conversación llega con contexto
El mensaje listo puede decir de qué página vino la persona.
El botón facilita el primer contacto. No responde, no asegura la venta y no reemplaza a quien atiende.
Paso a paso
Cómo poner el botón en el sitio
- 01
Escriba el número
Con el código de área, como está en WhatsApp.
- 02
Escriba el mensaje listo
Por ejemplo: "Hola, vengo del sitio y quería entender cómo funciona su servicio."
- 03
Vea la vista previa
Revísela en el celular y en la computadora.
- 04
Copie el código
El generador escribe el HTML por usted.
- 05
Péguelo en el sitio y pruebe
En una parte del sitio que ejecute HTML. Publique y abra la página en el celular y en la computadora.
Si otra persona se ocupa de su sitio, envíele el código.
Modelos
Mensajes listos para quien viene del sitio
Página de producto
Hola, tengo una duda sobre el [producto] de esta página.
Página de servicio
Hola, quiero entender cómo funciona el [servicio].
Página de precios
Hola, estoy comparando las opciones y quiero ayuda para elegir.
Turnos
Hola, quiero reservar un horario. ¿Qué opciones tienen?
Posventa
Hola, compré por el sitio y quiero saber del pedido [número].
El mensaje queda dentro del código de la página, y cualquier visitante puede verlo. Nada de contraseñas, tarjetas ni datos de salud.
Instalación
Dónde pegar el código
- 01
Sitio en HTML
El código va en el archivo que usan todas las páginas, antes de cerrar el <body>. Publíquelo primero en una sola página.
- 02
WordPress
Use un bloque de HTML personalizado o el área de código del tema. Algunos planes y hostings limitan dónde puede ir el código.
- 03
Tienda en línea
Haga una copia del tema antes. Pegue el código en el diseño del tema y verifique que el botón no tape el carrito ni el pago.
- 04
Creadores de sitios
Use la función de código personalizado o de HTML de su plataforma. Algunos planes no permiten código.
Posición
Dónde poner el botón
Es común que el botón quede abajo a la derecha. Use el lado izquierdo si el derecho ya tiene carrito, aviso de cookies u otro botón. Mantenga el mismo lugar en todas las páginas y revise estas:
| Página | Para qué |
|---|---|
| Producto | Dudas de precio, stock, plazo y talle |
| Servicio | Quien necesita explicar su caso antes de pedir presupuesto |
| Precios | La última duda antes de elegir |
| Turnos | Horario, lugar y qué llevar |
| Ayuda | Junto al correo y al teléfono, si los hay |
Producto
- Para qué
- Dudas de precio, stock, plazo y talle
Servicio
- Para qué
- Quien necesita explicar su caso antes de pedir presupuesto
Precios
- Para qué
- La última duda antes de elegir
Turnos
- Para qué
- Horario, lugar y qué llevar
Ayuda
- Para qué
- Junto al correo y al teléfono, si los hay
El botón no puede tapar un formulario, un botón de compra, el menú del celular ni un aviso de privacidad.
Problemas comunes
¿El botón no aparece o no abre?
| Qué pasa | Causa probable | Qué revisar |
|---|---|---|
| El código aparece como texto | Se pegó en un bloque de texto | Use un área que ejecute HTML |
| El botón no aparece | La plataforma quitó el código o está en la plantilla equivocada | Vea las reglas de código de la plataforma y dónde lo pegó |
| Abre el número equivocado | Número o país mal escrito | Corríjalo y genere el código de nuevo |
| El mensaje llega cortado | El enlace se editó a mano | Genere el código de nuevo |
| El botón tapa otro elemento | Dos elementos en la misma esquina | Cambie de lado o ajuste el diseño |
| Aparece en la computadora, no en el celular | Un estilo del sitio oculta o tapa el botón | Pruebe la página en el celular |
| Abre, pero no se envía nada | El mensaje listo espera que el cliente toque enviar | Así funciona WhatsApp |
El código aparece como texto
- Causa probable
- Se pegó en un bloque de texto
- Qué revisar
- Use un área que ejecute HTML
El botón no aparece
- Causa probable
- La plataforma quitó el código o está en la plantilla equivocada
- Qué revisar
- Vea las reglas de código de la plataforma y dónde lo pegó
Abre el número equivocado
- Causa probable
- Número o país mal escrito
- Qué revisar
- Corríjalo y genere el código de nuevo
El mensaje llega cortado
- Causa probable
- El enlace se editó a mano
- Qué revisar
- Genere el código de nuevo
El botón tapa otro elemento
- Causa probable
- Dos elementos en la misma esquina
- Qué revisar
- Cambie de lado o ajuste el diseño
Aparece en la computadora, no en el celular
- Causa probable
- Un estilo del sitio oculta o tapa el botón
- Qué revisar
- Pruebe la página en el celular
Abre, pero no se envía nada
- Causa probable
- El mensaje listo espera que el cliente toque enviar
- Qué revisar
- Así funciona WhatsApp
¿Cambió el código y sigue el botón viejo? Limpie la caché del sitio antes de probar de nuevo.
Lista de control
Revise antes de publicar
- Abre la conversación con el número correcto.
- El mensaje listo aparece completo.
- Quien decide enviar es el visitante.
- No tapa formularios, botones de compra ni avisos de privacidad.
- Tiene contraste con el fondo de la página y margen hasta el borde de la pantalla.
- Es fácil de tocar en el celular.
- No tiene animaciones que distraigan.
Formatos
Botón, enlace o código QR
| Formato | Dónde ponerlo | Cómo llega el cliente a la conversación |
|---|---|---|
| Enlace | Bio y Stories de Instagram, presupuesto enviado por correo, firma de quien vende, anuncio | Se abre directo, en el celular o en la computadora |
| Código QR | Etiqueta de precio, caja del pedido, recepción, mural de la escuela, stand de feria | Lo lee con la cámara, sin escribir nada |
| Botón en el sitio | Páginas de producto, servicio, precios y contacto | Hace clic en la esquina de la página que está leyendo |
Enlace
- Dónde ponerlo
- Bio y Stories de Instagram, presupuesto enviado por correo, firma de quien vende, anuncio
- Cómo llega el cliente a la conversación
- Se abre directo, en el celular o en la computadora
Código QR
- Dónde ponerlo
- Etiqueta de precio, caja del pedido, recepción, mural de la escuela, stand de feria
- Cómo llega el cliente a la conversación
- Lo lee con la cámara, sin escribir nada
Botón en el sitio
- Dónde ponerlo
- Páginas de producto, servicio, precios y contacto
- Cómo llega el cliente a la conversación
- Hace clic en la esquina de la página que está leyendo
En el sitio, el botón queda siempre a la vista. Para compartir en otros lugares, use el enlace; en papel, el código QR.
Botón o chat en el sitio
El botón lleva a WhatsApp. El chat en el sitio atiende en la propia página.
Son dos cosas distintas. El botón manda al visitante al WhatsApp de la empresa: si el número está conectado a XBASE, la conversación llega a la bandeja de entrada, con un responsable y una tarjeta en el embudo. El chat en el sitio de XBASE queda dentro de la página: el agente de IA atiende a quien está visitando, con lo que usted le enseñó. Para instalarlo, copia el código y lo pega en el sitio.
En el chat en el sitio, quien atiende es el agente de IA; el equipo no responde por ahí.
Preguntas frecuentes
Dudas sobre el botón de WhatsApp
No. Sirve para cualquier número activo en WhatsApp: es solo un enlace con forma de botón.
Del primer mensaje a la venta
Cada conversación con un responsable y una etapa en el embudo, hasta la propuesta.
XBASE es un CRM conversacional con IA. El WhatsApp oficial, el Direct de Instagram y el correo llegan a la misma bandeja de entrada, cada conversación se vuelve una tarjeta en el embudo, y nuestro equipo especialista monta con usted las automatizaciones y los agentes de IA.
Crear cuenta- Sin instalar nada
- WhatsApp por la API oficial de Meta
- Implementación con especialista