Widget de reserva directa
Añada el widget StayParity a la web del hotel con una etiqueta script. Atributos, actualización de fechas, resultados, caché y política CSP.
El widget muestra el precio directo y, si el hotel es el más barato o iguala el mínimo, los precios OTA. Funciona en un iframe aislado: no puede leer la página que lo contiene y la página no puede acceder a su contenido.
La página del widget explica los resultados para el visitante. Aquí encontrará las instrucciones de integración.
Añadir a una página
- En Settings → Website badge, active Badge.
- Copie Snippet, que incluye la clave del hotel. Si no hay una URL configurada,
data-book-urlcontienehttps://your-hotel.example/book. Si la deja así, el botón Book direct envía al visitante a esa dirección de ejemplo. Sustitúyala por su dirección de reservas o elimine el atributo para omitir el botón. - Pegue la etiqueta donde quiera mostrar el widget, por ejemplo junto al selector de fechas.
<!-- StayParity badge. Put it where guests pick dates. -->
<script src="https://badge.stayparity.com/embed.js"
data-hotel="wk_aurora"
data-book-url="https://hotelaurora.gr/book"
async></script>El script añade el iframe después de su etiqueta. Ocupa el ancho del contenedor y ajusta la altura al contenido. Use una etiqueta por cada ubicación del widget.
Atributos
| Atributo | Valor inicial | Función |
|---|---|---|
data-hotel | obligatorio | Clave wk_…. Sin ella no se muestra nada. |
data-book-url | ninguno | URL https:// para Book direct, en la misma pestaña. Una dirección no válida omite el botón. |
data-stay | mañana | Fecha YYYY-MM-DD, en la zona horaria del visitante. Una fecha inexistente vuelve a mañana. |
data-occupancy | 2 | Entero entre 1 y 10. Un valor no válido vuelve a 2. |
Solo se inicia una revisión nueva para las opciones de huéspedes que se monitorizan en el hotel. Para otras, únicamente se muestra un precio si ya hay un resultado.
Actualizar la estancia
Cuando el visitante cambia las fechas, envíe un mensaje al iframe:
// When the guest picks dates
const frame = document.querySelector('iframe[src^="https://badge.stayparity.com/"]');
frame.contentWindow.postMessage(
{ type: "rate-parity:stay", stay: "2026-10-16", occupancy: 2 },
"*"
);stay es una cadena YYYY-MM-DD y occupancy un número. Convierta valores de formulario como "3" a número: una cadena en occupancy se ignora. Puede omitir un campo para conservar su valor. Solo se aceptan mensajes de la página que contiene el iframe; no se puede cambiar el hotel.
Espere a que el iframe termine de cargar. Los mensajes anteriores se pierden y un iframe fuera del área visible puede cargar más tarde. Use los atributos para la selección inicial.
El destino "*" es necesario porque el sandbox no tiene un origen propio. El mensaje solo contiene fecha y número de huéspedes.
Qué ve el visitante
Se comparan los precios más bajos disponibles por proveedor, sin garantizar una misma habitación o condiciones.
| Resultado | Texto del widget | Precios mostrados |
|---|---|---|
| Hotel más barato | Best price, right here | Precio directo, OTA y ahorro |
| Igual al mínimo OTA | Same price here | Precio directo y OTA |
| OTA más barata | Our price today | Solo precio directo |
| Sin precio OTA | Our price today | Solo precio directo |
El widget indica cuánto tiempo ha pasado desde la revisión y añade Book direct si hay URL válida. Mientras se revisa muestra Checking today's prices…. Si no llega un precio en unos 30 segundos, muestra Book direct with us y conserva el botón. Book direct with us aparece inmediatamente cuando:
- el hotel está inactivo.
- no se controla ese número de huéspedes y aún no se ha obtenido un precio para él.
- se rechaza la revisión porque la estancia está en el pasado, fuera del horizonte del plan o se ha agotado la cuota.
- la solicitud falla o se limita por exceso de peticiones.
Los precios usan la moneda del hotel y el formato del navegador. Los textos del widget están en inglés.
Información que no se muestra
- Si hay una OTA más barata, se omiten todas las OTA. La discrepancia sigue disponible en la aplicación y en los avisos según su configuración.
- No aparecen identificadores internos, origen de datos ni nivel de confianza.
- Si una respuesta indica clave desconocida o widget desactivado, el iframe se cierra tras la primera solicitud. Hasta recibir la respuesta, muestra Checking today's prices… en un espacio de unos 96 píxeles de alto. El widget ya cargado puede seguir visible en el navegador hasta cinco minutos. Si la solicitud está limitada, muestra el mensaje genérico de reserva directa.
El iframe no usa cookies ni almacenamiento del navegador.
Content Security Policy
Si su web utiliza CSP, permita el origen en estas directivas:
script-src https://badge.stayparity.com;
frame-src https://badge.stayparity.com;Añada el origen a las fuentes existentes, sin sustituirlas. No hace falta cambiar style-src: el tamaño se establece mediante el DOM. Tampoco connect-src: las solicitudes de precios se hacen dentro del iframe bajo su propia política. Si utiliza nonces o strict-dynamic, añada el nonce de su web a la etiqueta; la lista de hosts por sí sola puede no ser suficiente.
Desactivar o sustituir
- Desactive Badge en Settings → Website badge. Los visitantes nuevos no verán el widget; el widget almacenado en el navegador puede seguir visible hasta cinco minutos. Al reactivarlo funciona la misma etiqueta.
- Replace snippet genera una nueva clave. La anterior se rechaza en la siguiente solicitud sin caché. Actualice todas las páginas que la utilizan. El widget en caché puede seguir visible hasta cinco minutos.
Solo los administradores pueden cambiar estas opciones.
Carga
El script usa async, sin bloquear el análisis del HTML. El iframe carga al acercarse al área visible y solo consulta la estancia mostrada.