Intégrer Resabooking dans votre site WordPress

Si vous cherchez à simplifier la gestion de vos réservations directement depuis votre site WordPress, l’intégration de Resabooking est probablement la meilleure option.

Vous pouvez automatiser tout le processus de réservation, qu’il s’agisse de la gestion des disponibilités ou de la personnalisation des types d’hébergements.

Le plus intéressant ? Tout est centralisé dans votre interface WordPress, sans avoir besoin de naviguer entre plusieurs outils.

Dans cet article, je vais vous montrer pas à pas comment intégrer Resabooking à WordPress, de la création de votre compte développeur à la personnalisation de votre site.

Vous verrez, c’est bien plus simple qu’il n’y paraît, et le gain de temps sera immédiat.

Si vous souhaitez déléguer cette tâche, je propose un service de webmaster WordPress complet basé à Grenoble, où je prends en charge chaque aspect de A à Z.

Pourquoi intégrer Resabooking dans votre site WordPress ?

Que vous gériez un hôtel, une chambre d’hôtes ou tout autre type d’hébergement, Resabooking est un véritable atout pour centraliser et automatiser vos réservations.

En l’intégrant à votre site WordPress, vous pouvez offrir à vos visiteurs une expérience fluide, de la sélection d’un créneau disponible jusqu’à la confirmation de la réservation.

Avec Resabooking, fini les allers-retours entre différents outils de gestion.

Tout se passe au sein de votre site WordPress : disponibilité en temps réel, confirmation automatique par e-mail, gestion des paiements en ligne, et bien plus encore.

Vous gagnez non seulement du temps, mais vous assurez aussi un service professionnel et sans accroc à vos clients.

L’intégration est particulièrement utile pour :

  • Gérer vos réservations directement sur votre site WordPress sans avoir à passer par une plateforme externe.
  • Offrir une interface intuitive à vos utilisateurs, avec un calendrier clair et des options de paiement sécurisées.
  • Automatiser la synchronisation des données d’hébergement, des prix et des disponibilités.

Bref, intégrer Resabooking à votre WordPress, c’est simplifier la vie de vos clients et la vôtre, tout en augmentant vos chances de convertir plus de visiteurs en clients.

Obtenir un compte développeur Resabooking

Pour intégrer Resabooking à votre site WordPress, la première étape est de demander un compte développeur.

Ce compte est essentiel pour accéder à l’API qui vous permettra de synchroniser toutes les informations de vos hébergements directement sur votre site.

La démarche est simple : il vous suffit de remplir un formulaire sur la page Contact – Documentation API Resabooking.

Une fois votre demande approuvée, Resabooking vous enverra un token unique, indispensable pour accéder à la documentation de l’API.

Pour utiliser ce token, il vous suffit de cliquer sur le bouton « Sign in to Documentation » après réception.

Ce token servira ensuite à authentifier vos requêtes API et vous ouvrira les portes à toutes les fonctionnalités de Resabooking.

Vous pourrez ainsi récupérer automatiquement les informations de vos hébergements, les disponibilités en temps réel, et bien plus encore, directement depuis votre site WordPress.

Page d'accueil de la documentation de l'API Resabooking afin de s'y connecter

Explorer la documentation de l'API Resabooking

La documentation de l’API Resabooking regorge d’informations utiles pour mettre en place une intégration efficace.

Elle vous guide pas à pas pour interagir avec l’API, en expliquant les différentes routes qui permettent de récupérer ou de mettre à jour les données de vos hébergements.

Deux URLs principales sont disponibles pour accéder à l’API :

L’avantage de la sandbox est que vous pouvez tester toutes vos intégrations sans affecter vos données en production.

Une fois tout validé, vous pourrez passer facilement sur l’environnement live.

Documentation de l'API Resabooking

Pour notre cas, la route clé que nous allons utiliser est la suivante : https://{url_api}/setup/

Cette route GET vous permet de récupérer toutes les informations sur vos types d’hébergements, que vous pourrez ensuite afficher et gérer directement sur votre site WordPress.

Une fois ces données récupérées, vous aurez la main pour personnaliser la présentation des hébergements et les rendre visibles à vos utilisateurs en temps réel.

Documentation de la route GET Setup

Explorer et comprendre la documentation de l’API est une étape cruciale pour exploiter pleinement la puissance de Resabooking.

