Motor de ReservasConfiguración del motor

Cómo añadir un widget de reservas a su página web

Cinco tipos de widgets, siete idiomas y una línea de código. Cómo elegir la forma que mejor se adapte a su sitio web, personalizarla para que encaje con el estilo y colocarla donde genere el mayor número de reservas directas.

Dónde encontrarlo
Booking EngineWebsite Widgets
Se requiere autorización
booking-engine.widget.edit
Última consulta
15 de agosto de 2026

La mayoría de los huéspedes que reservan directamente con usted comienzan en su propia página web, no en su página de reservas. El widget es lo que conecta ambas cosas: un buscador de fechas, o simplemente un botón, que se encuentra en su sitio web y redirige al huésped a su página de reservas de Prostay con las fechas ya introducidas. Esta pantalla lo genera y le proporciona la única línea de código necesaria para instalarlo.

¿Qué es realmente el widget?

Se trata de una única etiqueta de script. La pega en su página web una sola vez y esta genera el widget allí donde lo coloque. Todo lo que seleccione en esta pantalla se incluye en esa única línea, lo que conlleva dos ventajas: su desarrollador web apenas tiene nada que hacer, y modificar el widget más adelante es tan sencillo como copiar una nueva línea, en lugar de tener que volver a crear nada.

El widget no gestiona las reservas por sí mismo. Recopila las fechas y redirige al huésped a su página de reservas, que es lo que usted personaliza al definir el aspecto de su Motor de Reservas . Ambos elementos se configuran por separado y merece la pena que tengan un aspecto similar.

Cómo está organizada la pantalla

La pantalla «Website Widgets». Un selector de idioma (type) configurado en «Horizontal» aparece junto a un selector de idioma (Preferred Widget Language) configurado en «English», con «Customize button text» y «Button Color» debajo de ellos. Un panel «Preview Style» muestra una barra de «check-in» y «check-out» con un botón dorado «Check availability». Debajo de ella, la etiqueta de script generada y la pregunta «Open booking page in a new window?» configurada en «Yes».
Cada control de esta pantalla acaba dentro de la única línea de código que aparece al final.
  1. Tipo de widget. La forma del elemento. Cinco opciones, y la única decisión en esta pantalla que realmente importa.
  2. Idioma preferido del widget. El idioma en el que está escrito el propio widget.
  3. Estilo de vista previa. El widget tal y como aparecerá, redibujado a medida que realice cambios.
  4. El código de incrustación. Haga clic en él para copiarlo. Esto es lo que debe incluir en su sitio web.

Los cinco tipos de widget

Elija en función del espacio al que deba adaptarse, no de cuál se vea mejor en esta pantalla. Un widget que tenga que encajarse a la fuerza en una columna estrecha se verá peor que uno elegido para el espacio del que dispone.

El panel «Preview Style» con el widget «Horizontal»: un campo «Check-in Date» con la fecha 22/08/2026, un campo «Check-<span translate="no">out Date</span>» con la fecha 25/08/2026 y un botón dorado «Check availability», todo ello en una misma fila.
Horizontal. Una sola fila, por lo que encaja en una franja de cabecera y en nada más estrecho.
TipoQué es y dónde va
Horizontal Tanto los campos de fecha como el botón en una sola fila. La opción predeterminada y la más adecuada para un espacio amplio: debajo de una imagen destacada o en la parte superior de una página de inicio.
Stacked Los mismos campos dispuestos verticalmente. Para una barra lateral, una columna estrecha o cualquier lugar en el que la versión horizontal quedaría comprimida.
Floating bar Una franja en el color de su marca que incluye un breve mensaje junto a las fechas. Es el único tipo con su propio mensaje y su propio fondo, lo que lo convierte en la opción ideal para una campaña: aparcamiento gratuito, reserva directa, tercera noche a mitad de precio.
Large Button Un botón y nada más. Sin fechas: el huésped las selecciona en la página de reservas. Utilícelo cuando un selector de fechas resulte una molestia, como en la página de descripción de una habitación.
Small Button Lo mismo, pero más pequeño. Diseñado para una barra de navegación, junto a su número de teléfono.
El panel «Preview Style» con el widget «Floating bar»: una banda azul con el mensaje «Reserve directamente y aparque gratis», un campo «Check-in Date», un campo «Check-<span translate="no">out Date</span>» y un botón dorado «Check availability».
La barra flotante es el único tipo con su propio mensaje y su propio color de fondo.
El panel «Preview Style» con el widget «Large Button»: un único botón dorado con el texto «Check availability», sin campos de fecha.
Los dos tipos de botones omiten las fechas y dirigen al huésped directamente a la página de reserva.

La selección del idioma

Preferred Widget Language establece el idioma de los propios textos del widget: las etiquetas de los campos y el botón. Hay siete opciones: inglés, alemán, español, francés, italiano, portugués y tailandés, y la elección se incluye en el código de inserción como un código de dos letras.

Se permite un solo idioma por widget, por lo que debe adaptarse a la página en la que se encuentra, en lugar de a sus visitantes. Si su sitio web tiene una página en inglés y otra en alemán, utilice el código dos veces, una para cada idioma seleccionado, y coloque el correspondiente en cada página.

Personalizar el estilo para que se adapte a su sitio web

