Estimado hotelero: ThinkReservations ofrece un marco para un "widget" que permite a los huéspedes ingresar sus fechas de búsqueda en cualquier página de tu sitio web. Se pueden personalizar ampliamente y adaptar a tu marca. Aunque proporcionamos el marco, ThinkReservations no los construye, no les da estilo ni los implementa. Nuestro equipo de soporte no puede ayudar con los widgets; dirige tus preguntas técnicas a tu webmaster o desarrollador web. Este documento técnico incluye todo lo que un desarrollador web con experiencia necesita para comenzar con un widget.
Si eres cliente de ThinkWeb, los widgets de Check Availability se agregan por ti.
Si buscas enlaces de reserva específicos para una unidad, consulta Special Booking Engine Links
Estimado webmaster: Este documento técnico contiene un enlace a un archivo JavaScript de ejemplo y notas sobre cómo implementar el widget en el sitio de tu cliente. Para aprovechar el widget, debes tener experiencia en JavaScript, CSS y HTML, o contar con profesionales que la tengan, para personalizar, dar estilo e implementar el widget correctamente. Si no puedes completar esta tarea por tu cuenta, te corresponderá encontrar a un profesional con experiencia que te ayude. ThinkReservations no proporcionará este recurso ni responderá preguntas técnicas.
ThinkReservations ofrece varias formas de incluir un widget en tu sitio web. El hotel debe encargar a su desarrollador web que personalice la apariencia del widget para que coincida con tu sitio. Para hacer estas personalizaciones, necesitas tener experiencia en CSS y JavaScript. Recomendamos que, si usas un widget, siempre mantengas el enlace de botón sencillo en la parte superior derecha y en el pie de página del sitio.
Avísanos si finalmente usas el widget, ya que necesitamos llevar el registro de todos los clientes que lo utilizan, pues las actualizaciones del código se hacen de forma manual.
Soporte para el widget de Check Availability
Ten en cuenta: ThinkReservations no ofrece soporte para dar estilo ni personalizar el widget de verificación de disponibilidad más allá de la información que se incluye en este artículo. El widget está pensado para webmasters y desarrolladores web con experiencia en CSS y JavaScript. Si necesitas ayuda para implementar, personalizar o dar estilo al widget, te recomendamos consultar a un profesional con experiencia en estas tecnologías. El equipo de soporte de ThinkReservations no podrá ayudarte con el uso de JavaScript o CSS, ni con su implementación en tu sitio web. Gracias por tu comprensión.
Tabla de contenido:
> Código requerido
> Opción 1: Bloque de Check Availability
> Opción 2: Bloque de Check Availability específico para una habitación/unidad
> Opción 3: Bloque específico para una habitación/unidad con calendario
> Opción 4: Calendario específico para una habitación/unidad
> Estilos con CSS
> Ejemplos
> Archivo de ejemplo funcional (sin estilo)
Código requerido:
Consejo: Haz clic derecho en el enlace y selecciona "Save Link As..." para descargar el archivo
Edita el archivo según sea necesario para personalizar el widget.
Sube el script editado a tu dominio.
Agrega el JavaScript en la parte inferior de cada página donde se usará el widget.
¡Debes editar este script y alojarlo en tu propio servidor para configurarlo, controlarlo y personalizarlo! Esto requiere conocimientos previos de JavaScript.
Notas importantes:
El número de adultos y niños debe configurarse con el máximo permitido en ThinkReservations.
Reemplaza
SHORT_NAME_GOES_HEREcon el nombre corto (short-name) real de la cuenta. El "short-name" se puede extraer de la URL del Booking Engine de ThinkReservations. (Normalmente es el nombre del dominio.)El short-name de nuestra cuenta de demostración/ejemplo, The Viewpoint, es
the_viewpointsi quieres hacer pruebas.
https://secure.thinkreservations.com/the_viewpoint/reservationsCuando el usuario haga clic en "Check Availability", será dirigido a la Results Page en ThinkReservations.
¿Tienes problemas para encontrar el short-name?
Ve al Booking Engine en línea de ThinkReservations del cliente. Si su sitio ya fue actualizado para usar el Booking Engine de ThinkReservations, haz clic en el botón Book Now o Check Availability.
Mira la URL en la barra de direcciones. El short-name es el texto entre las diagonales. Mira el ejemplo a continuación. La parte resaltada es el short-name.
Por lo general, el short-name se toma del nombre del dominio. En nuestro ejemplo, el dominio ficticio del cliente sería www.the_viewpoint.com
Comunícate con soporte si no estás seguro de cuál es tu short-name.
Fíjate en la parte en negrita (short-name) a continuación:
Opción 1 - Bloque de Check Availability
Esta es la opción más popular. Con JavaScript y CSS, puedes darle el aspecto que quieras. Agrega el siguiente HTML para el bloque de Check Availability. No olvides cambiar el short-name. Consulta más arriba para saber más sobre el short-name. Usa CSS para personalizarlo. No omitas la línea del número de niños, aunque planees ocultarla.
<div class="tr-widget" data-tr-widget-type="check-availability" data-tr-short-name="YOUR SHORTNAME GOES HERE" data-tr-number-of-adults="3" data-tr-number-of-children="2" > </div>
La imagen anterior muestra el widget sin estilo.
Opción 2 - Bloque de Check Availability específico para una habitación/unidad
En la página individual de cada unidad, agrega el siguiente formulario de disponibilidad de la unidad. Esto colocará esa habitación al inicio de los resultados de búsqueda. Para hacerlo, agrega el siguiente HTML. Ten en cuenta que cada unidad necesita su propio ID de unidad, que se coloca en UNIT_ID_GOES_HERE. Para obtener el ID de unidad de una habitación, ve a "Settings" -> "Habitaciones" y haz clic en la habitación específica. Verás el ID en la parte superior. Si usas "Room Types" y vendes por tipo de habitación en el Booking Engine, avísanos para que podamos proporcionarte el ID del tipo de habitación. Estos no se muestran en la interfaz como sí ocurre con los ID de las habitaciones. No olvides cambiar el short-name.
Si usas "Room Types", avísanos para que podamos proporcionarte el ID del tipo de habitación. Estos no se muestran en la interfaz como sí ocurre con los ID de las habitaciones.
<div class="tr-widget" data-tr-widget-type="check-availability" data-tr-short-name="YOUR SHORTNAME GOES HERE" data-tr-number-of-adults="3" data-tr-number-of-children="2" data-tr-unit-id="UNIT_ID_GOES_HERE"> </div>
Opción 3 - Bloque específico para una habitación/unidad con calendario
Para agregar un widget de verificación de disponibilidad con un bloque de calendario para una unidad, usa el siguiente HTML. Nuevamente, reemplaza UNIT_ID_GOES_HERE con el ID de unidad único de la habitación. Ten en cuenta que cada unidad necesita su propio ID de unidad, que se coloca en UNIT_ID_GOES_HERE. Para obtener el ID de unidad de una habitación, ve a "Settings" -> "Habitaciones" y haz clic en la habitación específica. No olvides cambiar el short-name. Ten en cuenta: los Room Types no son compatibles con la Opción 3.
<div class="tr-widget" data-tr-widget-type="unit-calendar-with-availability-form" data-tr-widget-type="check-availability" data-tr-short-name="YOUR_SHORTNAME_GOES_HERE" data-tr-number-of-adults="3" data-tr-number-of-children="2" data-tr-unit-id="UNIT_ID_GOES_HERE"> </div>
Opción 4 - Calendario específico para una habitación/unidad
Para un bloque con solo el calendario, agrega el siguiente HTML. Nuevamente, reemplaza UNIT_ID_GOES_HERE con el ID de unidad único de la habitación. Ten en cuenta que cada unidad necesita su propio ID de unidad, que se coloca en UNIT_ID_GOES_HERE. Para obtener el ID de unidad de una habitación, ve a "Settings" -> "Habitaciones" y haz clic en la habitación específica. No olvides cambiar el short-name. Ten en cuenta: los Room Types no son compatibles con la Opción 4.
<div class="tr-widget" data-tr-widget-type="unit-calendar" data-tr-short-name="YOUR SHORTNAME GOES HERE" data-tr-unit-id="UNIT_ID_GOES_HERE"> </div>
Cómo dar estilo a los widgets para que coincidan con tu marca
El widget de verificación de disponibilidad incluye sus propios estilos predeterminados. Esto se hace para darle una apariencia por defecto al widget y al selector de fechas, como puedes ver en las capturas de pantalla anteriores. Todos los estilos se pueden sobrescribir escribiendo CSS adicional. Debes copiar, editar y alojar tu propia versión del archivo JavaScript para hacer otros cambios. Por ejemplo, quizás prefieras que el botón de llamada a la acción diga "Book" o "Search" en lugar de "Check availability".
Soporte para el widget de Check Availability
Ten en cuenta: ThinkReservations no ofrece soporte para dar estilo ni personalizar el widget de verificación de disponibilidad más allá de la información que se incluye en este artículo. El widget está pensado para webmasters y desarrolladores web con experiencia en CSS y JavaScript. Si necesitas ayuda para implementar, personalizar o dar estilo al widget, te recomendamos consultar a un profesional con experiencia en estas tecnologías. El equipo de soporte de ThinkReservations no podrá ayudarte con el uso de JavaScript o CSS, ni con su implementación en tu sitio web. Gracias por tu comprensión.
Como alternativa, normalmente recomendamos un enlace sencillo de "Book Now" para ofrecer la mejor experiencia al huésped.
Al escribir el CSS, debes tener en cuenta dos cosas:
El CSS predeterminado que incluimos usa la bandera !important. Por lo tanto, todo el CSS personalizado que escribas para dar estilo al widget también debe incluir la bandera !important
Debes asegurarte de tener una regla CSS más específica que la nuestra, para que surta efecto. Una forma fácil de lograrlo es revisar el CSS que proporcionamos (usando el inspector de Chrome), copiarlo y agregarle "body" al principio.
A continuación hay algunos ejemplos para darte una idea de cómo puedes modificar el widget.
Ejemplo:
body .tr-widget div.tr-component.tr-check-availability input[type=text].tr-date { border: 1px solid red !important;}Lo anterior haría que los campos de fecha de entrada y de salida tengan un borde rojo.
Ejemplo:
body .tr-widget div.tr-component.tr-check-availability div.tr-occupancy select.tr-number-of-children,body .tr-widget .tr-occupancy .tr-field:nth-child(2) label { display: none !important;}El CSS anterior oculta la pregunta del "número de niños".
Ejemplo:
body .tr-widget form { display: flex !important; flex-direction: row; align-items: center;}El código anterior crea una barra horizontal básica.
Ejemplos reales:
A continuación hay algunos ejemplos de clientes de ThinkReservations que usan nuestro widget de verificación de disponibilidad. Cada ejemplo se ve diferente, pero todos usan la Opción 1. Sus desarrolladores web les dieron estilo con CSS y JavaScript para que coincidan con su marca y los usan en sus páginas de inicio. Los webmasters han ido cambiando los widgets con el tiempo, así que visita también los sitios enlazados.
Estilo personalizado y selector de fechas. Se muestra en la parte superior derecha de la página de inicio. Asume 2 adultos. La ocupación se puede cambiar después de hacer clic en SEARCH.
https://www.edenvaleinn.com/
Estilo personalizado y selector de fechas. Se muestra como una barra horizontal al centro y en primer plano.
Estilo personalizado y selector de fechas. Se muestra en la parte inferior izquierda como parte del pie de página. Asume 2 adultos. El número de adultos y niños se puede ajustar en la página de resultados después de hacer clic en "Check Availability".
https://www.bramptoninn.com/
Estilo personalizado y selector de fechas. Se muestra en el lado izquierdo de la página de inicio. Asume 2 adultos. Como en el caso anterior, la ocupación se puede cambiar en el Booking Engine.
Es posible lograr estilos y selectores de fechas totalmente personalizados. La barra horizontal permite que un posible huésped haga clic en Check In, seleccione una fecha en un calendario de dos meses y que la fecha de salida se establezca automáticamente. Los colores están configurados para coincidir con el sitio y la marca. ¡Son excelentes ejemplos de lo que pueden hacer los desarrolladores web con talento!