Vous pourrez ainsi automatiser de nombreuses tâches et offrir à vos clients une expérience de réservation optimale.

Activer votre compte développeur avec Resabooking

Une fois que vous avez bien parcouru la documentation de l’API, l’étape suivante est d’activer votre compte développeur. Cela vous permettra d’effectuer des requêtes et de synchroniser les données de Resabooking avec votre site WordPress.

Pour cela, vous devrez contacter l’équipe de Resabooking afin d’obtenir deux éléments essentiels :

  • Une clé utilisateur : qui servira à authentifier les requêtes que vous effectuerez depuis votre site.
  • Une clé partenaire : qui permet d’associer votre compte développeur à l’API et d’accéder à vos données d’hébergements.

Ces deux clés sont indispensables pour que la connexion entre votre site WordPress et l’API de Resabooking fonctionne correctement.

Une fois ces informations obtenues, vous serez prêt à interagir avec l’API et à commencer l’intégration de vos hébergements, disponibilités et autres données directement sur votre site.

N’oubliez pas, cette étape est importante pour assurer une connexion fluide et sécurisée entre Resabooking et WordPress, garantissant ainsi une mise à jour automatique et continue des informations de réservation sur votre site.

Créer un type de publication personnalisé "Hébergement" sur WordPress

Pour organiser efficacement vos hébergements sur votre site WordPress, nous allons créer un type de publication personnalisé intitulé « Type d’hébergement« .

Pour cela, nous utiliserons l’extension ACF (Advanced Custom Fields), qui permet de structurer vos données de manière flexible.

Étape 1 : Créer le type de publication personnalisé

Dans votre tableau de bord WordPress, rendez-vous sur les types de publication dans ACF et créez-en un nouveau.

Pour une configuration simple, nous allons conserver uniquement le titre et la miniature.

Création du type de publication "Types d'hébergement" pour pouvoir créer les types sur WordPress avec Resabooking

👉 Astuce : Cochez la case « Configuration avancée« , car nous en aurons besoin pour les prochaines étapes.

Étape 2 : Paramétrer les options générales

Dans l’onglet « Général« , cochez les cases suivantes :

  • Titre : permet d’ajouter un nom à chaque hébergement.
  • Image mise en avant : affiche une photo pour chaque hébergement.
  • Extrait : utile si vous souhaitez ajouter une courte description.

Vous pouvez également cocher « Éditeur » si vous souhaitez ajouter du contenu plus détaillé pour chaque type d’hébergement.

Réglages générales pour le nouveau type de publication créé à travers ACF.

Étape 3 : Ajuster les libellés et la visibilité

Dans l’onglet « Libellés« , vous pouvez laisser les traductions automatiques, rien de spécial à changer ici.

Personnalisation des libellés du nouveau type de post avec ACF

Dans l’onglet « Visibilité« , deux éléments sont à configurer :

  • Icône de menu : choisissez une icône pour identifier facilement votre nouveau type de publication.
  • Position du menu : définissez où votre nouveau type de publication apparaîtra dans le menu d’administration (par exemple, 21 = juste après l’onglet « Pages »).
Réglage de la visibilité du type de post afin de l'ajouter au dessous de "Pages"

Étape 4 : Configurer l'URL et les permaliens

Selon vos besoins, voici les deux options possibles :

  • Si vous ne souhaitez pas créer de page dédiée pour chaque hébergement et simplement rediriger vers Resabooking, choisissez l’option « Aucun permalien« .
  • Si vous voulez créer du contenu spécifique pour chaque hébergement (descriptions, images, etc.), laissez les paramètres par défaut.
Réglage ACF pour empêcher la création de lien automatique du nouveau type de publication.

Étape 5 : Gérer l'API REST

Dans l’onglet « REST API« , l’activation dépend de votre utilisation :

  • Si vous n’avez pas besoin d’interagir avec l’API WordPress, désactivez-la.
  • Si vous avez ajouté du contenu à votre type de publication et que vous souhaitez utiliser Gutenberg, activez l’API, car Gutenberg repose sur cette technologie pour fonctionner.
Désactivation de l'API WordPress pour ce type de publication

Et voilà, vous avez maintenant créé un nouveau type de publication personnalisé dans WordPress ! 🎉

Exemple du rendu sur l'admin WordPress après la création du type de publication "Type d'hébergement"