La fila de campos con el widget «Floating bar» seleccionado: Customize text con el texto «Reserve directamente y aparque gratis», Customize button text con el texto «Check availability», un campo Brand Color configurado en #1643E0 y un campo Button Color configurado en #CD9744, cada color con una muestra y un botón de restablecimiento.
Aparecen dos campos adicionales para la barra flotante, que vuelven a desaparecer si cambia el tipo.
CampoQué modifica
Customize button text El texto del botón. Disponible para todos los tipos. «Check availability» es una opción predeterminada más segura que «Book now», ya que promete menos y resulta cierto en una fase más temprana del proceso de decisión.
Customize text Solo en la barra flotante. El mensaje junto a las fechas. Limítese a unas pocas palabras: comparte una única franja con dos campos de fecha y un botón.
Brand Color Solo en la barra flotante. El fondo de la banda. Se restablece a «#1643E0». Las etiquetas de la barra son blancas, por lo que un color pálido en este caso las haría ilegibles.
Button Color El botón, en todos los tipos. Se restablece a #CD9744. Este es el único color de su sitio web que no debe pasar desapercibido.

Haga clic en un campo de color para abrir un selector o introduzca un valor hexadecimal. El cuadrado situado junto a él muestra el color y el botón azul lo restablece al valor predeterminado.

Nueva ventana o la misma

Open booking page in a new window? determina si la página de reserva sustituye a su sitio web en la pestaña del huésped o se abre junto a ella.

Yes mantiene su sitio web abierto detrás de la reserva, lo que se percibe como un compromiso menor y hace que un huésped que abandone la reserva permanezca en su sitio web en lugar de desaparecer. «No » mantiene todo en una sola pestaña, lo que resulta más ordenado en un teléfono, donde es fácil perder de vista una segunda pestaña. «Sí» es la opción más habitual para un público que utiliza principalmente ordenadores de sobremesa, y la diferencia es mínima en cualquier caso.

El código de incrustación

El código de inserción generado bajo el encabezado «Copie el código siguiente y péguelo en su sitio web»: una única etiqueta script con src https://app.prostay.com/widget/load/demo-hotel/ horizontal?lang=en&newWindow=1, con un icono de copiar al final de la línea.
Una etiqueta de script. La clave de la Propiedad, el tipo de widget, el idioma y la opción de abrir una nueva ventana se incluyen en la URL.

Al hacer clic en la línea, esta se copia. Merece la pena dedicarle treinta segundos a leerla, ya que todo lo que contiene es algo que usted ha elegido:

  • demo-hotel es su clave de propiedad, que es lo que permite al widget saber qué habitaciones mostrar.
  • horizontal es el tipo de widget.
  • lang=en es el idioma.
  • newWindow=1 es la respuesta sobre la nueva ventana, donde 1 significa «Sí» y 0 significa «No».

Dónde colocarlo en su sitio web

Pegue la línea en el código HTML de su página, exactamente en el lugar donde desee que aparezca el widget. En la mayoría de los creadores de páginas web, esto implica añadir un bloque de HTML o de incrustación. El widget se muestra donde se encuentre la etiqueta, por lo que una etiqueta en el pie de página mostrará un widget en el pie de página.

  1. Elija aquí el tipo, el idioma y los colores, y, a continuación, pulse «Save».
  2. Haga clic en el código para copiarlo.
  3. En el editor de su sitio web, añada un bloque de código HTML o personalizado en el lugar donde desee que aparezca el widget.
  4. Pegue la línea y publique la página.
  5. Abra la página tal y como lo haría un visitante, tanto en un teléfono como en un ordenador de sobremesa, y realice una búsqueda real.

Lo único que merece la pena probar a fondo es el proceso de traspaso. Seleccione fechas en el widget, siga el proceso hasta la página de reserva y compruebe que las fechas se han aplicado correctamente y que las habitaciones que se muestran son las que espera. Esa es la función principal del widget, y es la única parte en la que un huésped notará si algo falla.

Preguntas frecuentes

  • ¿Necesito un desarrollador para instalar esto?

    Normalmente no. Cualquier creador de sitios web que cuente con un bloque de HTML o de incrustación lo admitirá, lo que incluye WordPress, Squarespace, Wix y la mayoría de los proveedores de sitios web para hoteles. Si su sitio web está creado a medida, su desarrollador solo necesitará una línea de código HTML y aproximadamente un minuto.

  • He cambiado los colores aquí. ¿Por qué no ha cambiado mi página web?

    Dado que la configuración se transfiere en el código que ha pegado, copie la nueva línea de esta pantalla y sustituya la anterior en su página web. Todo lo que aparezca en el código de inserción —el tipo, el idioma y la opción de abrir en una nueva ventana— funciona de la misma manera.

  • ¿Puedo colocar diferentes widgets en distintas páginas?

    Sí. Configure uno, copie el código, luego modifique la configuración y vuelva a copiarlo. Cada línea pegada es independiente, por lo que un widget apilado en una barra lateral y un pequeño botón en la navegación pueden coexistir en el mismo sitio web. En esta pantalla solo se mostrará la última configuración que haya guardado.

  • ¿Este widget ralentiza mi página web?

    Se trata de un pequeño script que se carga después de su página. Lo que debe comprobar no es la velocidad, sino el diseño: en una pantalla estrecha, un widget horizontal se ajustará a la anchura de la pantalla, por lo que le recomendamos que compruebe cómo se ve en un teléfono cualquier página que lo incluya antes de darla por terminada.

  • Las fechas que aparecen en la vista previa corresponden a la próxima semana. ¿De dónde proceden?

    Son meramente ilustrativos, por lo que la vista previa no muestra un recuadro vacío. No se realiza ninguna búsqueda con ellos, y el widget de su página web se abre sin que se hayan seleccionado fechas.

¿Le ha resultado útil este artículo?

Artículos relacionados

¿Sigue sin saber cómo hacerlo?

El servicio de asistencia también responde desde la propia aplicación, por lo que, si ya ha iniciado sesión, recibirá una respuesta más rápida allí. De lo contrario, envíenos el nombre de la propiedad y explique qué intentaba hacer.