¿Cómo incrusto el botón de WhatsApp en mi web?

Q: ¿Cómo incrusto el botón de WhatsApp en mi web?

Pega un fragmento de código en tu web y aparecerá un botón verde de WhatsApp que abre el canal oficial de tu negocio en Waicita con un mensaje preescrito. Funciona en HTML, Wix, Squarespace, Webflow y WordPress.

En una frase

Copia un fragmento de código en tu web y tus clientas tendrán un botón de WhatsApp a un toque, conectado al canal oficial de tu negocio en Waicita.

Antes de empezar

Comprueba estas dos cosas:

Tienes WhatsApp activo en Waicita. El botón usa el canal oficial configurado para tu negocio: Xintia/número compartido de Waicita o tu WABA propia si ya la tienes conectada.
Tu slug a mano. Lo encuentras en Panel → Kit de Reservas → Integraciones. El código que pegas en tu web ya lo lleva relleno; sólo asegúrate de copiar el bloque correcto.

Opción 1 — HTML puro (Wix, Squarespace, Webflow, web propia)

Pega esto donde quieras que aparezca el botón. Sustituye tu-negocio por tu slug:

<div id="waicita-whatsapp"></div>
<script
  src="https://waicita.com/whatsapp-widget.js"
  data-business="tu-negocio"
  data-target="#waicita-whatsapp"
  data-label="Escríbenos por WhatsApp"
></script>

En Wix: Añadir → Más → HTML personalizado. Pega y publica.
En Squarespace: bloque Code. Pega y guarda.
En Webflow: añade un elemento Embed. Pega y publica.
En tu HTML propio (FTP, Netlify, GitHub Pages…): pega el bloque en la plantilla y vuelve a subir el archivo.

No necesitas claves ni cuentas de desarrollador. Waicita resuelve automáticamente el canal correcto cuando carga el botón.

Opción 2 — WordPress

Descarga el plugin desde tu panel: Kit de Reservas → Integraciones → Descargar plugin (.zip).
En tu WordPress: Plugins → Añadir nuevo → Subir plugin → selecciona el .zip → Instalar ahora → Activar.
Pega el shortcode en cualquier página o entrada:

[waicita_whatsapp business="tu-negocio"]

Con un mensaje preescrito y otro color:

[waicita_whatsapp business="tu-negocio" label="Pide cita por WhatsApp" message="Hola, querría reservar"]

Puedes usar el shortcode varias veces en la misma página sin problema.

Modo flotante (botón fijo en la esquina)

Si prefieres un botón fijo que acompañe al usuario en todo el scroll, añade data-mode="floating" y omite el <div> contenedor:

<script
  src="https://waicita.com/whatsapp-widget.js"
  data-business="tu-negocio"
  data-mode="floating"
  data-position="bottom-right"
></script>

En WordPress, el shortcode equivalente es:

[waicita_whatsapp business="tu-negocio" mode="floating" position="bottom-right"]

Cambia bottom-right por bottom-left si lo quieres en la esquina opuesta.

Personalizar el botón

Lo que cambia	Atributo HTML	Atributo shortcode	Ejemplo
Color de fondo	`data-color`	`color`	`#1a9b6c`
Texto visible	`data-label`	`label`	`Pide cita por WhatsApp`
Mensaje preescrito	`data-message`	`message`	`Hola, querría reservar`

El mensaje preescrito aparece en el cuadro de texto del chat al abrir WhatsApp. Tu clienta lo puede borrar o editar antes de enviar.

Mantén el mensaje corto y claro. WhatsApp lo trata como texto plano, sin emojis especiales ni saltos de línea.

Solución de problemas

El botón no aparece

Slug incorrecto. Cópialo desde el panel, no de la URL de tu web.
WhatsApp no está activo en Waicita. Revisa tu configuración de WhatsApp/Xintia en el panel o escribe a soporte.
El <div> no está antes del <script> (en modo inline). Pega el bloque entero, en orden.
Bloqueador de anuncios. Prueba en una pestaña en incógnito.

Abre WhatsApp con un número que no reconozco

El botón no usa necesariamente el teléfono personal del dueño. Usa el canal oficial de Waicita para tu negocio. En muchos casos será el número compartido de Xintia; si tienes una WABA propia conectada, usará esa. Esto permite que las conversaciones entren por el canal correcto y puedan enrutar la reserva.

El mensaje no llega preescrito

Comprueba que tienes data-message="..." (HTML) o message="..." (shortcode WordPress) con un texto.
Los caracteres especiales se codifican automáticamente: no necesitas escapar acentos ni signos.

En WordPress no carga

Confirma que el plugin está activado (no sólo instalado).
Si tienes un plugin de caché, límpiala después de activar.
Algunos themes muy restrictivos bloquean scripts externos. Prueba desactivando el theme temporalmente.

¿Necesitas ayuda?

Escríbenos por WhatsApp o desde el panel → Soporte. Dinos qué plataforma usas (Wix, WordPress, etc.) y te ayudamos a colocarlo.