Aller au contenu principal
Connexion
English (United States) Español Italiano
Menu

Booking Website: Widgets de Barre de Recherche et Calendrier Intégrables

Victor
  • Mise à jour

Barre de recherche et widgets de calendrier intégrables

Notre moteur de réservation est équipé de fonctionnalités utiles telles que la vente incitative, la recherche avancée et une configuration rapide. Cependant, il ne peut pas remplacer complètement les sites web créés sur mesure. De plus, vous pouvez souhaiter offrir à vos invités la possibilité de réserver vos annonces sans avoir à quitter votre site web ou à les rediriger vers votre moteur de réservation. C'est là que nos widgets de moteur de réservation sont utiles. Pour en savoir plus sur la façon de connecter le moteur de réservation à votre site web existant, consultez notre webinaire.

Widgets

Barre de recherche intégrable du moteur de réservation

  1. Pour utiliser la barre de recherche, vous devez avoir un moteur de réservation publié (publiez-le en allant dans les paramètres du moteur de réservation -> publier)

  2. Intégrez le code suivant à l'endroit souhaité sur le site web (WordPress / Wix vous permettent d'intégrer des codes 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. Modifiez les lignes 4-9 dans le code selon les paramètres pertinents :

     

    1. baseUrl : doit être l'URL du moteur de réservation. Peut être une URL holidayfuture ou une URL personnalisée. Si c'est l'URL holidayfuture ou une URL de sous-domaine personnalisée, elle doit ressembler à 'https://UpstatePlace.holidayfuture.com/' cependant, si c'est une URL de domaine principal personnalisée, elle doit ressembler à 'https://www.mydomain.com/' (important d'inclure le caractère ')

    2. showLocation : soit true/false. Détermine si la barre de recherche a un filtre de localisation ou non. La liste des emplacements est prise du moteur de réservation (qui utilise la ville de l'annonce comme emplacement)

    3. color : un code couleur HEX qui affecte la couleur du bouton de recherche. Par exemple '#cc2dcf' (important d'inclure le caractère '). Google "sélecteur de couleur HEX" pour obtenir la couleur HEX qui convient à votre site

    4. rounded : soit true/false. Détermine si la barre de recherche a des coins arrondis ou carrés

    5. openInNewTab : soit true/false. Détermine si les résultats de recherche s'ouvrent dans un nouvel onglet ou dans l'onglet actuel

    6. font : détermine la police du texte dans la barre de recherche. (important d'inclure le caractère ')

       

Widget Calendrier

Le widget de calendrier intégrable est un code qui peut être inséré dans un site web pour afficher un calendrier similaire à celui qui existe dans les pages de liste du moteur de réservation. Il offre des options de style et de personnalisation. Lorsque les invités cliquent sur le bouton d'action, ils sont dirigés vers les pages de paiement ou de demande d'informations d'une annonce spécifique, selon vos paramètres spécifiques à Hostaway.

  1. Pour utiliser le widget de calendrier, vous devez avoir un moteur de réservation publié dans votre compte Hostaway

  2. Intégrez le code suivant à l'endroit souhaité sur votre site web. Comme le widget renvoie à la page de paiement/demande d'un hébergement spécifique, nous recommandons de l'intégrer à côté des informations sur l'hébergement

    <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, // ou 1
    openInNewTab: true, // ou false
    font: 'Open Sans',
    rounded: true, // ou false
    button: {
      action: 'checkout', // ou 'inquiry'
      text: 'Book now',
    },
    clearButtonText: 'Clear dates',
    color: {
      mainColor: '#ff0000',
      frameColor: '#000000',
      textColor: 'green',
    },
  })
</script>

     

  3. Modifiez les lignes 5-10, 12-13, et 16-18 dans le code selon les paramètres pertinents :
    1. baseUrl : doit être l'URL du moteur de réservation. Peut être une URL holidayfuture ou personnalisée. Par exemple 'https://drakeshome.holidayfuture.com/' (important d'inclure le caractère ')
    2. listingId : L'ID de l'hébergement Hostaway
    3. numberOfMonths : peut être soit 1 soit 2. Détermine combien de mois sont affichés dans le widget
    4. openInNewTab : peut être soit true soit false. Détermine si la page de paiement/demande s'ouvrira dans le même onglet (lorsqu'il est réglé sur false) ou dans un nouvel onglet (lorsqu'il est réglé sur true).
    5. font : peut être un nom de police. Voir la liste des polices ici. Détermine la police utilisée dans le widget (important d'inclure le caractère ')
    6. rounded : peut être soit true soit false. Détermine si le calendrier aura un aspect arrondi ou carré
    7. action : peut être soit 'checkout' soit 'inquiry' (important d'inclure le caractère '). Détermine si le bouton d'action mène à la page de paiement ou de demande de l'hébergement
    8. text : détermine le texte affiché sur le bouton d'action et il est important de les séparer
      • 'Book now' (important d'inclure le caractère ')
      • "clearButtonText": 'Clear dates', le texte peut être modifié
    9. mainColor : un code couleur HEX qui affecte la couleur du bouton d'action. Par exemple '#cc2dcf' (important d'inclure le caractère ')
    10. frameColor : identique à mainColor mais pour le cadre du widget
    11. textColor : identique à mainColor mais pour le texte dans le widget

       
  4. Le widget affiche un calendrier avec 1/2 mois (selon les paramètres) où la disponibilité de l'hébergement est montrée. Le bouton d'action mène les invités à la page de paiement/demande de l'hébergement
  5. Il permet un seul widget de calendrier par page
  6. Exemples de widgets avec différents paramètres :

widget1.png

widget2.png


 

Intégration des produits Hostaway avec votre site Web

En plus des widgets de recherche et de calendrier, les utilisateurs peuvent exploiter la documentation API de Hostaway pour faciliter la synchronisation de leur calendrier de site Web et l'intégration de paiement Stripe avec la plateforme Hostaway, permettant ainsi à leurs invités de réserver directement via leur site Web. Cela permet aux utilisateurs d'intégrer facilement la fonctionnalité de réservation de Hostaway dans leur site Web existant, offrant à leurs clients la commodité de réserver directement depuis leur site.

Articles associés