> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://helpcenter.superhote.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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 2 é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-** OPTIONNEL - EXPERT - Surcharger un formulaire de recherche

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

${frame}[](https://www.loom.com/embed/58333c8707ce4e23ad5fc1ac7950feb5?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true.)

* **Étape 1  -**

Allez dans **Hébergements** >  **Editer** > **Website**

![](https://storage.crisp.chat/users/helpdesk/website/-/1/e/b/a/1eba765d04aa3600/e4a8e3bd-20f2-4f9a-923c-adec2a_1pabggq.png)

**- É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_
```

![](https://storage.crisp.chat/users/helpdesk/website/-/2/1/8/0/2180f9f9520dca00/1f35cb2f-dbfb-4016-8eae-bceb39_18yvc3x.png)

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**](https://www.dropbox.com/sh/ot812rv8d3qfd9i/AAASMziaG9CrueFfF03ImEFAa?dl=0)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/b/2/2/c/b22ca99b8a973800/f8687fb5-629f-4215-8894-b132c9_3lsox7.png)

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

${frame}[](https://www.loom.com/embed/b4f35478cfbf447f83448be74205b142?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true.)

#### Au préalable, créez une page reservation 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 allow-top-navigation"></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.

![](https://storage.crisp.chat/users/helpdesk/website/-/1/1/c/1/11c1b0b9a7276a00/9ce8114c-d3bd-4296-8d76-a9adc2_1p299d1.png)

*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 allow-top-navigation"></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.

![](https://storage.crisp.chat/users/helpdesk/website/-/7/a/e/2/7ae21c54c9087c00/ef0cf3a5-f9b5-4267-b18a-8cdc32_sli9y1.png)

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**](https://help.superhote.com/support/solutions/articles/150000053138-exemples-de-codes-css-pour-personnaliser-le-moteur-de-r%C3%A9servation)

#### III. OPTIONNEL - EXPERT Surcharger un formulaire de recherche
####

***Atttention cette partie nécessite du codage car elle est à adapter selon votre site, nous ne pouvons pas fournir de code pré-écrit pour la partie formulaire, à faire faire par un développeur ou webmaster.***

***Cette partie est optionelle.***

Cette partie vous explique comment créer ou utiliser un formulaire de recherche de dates sur votre page d'acceuil qui va renvoyer vers la page de réservation, comme cet exemple :

![](https://storage.crisp.chat/users/helpdesk/website/-/2/e/4/4/2e44e8af1514f400/01feda9e-7732-44ae-8aec-fea45a_1ewwtr0.jpg)

**1 - Page de réservation**

Il faut tout d'abord **modifier le code de votre page de réservation.**

(ce code remplace ce qui est donné dans la partie 2)

Prenez soin de remplacer **[insérer_la_webkey_ici]** par la vôtre.

```
<iframe id="bookingengine" style="display: block;" src="" width="100%" height="5500" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
<script>
var webKey = "[insérer_la_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>
```

**2 - Formulaire de recherche**

Votre formulaire de recherche doit récupérer les variables suivantes pour qu'elles puissent être interprétées par le moteur de réservation :

* date de checkin sous la forme année-mois-jour -> **checkin**  
* date de checkout sous la forme année-mois-jour  -> **checkout**  
* nombre d'adultes -> **adults**  
* nombre d'enfants -> **children**

Il doit ensuite générer un lien de la forme suivante, "reservation" étant votre page de réservation avec le code donné au dessus.   
Le moteur de réservation récuperera alors les variables données dans l'URL et les intégrera dans la sélection.

...[/reservation/?checkin=2024-03-27&checkout=2024-03-29&adults=2&children=0](https://sejourlozere.fr/reservation/?checkin=2024-03-27&checkout=2024-03-29&adults=2&children=0)

---

**LIENS UTILES:**

**Nouveau** dans SuperHote ? Veuillez vous référer aux articles pour [BIEN DEMARRER AVEC SUPERHOTE](https://help.superhote.com/support/solutions/150000130871)

Vous souhaitez être contacté pour un **diagnostic stratégique gratuit** ? Réservez votre appel stratégique [en cliquant ici](https://superhote.com/appel)

Vous souhaitez voir des **démonstrations et replay de nos conférences** ? Visitez notre chaîne [Youtube](https://www.youtube.com/channel/UCGWsV5hVQp_oma9XqNz6GbQ)

Vous avez raté l'un de nos ateliers de **coaching** ? Vous pouvez [visionner les replay ici](https://help.superhote.com/support/solutions/150000122116)

Vous cherchez un sujet lié au **centre d’aide en ligne** ? Veuillez visiter notre [Help Center](https://help.superhote.com/support/home)

Vous voulez connaître les **dernières nouvelles et mises à jour** de SuperHote ? Visitez [la page officielle des nouveautés](https://help.superhote.com/support/solutions/150000130872)

**Restons connectés ?**

Visitez notre [site web](https://superhote.com/)

Suivez-nous sur [Instagram](https://www.instagram.com/matsuperhote/)

Aimez notre page sur [Facebook](https://www.facebook.com/groups/superhote/)

Abonnez-vous à notre chaine officielle [Youtube](https://www.youtube.com/channel/UCGWsV5hVQp_oma9XqNz6GbQ)

**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](https://www.youtube.com/watch?v=2pgfGOpls9w&list=PLbdYq7NnH1oZmA5VCTvUSeJOBTT4dYSwY)

Vous souhaitez en savoir d’avantage, contactez-nous via le chat ou sur [support@superhote.com](mailto:support@superhote.com)