Intégrer le moteur de réservations SuperHote sur n'importe quel site internet

Dans ce tutoriel, nous allons découvrir ensemble comment intégrer le moteur de réservations de SuperHote.

Il y a 3 étapes simples pour y arriver :

I- Editer les appartements (photos, descriptions, coordonnées GPS) pour le moteur de réservations dans SuperHote

II- Ajouter le moteur de réservations SuperHote sur n'importe quel site internet de réservations

III- En bonus, intégrer le moteur de réservation SuperHote avec un formulaire de recherche existant

 I. Editer les appartements (photos, descriptions, coordonnées GPS) pour le moteur de réservation dans SuperHote.

- Étape 1  -

    Allez dans Hébergements >  Editer > Website 

- Étape 2 - 

Renseignez les éléments demandés : 

• Description
• A savoir
• Espaces
• Services
• Coordonnées GPS 
• Photos de l'appartement. 

Les photos et les coordonnées GPS sont obligatoires et conditionnent la visibilité du logement sur le site.

Les photos sont à télécharger dans la partie "PHOTOS DU SLIDER" 

Format conseillé : JPG - paysage et minimum 1024x768 pixels

Comme indiqué dans le tuto ci-dessus, voici le lien pour télécharger les photos de "services" à mettre dans la page d'appartement : https://bit.ly/2SSYRjv

• Pour ajouter les coordonnées GPS, rendez-vous dans Google Maps et inscrivez votre adresse.
  Dans l'URL vous trouverez la latitude et la longitude que vous n'avez plus qu'à copiez et collez dans SuperHote.

    N'oubliez de pas cliquer sur Actions > Sauver

II. Ajouter le moteur de réservations SuperHote sur n'importe quel site internet de réservations

Au préalable, créez une page Appartement sur votre site. 
Par exemple sur un site Wordpress allez dans Administration > Pages > créer ou éditer une page existante.

Il y aura un code à importer sur selon ce que vous souhaitez intégrer : 

Code à intégrer pour liste des appartements

<iframe id="bookingengine" allowfullscreen="" src="https://app.superhote.com/#/get-available-rentals/[insérer_la_webkey_ici]" style="display:block;" width="100%" height="3879" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin allow-presentation"></iframe>

Lorsque vous insérer le code il y a une variable  matérialisée  dans le code par [insérer_la_webkey_ici]
    

Pour la récupérer, allez dans SuperHote > Paramètres 

Dans l'onglet profil utilisateur vous trouverez la Webkey à copier et collez dans le code.

Code à intégrer pour page appartement

<iframe id="bookingengine" allowfullscreen="" src="https://app.superhote.com/#/rental/[insérer_la_propertykey_ici]" style="display:block;" width="100%" height="3879" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin allow-presentation"></iframe>

Il s'agit ici d'intégrer un seul appartement.

Lorsque vous insérez le code il y a une variable  matérialisée dans le code par [insérer_la_propertykey_ici]
    

Pour la récupérer, allez sur votre moteur de réservation et cliquer sur l'appartement en question.
Dans l'URL vous trouverez la Key à copier puis coller dans le code.

Pour gérer l'affichage de votre page d'accueil, vous pouvez utiliser les codes CSS:

Code CSS exemple : Exemples de Codes CSS pour personnaliser le moteur de réservation

III. Comment intégrer le moteur de réservations SuperHote avec un formulaire de recherche existant

Au préalable votre site dispose d'une page d'accueil, sur laquelle vous pouvez effectuer une recherche avec des dates d'arrivée /départ et vous arrivez sur une page avec les appartements disponibles qui s'affichent.

2 choses sont a intégrer : 

1. La page de destination

Sur Wordpress , Administration > Pages > créer une nouvelle page

Dans le texte copier le code si dessous :

Code à intégrer pour surcharger un formulaire de recherche existant:

<iframe id="bookingengine" style="display: block;" src="" width="100%" height="5500" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
<script>
var webKey = "mettre votre webkey ici";
var url = new URL(window.location.href);
var appart = url.searchParams.get("appart");
var checkin = url.searchParams.get("checkin");
var checkout = url.searchParams.get("checkout");
var adults = url.searchParams.get("adults");
var children = url.searchParams.get("children");
var lang = url.searchParams.get("lang");
if(lang == null)
    lang = "fr";
if(appart == null) {
var iframeUrl = "https://app.superhote.com/#/get-available-rentals/"+webKey+"?startDate=" + checkin + "&endDate=" + checkout + "&adultsNumber=" + adults + "&childrenNumber=" + children; + "&lang=" + lang;
if(checkin == null) iframeUrl = "https://app.superhote.com/#/get-available-rentals/" + webKey + "?lang=" + lang;
document.getElementById('bookingengine').src = iframeUrl;
} else {
var iframeUrl = "https://app.superhote.com/#/rental/" + appart + "?lang=" + lang;
document.getElementById('bookingengine').src = iframeUrl;
} </script>

Copiez le et remplacez le dans la partie Texte à ce niveau du code 

LIENS UTILES:  

Nouveau dans SuperHote ? Veuillez vous référer aux articles pour BIEN DEMARRER AVEC SUPERHOTE 

Vous souhaitez être contacté pour un diagnostic stratégique gratuit ? Réservez votre appel stratégique en cliquant ici 

Vous souhaitez voir des démonstrations et replay de nos conférences ? Visitez notre chaîne Youtube 

Vous avez raté l'un de nos ateliers de coaching ? Vous pouvez visionner les replay ici

Vous cherchez un sujet lié au centre d’aide en ligne ? Veuillez visiter notre Help Center 

Vous voulez connaître les dernières nouvelles et mises à jour de SuperHote ? Visitez la page officielle des nouveautés 

Restons connectés ?

Visitez notre site web

Suivez-nous sur Instagram

Aimez notre page sur Facebook

Abonnez-vous à notre chaine officielle Youtube

Besoin d’en savoir plus et voir les retours d'autres clients ?

Nous vous invitons à regarder les épisodes de notre série "J'irai louer chez vous" en cliquant ici

Vous souhaitez en savoir d’avantage, contactez-nous via le chat ou sur support@superhote.com