Ce type de contenu structuré facilitera la gestion de vos hébergements, et nous sommes prêts à passer à l’ajout des champs complémentaires pour enrichir les informations.

Ajouter des champs personnalisés pour votre type de publication "Hébergement"

Pour enrichir votre type de publication « Hébergement », nous allons ajouter un champ personnalisé qui permettra de rediriger facilement vos visiteurs vers Resabooking pour consulter les locations disponibles.

Pour garder les choses simples au départ, nous allons ajouter un seul champ : un champ de lien intitulé « URL Resabooking« .

Ce champ stockera l’URL qui mènera directement à la page de réservation pour ce type d’hébergement.

Étape 1 : Créer un groupe de champs personnalisé

Dans votre tableau de bord WordPress, dirigez-vous vers « ACF > Groupe de champs » et créez un nouveau groupe appelé « Type d’hébergement« .

Ce groupe contiendra tous les champs personnalisés que vous ajouterez à ce type de publication.

Étape 2 : Ajouter le champ "URL Resabooking"

Créez un champ intitulé « URL Resabooking« , qui sera de type lien. Ce champ permettra de stocker l’URL vers Resabooking pour chaque hébergement.

👉 Astuce : Dans l’onglet « Validation« , vous pouvez rendre ce champ obligatoire pour vous assurer que chaque type d’hébergement dispose bien d’un lien de redirection.

Création de champ personnalisé avec ACF pour le type de publication "Type d'hébergement" afin de récupérer l'url correspondante de Resabooking

Étape 3 : Associer le groupe de champs à votre type de publication

Dans les réglages de votre groupe de champs, ajoutez une règle d’association pour lier ce groupe de champs à votre nouveau type de publication « Type d’hébergement« .

Cela garantit que ce champ personnalisé apparaîtra uniquement dans vos types d’hébergements.

Association du groupe de champs avec le type de publication "Type d'hébergement"

Étape 4 : Vérifier dans le type de publication

Allez maintenant dans votre type de publication « Types d’hébergements » et créez une nouvelle publication.

Vous verrez apparaître le champ « URL Resabooking« , ainsi que l’extrait et l’image mise en avant que nous avons configurés précédemment.

Résultat lors de la création d'un nouveau type d'hébergement avec le présence du titre, de l'extrait, de l'image mise en avant et de l'url Resabooking

Et voilà, votre type de publication est désormais enrichi d’un champ de lien personnalisé, ce qui vous permet de rediriger les visiteurs vers Resabooking en quelques clics !

Synchronisation automatique des nouveaux hébergements depuis Resabooking

Pour simplifier la gestion de vos hébergements, nous allons mettre en place une synchronisation automatique des nouveaux types d’hébergement depuis Resabooking.

Cette méthode vous permettra de récupérer en un clic toutes les nouvelles informations directement dans votre site WordPress, sans avoir à effectuer des mises à jour manuelles.

Étape 1 : Ajouter le code de récupération automatique

Nous allons utiliser un extrait de code pour intégrer cette fonctionnalité à votre thème enfant.

