En una frase
Copia dos líneas de código en tu web y el módulo de reservas de Waicita aparece ahí, con tus servicios y tus colores, sin que tus clientas salgan de tu página.
Antes de empezar — checklist
Antes de pegar ningún código, comprueba que tienes esto listo:
- Plan activo — Básico, Pro o trial vigente. Si el trial expiró, el módulo no carga.
- Módulo de reservas activado — Panel → Ajustes → Reservas → toggle "Reservas online" activo.
- Al menos un servicio publicado — si todos están en pausa, el módulo no tiene nada que mostrar.
- Al menos un profesional con horario configurado — sin horario no hay huecos disponibles.
- Tu slug copiado desde el panel — Panel → Kit de Reservas → Integraciones. El código ya aparece relleno con tu slug correcto. No lo saques de la URL de tu web — algunos negocios tienen URLs largas tipo
waicita.com/w/madrid/alcobendas/peluqueria/nombrey el slug limpio es diferente.
¿No sabes si tienes todo esto? Abre tu web de Waicita en otra pestaña y prueba a hacer una reserva tú misma. Si funciona, el módulo también funcionará en tu web.
¿Necesito una API key o cuenta de desarrollador?
No. El módulo solo necesita tu slug — que es público. No hay claves que configurar, no hay nada que pueda filtrarse. El servidor de Waicita comprueba internamente si tu plan está activo cuando alguien intenta reservar.
Opción 1 — HTML puro
Para webs estáticas, hosting propio, GitHub Pages, Netlify o cualquier editor de HTML.
Pega esto donde quieras que aparezca el módulo (sustituye tu-negocio por tu slug):
<!-- Contenedor — ponlo donde quieras en tu página -->
<div id="waicita-widget"></div>
<!-- Carga el módulo — justo después del div -->
<script
src="https://waicita.com/widget.js"
data-business="tu-negocio"
data-target="#waicita-widget"
data-color="#1a9b6c"
></script>
Guarda el archivo y súbelo a tu hosting como siempre (FTP, cPanel, arrastrar al panel de Netlify…). No necesitas instalar nada más.
Atributos disponibles:
| Atributo | Requerido | Descripción |
|---|---|---|
data-business |
Sí | Tu slug (cópialo desde el panel) |
data-target |
Sí | Selector CSS del <div> contenedor |
data-color |
No | Color principal en hex. Por defecto #1a9b6c |
Opción 2 — WordPress
Descarga el plugin oficial desde tu panel (Kit de Reservas → Integraciones → botón waicita-booking.zip).
Instalar
- En WordPress: Plugins → Añadir nuevo → Subir plugin.
- Selecciona el
.zipdescargado → Instalar ahora → Activar.
Usar
En cualquier página o entrada, añade el shortcode:
[waicita_booking business="tu-negocio"]
Con color personalizado:
[waicita_booking business="tu-negocio" color="#e63946"]
El shortcode puede aparecer varias veces en la misma página sin problema. Funciona con Elementor, Divi, Gutenberg y cualquier builder que soporte shortcodes.
Opción 3 — Wix
- En el editor de Wix: Añadir (+) → Más → HTML personalizado (o busca "embed" en el buscador de elementos).
- Haz clic en el bloque y luego en Editar código.
- Pega el snippet completo (el
<div>y el<script>). - Ajusta el tamaño del bloque arrastrando sus bordes — el módulo se adapta al ancho disponible.
- Publica tu sitio para que el cambio sea visible.
Nota Wix: el bloque HTML de Wix funciona dentro de un sandbox propio. El módulo carga y funciona correctamente, pero Wix lo aísla del resto de la página. Si ves que aparece con scroll interno, amplía la altura del bloque desde el editor.
Opción 4 — Squarespace
- Abre la página donde quieres el módulo → Editar → Añadir bloque → Code.
- Pega el snippet completo (el
<div>y el<script>). - Guarda y publica.
Nota Squarespace: igual que Wix, el bloque Code ejecuta en un entorno sandbox. Funciona, pero puede aparecer con altura fija. Ajusta la altura del bloque si hace falta.
Opción 5 — Webflow
- En el Designer: añade un elemento Embed donde quieras el módulo.
- Pega el snippet completo.
- Guarda y publica el sitio.
Webflow no usa sandbox, así que la integración queda más limpia que en Wix o Squarespace.
Opción 6 — Ficha del Directorio de Waicita
Si tu negocio está en el directorio y has reclamado la ficha, puedes activar el módulo directamente ahí — sin necesidad de tener web propia.
- Panel → Privacidad y datos.
- Activa "Mostrar módulo de reservas en el directorio".
Requiere plan activo y módulo de reservas activado.
Problemas comunes
Pegué el código pero no aparece nada
Comprueba el checklist del principio. Los motivos más frecuentes:
- Slug incorrecto — cópialo desde el panel, no de la URL.
- Módulo de reservas desactivado — Panel → Ajustes → Reservas.
- Plan expirado — si el trial acabó o el plan está pausado, el módulo no carga.
- El
<div>no está en la página — el<div id="waicita-widget">debe estar justo antes del<script>. - Bloqueador de anuncios — prueba en incógnito. Algunos bloqueadores interceptan
widget.js.
El módulo aparece pero no hay huecos disponibles
- Comprueba que tienes horario configurado para el día que estás mirando.
- Comprueba que los servicios tienen duración y precio rellenados.
- Comprueba que el profesional tiene ese día disponible (no bloqueado ni de vacaciones).
En Wix o Squarespace se ve con scroll interno
El bloque HTML de estas plataformas tiene altura fija por defecto. Amplíala arrastrando el borde inferior del bloque en el editor hasta que el módulo quede entero sin scroll.
En WordPress no carga nada
- Confirma que el plugin está activado (no solo instalado).
- Confirma que el slug en el shortcode es correcto:
business="tu-negocio"sin espacios ni mayúsculas. - Si tienes un plugin de caché (WP Rocket, W3 Total Cache…), limpia la caché después de activar el plugin.
- Algunos themes muy restrictivos bloquean scripts externos. Prueba desactivando el theme temporalmente.
El color no cambia
- El atributo
data-coloracepta solo hex de 6 dígitos (ej:#e63946). No acepta nombres de color ni rgb. - En WordPress el parámetro es
color="#e63946"dentro del shortcode.
¿Necesitas ayuda?
Escríbenos por WhatsApp o desde el panel → Soporte. Dinos en qué plataforma tienes la web y te ayudamos a colocarlo.