Widget de reservas para tu web

Si tu hotel ya tiene una página web y no quieres cambiarla, no hace falta. Con el widget añades un botón de reservas a la web que ya tienes: al pulsarlo se abre tu motor de reservas real —tus habitaciones con foto, filtros de camas, baño, huéspedes y precio— dentro de una ventana sobre tu página. Las reservas entran directo a tu Recepción.

Paso 1: copia tu línea

Entra a Back Office → Sitio web → “Widget y API (web propia)”. Arriba verás tu código con tu clave ya puesta. Pulsa “Copiar”.

<script src="https://cloud.hotelblinx.com/widget.js"
        data-hotel="hbw_TU_CLAVE"
        data-label="Reservar ahora"
        data-color="#e8722d"></script>

Paso 2: pégala en tu web

Va justo antes de la etiqueta </body>, al final de la página. Abajo tienes el camino exacto según con qué esté hecha tu web. Si no sabes cuál es, pregúntale a quien te la hizo o mira el pie de la página.

WordPress

La forma más segura es con un plugin, porque así el código sobrevive a las actualizaciones del tema.

1. 1En el panel de WordPress entra a Plugins → Añadir nuevo.
2. 2Busca “WPCode” (antes “Insert Headers and Footers”) e instálalo y actívalo.
3. 3Ve a Ajustes del código → Encabezado y pie de página.
4. 4Pega tu línea en la caja “Pie de página” (Footer).
5. 5Guarda y abre tu web: el botón aparece abajo a la derecha.

Wix

1. 1En el editor de Wix abre Configuración → Herramientas personalizadas (Custom Code).
2. 2Pulsa “+ Añadir código personalizado”.
3. 3Pega tu línea en la caja.
4. 4En “Añadir código a las páginas” elige “Todas las páginas”.
5. 5En “Ubicación” elige “Cuerpo - final” (Body - end).
6. 6Guarda y publica el sitio.

Squarespace

1. 1Entra a Configuración → Avanzado → Inyección de código (Code Injection).
2. 2Pega tu línea en la caja “Pie de página” (Footer).
3. 3Guarda.

Shopify

1. 1Ve a Tienda online → Temas → Acciones → Editar código.
2. 2Abre el archivo theme.liquid.
3. 3Busca la etiqueta </body> (casi al final del archivo).
4. 4Pega tu línea justo ANTES de esa etiqueta.
5. 5Guarda.

Webflow

1. 1Abre Configuración del proyecto (Project settings) → Custom code.
2. 2Pega tu línea en “Footer code”.
3. 3Guarda y pulsa “Publish”.

Joomla, Drupal, PrestaShop y otros gestores

Todos tienen un sitio donde poner código de pie de página. Busca en su configuración una opción llamada “Código personalizado”, “Custom code”, “Footer scripts” o “Inyección de código” y pega ahí tu línea. Si no la encuentras, edita la plantilla del tema y pon la línea antes de </body>.

Web hecha a mano (HTML)

Abre el archivo de cada página (index.html y las demás) y pega la línea antes de </body>. Así queda:

  <footer>© Mi Hotel</footer>

  <script src="https://cloud.hotelblinx.com/widget.js"
          data-hotel="hbw_TU_CLAVE"></script>
</body>
</html>

Si tu web no permite pegar código

Algunos creadores gratuitos (Google Sites, planes básicos de Squarespace, ciertos constructores de hosting) no dejan añadir scripts. En ese caso pon un botón o enlace normal que apunte a tu motor de reservas — se abre como una página aparte y funciona igual de bien:

https://tuhotel.hotelblinx.com/book/tuhotel/rooms

Cómo cambiar el aspecto del botón

Los tres valores de la línea se pueden cambiar libremente:

• data-label — el texto del botón. Por ejemplo “Reservar ahora”, “Ver disponibilidad” o “Reserva directa”.
• data-color — el color de fondo, en hexadecimal (ej. #e8722d). Pon el color de tu marca.
• data-hotel — tu clave. Esta no se toca.

Ponerlo en tu menú en vez de flotando

Por defecto el botón flota abajo a la derecha. Si prefieres colocarlo tú (en el menú, en la portada, donde quieras), añade data-mode="inline" y pon un div vacío con el id hotelblinx-book en el sitio exacto donde debe salir:

<!-- Donde quieres que salga el botón -->
<div id="hotelblinx-book"></div>

<!-- Antes de </body> -->
<script src="https://cloud.hotelblinx.com/widget.js"
        data-hotel="hbw_TU_CLAVE"
        data-mode="inline"></script>

Y si ya tienes tu propio botón o enlace de “Reservar” y solo quieres que abra el buscador, llama a la función desde él:

<a href="#" onclick="HotelBlinx.abrir(); return false;">Reservar</a>

Preguntas frecuentes

• ¿Puede romper mi web? No. Todo se abre dentro de un marco aislado (iframe): tus estilos no entran y los nuestros no salen. Si nuestro servidor fallara, tu página seguiría funcionando igual.
• ¿Se ve bien en el móvil? Sí, la ventana se adapta al tamaño de la pantalla.
• ¿Es segura la clave? Sí. La clave del widget es pública a propósito: se ve en el código de tu web y solo sirve para mostrar disponibilidad y crear reservas pendientes. No da acceso a los datos de tu hotel.
• ¿Y las reservas? Entran a tu Recepción como pendientes, exactamente igual que las de tu sitio de HotelBlinx, y no pagas comisión por ellas.
• ¿Puedo ponerlo en varias webs? Sí, la misma línea sirve para todas.
• ¿Cobra al huésped en el momento? No. El huésped deja sus datos y el hotel confirma; el cobro lo gestionas tú desde el PMS.

Si el botón no aparece

• ¿Publicaste los cambios? En Wix, Webflow y Squarespace hay que pulsar “Publicar” — en la vista previa no sale.
• ¿Pegaste la línea completa? Debe empezar por <script y terminar en </script>.
• ¿Está en el pie y no en el encabezado? Debe ir antes de </body>.
• ¿Te lo borró el editor? Algunos editores visuales eliminan scripts al guardar: usa el bloque de “HTML personalizado” o el plugin de encabezado/pie.
• Prueba en una ventana de incógnito: a veces es la caché de tu navegador o de tu web (limpia la caché del sitio si usas un plugin de caché).