Voici comment configurer le système pour synchroniser vos hébergements avec l’API de Resabooking.

				
					function resabooking_setup(){
      // La clé de l'utilisateur (Token User) - la donnée à sécuriser
      $cle_utilisateur = "XXXXX";
      // La clé du partenaire (Clé secrète) - utilisée pour générer le hachage HMAC
      $cle_partenaire = "XXXX";

      // https://sandbox.resa-booking.com/v1/
      $url = "https://api.resa-booking.com/v1/";
      $origin = "votreorigine";

      // ID client de votre compte resabooking : https://online.resa-booking.com/control/modificar_profil.php
      // Cette valeur est nécessaire pour créer l'url dynamiquement
      $id_est = 1234;

      // La clé du type de publication créé
      $cpt = "type-hebergement";

      // La clé du champ ACF
      $acf_url = "url_resabooking";

      try {
          $response = wp_remote_request( $url . 'setup', array(
              'method'      	=> 'GET',
              'headers'		=> array(
                  'Content-Type' => "application/json",
                  'Origin' => $origin,
                  'Authorization' => 'Bearer ' . hash_hmac("sha256", $cle_utilisateur, $cle_partenaire)
              ),
              'timeout'       => 25
          ) );

          if( is_a($response, "WP_Error") ) {
              throw new Exception( $response->get_error_message() );
          } else if( $response['response']['code'] != 200 ) {
              throw new Exception( $response["body"] );
          }

          $types_hebergement = (json_decode($response['body']))->setup->accomodation;
          foreach ($types_hebergement as $type_hebergement) {
              $type_hebergement_token = $type_hebergement->accomodation_token;
              $type_hebergement_name = ucfirst(mb_strtolower($type_hebergement->accomodation_name_translate->french));
              $type_hebergement_url = "https://online.resa-booking.com/front/list.php?id_est=" . $id_est . "&type=" . $type_hebergement_token;

              // Permet de vérifier si l'hébergement existe déjà
              $post = new WP_Query( array(
                  'post_type'         => $cpt,
                  'post_status'       => 'any',
                  'posts_per_page'    => 1,
                  'meta_query' 		=> [
                      [
                          "key" => $acf_url,
                          "value" => $type_hebergement_url
                      ]
                  ]
              ) );

              if( ! $post->have_posts() ){
                  // Création des hébergements en brouillon avec le nom récupérer depuis Resabooking
                  $post_id = wp_insert_post(array(
                      'post_title'    => $type_hebergement_name,
                      'post_status'   => 'draft',
                      'post_type'     => $cpt,
                  ));

                  if($post_id != 0) {
                      update_field( $acf_url, $type_hebergement_url, $post_id );
                  }
              }
          }

      } catch (\Throwable $th) {
          throw new Exception( $th->getMessage() );
      }
  }
				
			

Étape 2 : Ajouter un bouton pour lancer la synchronisation

Pour rendre l’importation simple, nous allons ajouter un bouton dans le menu d’administration de vos types d’hébergement.

Ce bouton lancera la fonction de récupération automatique.

				
					 global $pagenow;
  if( $pagenow == "edit.php" && isset( $_GET[ "post_type" ] ) && $_GET[ "post_type" ] == "type-hebergement" ) {
      
      // Permet d'ajouter un bouton en haut de la page de vos types d'hébergement
      add_action( 'manage_posts_extra_tablenav', function( $which ) {
          if( $which == "top" ){
              submit_button( __( 'Récupération des nouveaux types d\'hébergement de Resabooking' ), '', "import-rb", false );
          }
      });
    
      // Appel la fonction setup créée précedemment
      add_action( 'pre_get_posts', function( $query ) {
          if( ! isset( $_GET[ "import-rb" ] ) || ! $query->is_main_query() ) return;
          resabooking_setup();
          // Redirection pour raffraichir la page après l'importation
          wp_redirect( admin_url('edit.php?post_type=type-hebergement') );
          exit;
      } );
  }
				
			

Résultat : Automatisation réussie 🎉

Une fois cette configuration en place, vous verrez un bouton d’importation dans la page de gestion de vos hébergements WordPress.

En cliquant dessus, la récupération des nouveaux types d’hébergement depuis Resabooking s’effectuera automatiquement.

Présence du bouton permettant de récupérer les nouveaux types d'hébergement automatiquement depuis Resabooking
Apparition des types d'hébergements après avoir cliqué sur le bouton de récupération automatique depuis Resabooking
Exemple du contenu d'un type d'hébergement après la récupération. On voit notamment la présence de l'url de Resabooking pour pouvoir rediriger vers ce lien

Ce script utilise WP_Query pour vérifier si un type d’hébergement existe déjà dans votre base de données avant de l’ajouter.

Une fois importés, vous pourrez ajouter manuellement les informations complémentaires (extraits, images, etc.) pour chaque hébergement.

Personnaliser la mise en page sur votre site WordPress

Maintenant que vos hébergements sont bien synchronisés, il est temps de personnaliser la mise en page pour les afficher élégamment sur votre site WordPress.

La manière dont vous allez organiser ces informations dépendra des extensions et du thème que vous utilisez.

Dans ce guide, nous allons nous concentrer sur Elementor Pro, un outil puissant que j’utilise régulièrement en tant qu’expert Elementor pour la création de sites web.

Étape 1 : Créer une carte d’hébergement dans Elementor

Nous allons commencer par concevoir une carte d’hébergement qui affichera le titre, l’image et l’extrait de chaque type d’hébergement, avec un lien cliquable redirigeant vers Resabooking.

