Saltar al contenido principal
Iniciar sesión
English (United States) Français Italiano
Menu

Booking Website:: Widgets de Barra de Búsqueda y Calendario Integrables

Victor
  • Actualización

Barra de búsqueda y widgets de calendario integrables

Nuestro motor de reservas viene equipado con características útiles como venta adicional, búsqueda avanzada y configuración rápida. Sin embargo, puede que no sirva como un reemplazo completo para sitios web creados a medida. Además, es posible que desee ofrecer a sus huéspedes la opción de reservar sus listados sin tener que salir de su sitio web o redirigirlos a su motor de reservas. Aquí es donde nuestros widgets del motor de reservas son útiles. Para obtener más información sobre cómo conectar el motor de reservas a su sitio web existente, consulte nuestro seminario web.

Widgets

Barra de búsqueda integrable del motor de reservas

  1. Para usar la barra de búsqueda, debes tener un motor de reservas publicado (publícalo yendo a la configuración del motor de reservas -> publicar)

  2. Incrusta el siguiente código en el lugar deseado en el sitio web (WordPress / Wix te permiten incrustar códigos HTML)

    mceclip0.png

     

    <script src="https://d2q3n06xhbi0am.cloudfront.net/widget.js?1640277196"></script>
<script>
window.searchBar({
baseUrl: 'https://UpstatePlace.holidayfuture.com/',
showLocation: true,
color: '#cc2dcf',
rounded: true,
openInNewTab: true, // or false  
font: 'Open Sans',
});
</script>
<div id="hostaway-booking-widget"></div>

     

  3. Modifica las líneas 4-9 en el código de acuerdo con los parámetros relevantes:

     

    1. baseUrl: debe ser la URL del motor de reservas. Puede ser una URL de holidayfuture o una URL personalizada. Si es la URL de holidayfuture o una URL de subdominio personalizada, entonces debería verse como 'https://UpstatePlace.holidayfuture.com/' sin embargo, si es una URL de dominio principal personalizada, debería verse como 'https://www.mydomain.com/' (importante incluir el carácter ')

    2. showLocation: ya sea true/false. Determina si la barra de búsqueda tiene un filtro de ubicación o no. La lista de ubicaciones se toma del motor de reservas (que utiliza la ciudad del anuncio como ubicación)

    3. color: un código de color HEX que afecta el color del botón de búsqueda. Por ejemplo '#cc2dcf' (importante incluir el carácter '). Busca "selector de color HEX" en Google para obtener el color HEX que se ajuste a tu sitio

    4. rounded: ya sea true/false. Determina si la barra de búsqueda tiene esquinas redondeadas o cuadradas

    5. openInNewTab: ya sea true/false. Determina si los resultados de búsqueda se abren en una nueva pestaña o en la actual

    6. font: determina la fuente del texto en la barra de búsqueda. (importante incluir el carácter ')

       

Widget de Calendario

El widget de calendario incrustable es un código que se puede ingresar en un sitio web para mostrar un calendario como el que existe en las páginas de listado del motor de reservas. Tiene opciones de estilo y personalización. Cuando los huéspedes hacen clic en el botón de acción, son dirigidos a las páginas de pago o consulta de un listado específico, de acuerdo con la configuración específica de Hostaway.

  1. Para usar el widget de calendario, necesitas tener un motor de reservas publicado en tu cuenta de Hostaway

  2. Incorpora el siguiente código en el lugar deseado de tu sitio web. Como el widget enlaza a la página de pago/consulta de un listado específico, recomendamos incorporarlo junto a la información sobre el listado

    <div id="hostaway-calendar-widget"></div>
<script src="https://d2q3n06xhbi0am.cloudfront.net/calendar.js"></script>
<script>
  window.hostawayCalendarWidget({
    baseUrl: 'https://www.mywebsite.com/',
    listingId: 40467,
    numberOfMonths: 2, // o 1
    openInNewTab: true, // o false
    font: 'Open Sans',
    rounded: true, // o false
    button: {
      action: 'checkout', // o 'inquiry'
      text: 'Book now',
    },
    clearButtonText: 'Clear dates',
    color: {
      mainColor: '#ff0000',
      frameColor: '#000000',
      textColor: 'green',
    },
  })
</script>

     

  3. Modifica las líneas 5-10, 12-13 y 16-18 en el código de acuerdo con los parámetros relevantes:
    1. baseUrl: debe ser la URL del motor de reservas. Puede ser una URL de holidayfuture o personalizada. Por ejemplo 'https://drakeshome.holidayfuture.com/' (importante incluir el carácter ')
    2. listingId: El ID del listado de Hostaway
    3. numberOfMonths: puede ser 1 o 2. Determina cuántos meses se muestran en el widget
    4. openInNewTab: puede ser true o false. Determina si la página de pago/consulta se abrirá en la misma pestaña (cuando se establece en false) o en una nueva (cuando se establece en true).
    5. font: puede ser un nombre de fuente. Ver lista de fuentes aquí. Determina la fuente utilizada en el widget (importante incluir el carácter ')
    6. rounded: puede ser true o false. Determina si el calendario tendrá un aspecto redondeado o cuadrado
    7. action: puede ser 'checkout' o 'inquiry' (importante incluir el carácter '). Determina si el botón de acción lleva a la página de pago o consulta del listado
    8. text: determina el texto que se muestra en el botón de acción y es importante separar esos
      • 'Book now' (importante incluir el carácter ')
      • "clearButtonText": 'Clear dates', el texto se puede cambiar
    9. mainColor: un código de color HEX que afecta el color del botón de acción. Por ejemplo '#cc2dcf' (importante incluir el carácter ')
    10. frameColor: igual que mainColor pero para el marco del widget
    11. textColor: igual que mainColor pero para el texto en el widget

       
  4. El widget muestra un calendario con 1/2 meses (según la configuración) donde se muestra la disponibilidad del listado. El botón de acción lleva a los huéspedes a la página de pago/consulta del listado
  5. Permite solo un widget de calendario por página
  6. Ejemplos de los widgets con diferentes configuraciones:

widget1.png

widget2.png


 

Integración de los productos de Hostaway con su sitio web

Además de los widgets de Búsqueda y Calendario, los usuarios pueden aprovechar la documentación de la API de Hostaway para facilitar la sincronización de su calendario web y la integración de pagos con Stripe en la plataforma de Hostaway, permitiendo que sus huéspedes reserven directamente a través de su sitio web. Esto permite a los usuarios integrar fácilmente la funcionalidad de reservas de Hostaway en su sitio web existente, proporcionando a sus clientes la comodidad de reservar directamente desde su sitio.

Artículos relacionados