Affichez votre calendrier de disponibilités sur votre site web (Calendrier iFrame)

Vous voulez montrer aux visiteurs de votre site quelles dates sont libres et lesquelles sont prises ? C'est exactement le rôle du calendrier iFrame : un petit calendrier de disponibilités qui tire ses données directement de votre Calendrier Smoobu. Pour l'intégrer, vous copiez un court bloc de code depuis Smoobu et le collez dans votre site. Les invités ne peuvent pas réserver via ce calendrier ; c'est un affichage, pas un formulaire de réservation.

Avant de commencer

Il vous faut ces deux éléments avant d'intégrer le calendrier :

• Un site web où vous pouvez coller un bloc de code HTML. La plupart des systèmes de sites proposent pour cela un élément « HTML personnalisé » ou « code d'intégration ».
• Votre propriété configurée dans Smoobu. Chaque propriété reçoit son propre code de calendrier.

Le calendrier n'affiche que les disponibilités

Le widget montre les dates libres et bloquées, rien de plus : aucun prix, aucune sélection de dates, aucun paiement. Il convient aux hôtes qui prennent leurs réservations via leur propre formulaire de demande ou par e-mail et veulent montrer les disponibilités d'un coup d'œil. Si vous voulez au contraire que les invités réservent et paient directement sur votre site, intégrez plutôt le moteur de réservations : voir Comment intégrer le moteur de réservations à mon site web ?. Vous pouvez aussi combiner les deux, avec le calendrier comme aperçu rapide des disponibilités à côté de votre option de réservation ou de contact.

Étapes

1. Dans Smoobu, allez dans Paramètres avancés > Calendrier iFrame.
2. Choisissez la langue du calendrier. Dix langues sont disponibles (allemand, anglais, italien, français, espagnol, néerlandais, grec, portugais, russe, polonais). La page affiche alors le code de chaque propriété dans cette langue.
3. Repérez la ligne de votre propriété. Chaque propriété propose deux versions de code côte à côte : Default, un widget chargé via JavaScript dont vous pouvez modifier l'apparence, et iFrame, un cadre prêt à l'emploi qui s'adapte à l'écran (une mise en page compacte de 280 sur 540 pixels sur téléphone, plus large de 1000 sur 600 pixels sur les grands écrans) mais dont l'apparence n'est pas modifiable.
4. Copiez le code de la version que vous voulez.
5. Collez-le dans le HTML de votre site à l'endroit où le calendrier doit apparaître, puis enregistrez et publiez la page dans votre système de site.
6. Pour afficher des calendriers pour d'autres propriétés, copiez le code propre à chaque propriété et collez-le sur la page qui lui correspond.

Vérifier que cela a fonctionné

Ouvrez la page sur votre site web : le calendrier s'affiche et correspond à votre Calendrier Smoobu. Pour vérifier qu'il se met à jour, bloquez un jour dans votre Calendrier Smoobu, attendez un court instant que la synchronisation se fasse, puis rechargez la page de votre site. Le jour devrait alors y apparaître aussi comme indisponible.

Problèmes fréquents

Les invités disent qu'ils ne peuvent pas sélectionner de dates ni réserver dans le calendrier

C'est ainsi que fonctionne ce widget : il sert uniquement à l'affichage, il n'y a donc ni sélection de dates ni paiement. Ce n'est pas un défaut. Pour que les invités choisissent des dates et réservent directement sur votre site, intégrez le moteur de réservations : voir Comment intégrer le moteur de réservations à mon site web ?. Beaucoup d'hôtes gardent le calendrier de disponibilités sur une page et le moteur de réservations sur leur page de réservation.

Le design du calendrier ne correspond pas à mon site web

La version iFrame n'est pas personnalisable : elle ajuste sa taille à l'écran mais garde toujours l'aspect standard de Smoobu. La version Default, elle, peut être stylée. Son code contient data-disable-css="false" ; changez cette valeur en true pour désactiver le style intégré de Smoobu et appliquer votre propre CSS à la place. Cette partie s'adresse aux webdesigners, et la modification se fait dans le code collé sur votre site, pas dans Smoobu. Sans cette modification, le calendrier garde l'aspect standard de Smoobu.

Articles liés

• Moteur de réservations, Créateur de site internet, Calendrier iFrame : à quoi sert chaque outil ?
• Comment intégrer le moteur de réservations à mon site web ?
• Comment configurer mon moteur de réservations ?

Toujours bloqué ?

Si ces étapes n'ont pas réglé le problème, contactez l'équipe Smoobu : ouvrez le menu Aide pour ouvrir un ticket ou réserver un créneau d'appel, ou utilisez la bulle de chat en bas à droite. Pour obtenir la réponse la plus rapide, indiquez :

• Votre Smoobu User ID (dans le menu de l'icône de profil, en haut à droite).
• Le nom ou l'ID du logement, s'il s'agit d'un logement précis.
• Le Booking ID, s'il s'agit d'une réservation précise (Réservations, puis Afficher plus).
• Le nom du portail, s'il s'agit de synchronisation de portail (Booking.com, Airbnb, Vrbo, etc.).
• Un bref pas à pas : ce que vous avez fait, ce que vous attendiez et ce qui s'est passé.
• Des captures d'écran ou une courte capture vidéo du problème.
• Votre navigateur et votre système d'exploitation, si quelque chose s'affiche mal à l'écran.