Booking Website : Widget Calendrier – Hostaway

Le nouveau moteur de réservation offre des fonctionnalités telles que la vente incitative, la recherche avancée et une configuration rapide. Cependant, en raison de ses options de personnalisation intrinsèquement limitées, il ne peut pas remplacer entièrement les sites web créés sur mesure. De plus, vous pouvez souhaiter permettre aux invités de réserver vos annonces sans quitter votre site web.

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 sur les pages d'annonces du moteur de réservation. Il dispose d'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'une annonce spécifique, selon vos paramètres spécifiques Hostaway.

Il permet un seul widget de calendrier par page.

Comment le configurer :

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

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

<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>

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'annonce 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'annonce
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 ')
  - ButtonText : '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
Le widget affiche un calendrier avec 1 ou 2 mois (selon les paramètres) où la disponibilité de l'annonce est indiquée. Le bouton d'action mène les invités à la page de paiement/demande de l'annonce.
Exemples de widgets avec différents paramètres :

Comment le configurer :

Articles associés