Exemple de la carte/card à créer sur le site WordPress avec Elementor.

Pour débuter, allez dans « Modèles > Constructeur de thème » depuis le menu admin de WordPress.

Survolez l’onglet « Boucle » à gauche, puis cliquez sur le petit « + » pour créer un nouveau modèle de boucle.

Elementor Builder s’ouvrira alors, vous permettant de créer votre mise en page.

Étape 2 : Configurer la prévisualisation

Pour voir à quoi ressemblera la carte avec les données réelles, cliquez sur « Réglages de Boucle ».

Ensuite, dans la section de gauche, changez la configuration pour prévisualiser un de vos types d’hébergement.

Barre du haut du builder Elementor avec mise en avant du bouton "Réglages de boucle"
Configuration du builder Elementor pour utiliser les informations d'un type d'hébergement créé.

Étape 3 : Reproduire la structure de la carte

Ensuite, en utilisant les outils d’Elementor, recréez une carte d’hébergement qui affichera :

  • Le titre de l’hébergement. 🏷️
  • L’image mise en avant. 🖼️
  • L’extrait que vous avez configuré dans le type de publication. ✍️

Voici un exemple de structure à reproduire :

Résultat de la carte/card avec Elementor

Vous pouvez bien sûr personnaliser le design selon vos goûts pour correspondre à l’esthétique de votre site.

Étape 4 : Ajouter le lien Resabooking

Pour que la carte soit cliquable et redirige vers Resabooking, cliquez sur le conteneur parent de votre carte.

Dans la section « Mise en page > Options supplémentaires », changez la balise HTML pour mettre un lien. 🔗

Ensuite, cliquez sur l’icône « Balises dynamiques » et sélectionnez le champ ACF où vous avez stocké l’URL Resabooking.

Options supplémentaires pour rendre la carte cliquable en changeant la balise HTML
Résultat après la bonne configuration du module Elementor sur WordPress

Étape 5 : Ajouter la grille sur une page

Une fois votre carte prête, créez une nouvelle page avec Elementor et insérez le module « Grille de boucle ».

Sélectionnez ensuite la boucle que vous avez créée pour afficher automatiquement tous les types d’hébergement synchronisés.

Fonctionnalités supplémentaires à exploiter avec Resabooking

Au-delà de l’intégration de base, Resabooking propose plusieurs fonctionnalités supplémentaires qui peuvent enrichir l’expérience utilisateur sur votre site WordPress.

Ces outils vous permettent d’aller plus loin dans la gestion des réservations et d’offrir des services encore plus complets à vos visiteurs.

Formulaire de recherche de disponibilités

L’une des fonctionnalités les plus intéressantes est la possibilité de créer un formulaire de recherche pour vérifier les disponibilités des locations entre deux dates spécifiques.

Cela permet aux utilisateurs de voir rapidement quels hébergements sont disponibles pour les dates souhaitées, améliorant ainsi leur expérience de navigation et de réservation.

Pour mettre en place cette fonctionnalité, vous pouvez utiliser la route suivante : https://{url_api}/availability/{token_rental}/

Cette API vous permet de récupérer en temps réel les disponibilités pour un type d’hébergement spécifique, directement depuis Resabooking.

Récupération des réservations effectuées

Vous pouvez également récupérer une liste des réservations déjà effectuées via l’API.

Cela peut être utile pour afficher un calendrier des réservations à vos utilisateurs, ou pour suivre les réservations depuis l’administration de votre site WordPress.

La route pour cette fonctionnalité est : https://{url_api}/booking/

Avec ces options supplémentaires, vous pouvez créer une expérience de réservation encore plus riche et personnalisée pour vos clients.

Vous avez désormais tous les outils en main pour intégrer et exploiter au maximum Resabooking sur votre site WordPress.

Besoin d'un coup de main pour mettre en place Resabooking sur votre WordPress ?

Photo de profil du compte Google d'Anthony Letizia
Photo de profil du compte Google de Sarah Carle
Photo de profil du compte Google de Damien Verdillon
Photo de profil du compte Google de Sylvaine Montagnat
Photo de profil du compte Google d'alexis Schweitzer
Photo de profil de moi (Cédric Chevillard) concernant la partie prise de contact pour mon service de création de site internet à Grenoble