Créer une page de destination permettant de réserver en ligne

Astuces d'affaires    |   Mai 20, 2020

Cet article vous aidera à créer une page de destination (ou landing page) permettant de proposer la réservation en ligne en peu de temps.

Vous pouvez mettre en place ce dispositif, si vous utilisez la réservation en ligne pour une offre spéciale, un évènement ou une campagne marketing.

Ajouter la réservation en ligne à votre page de destination (ou landing page) en quelques étapes :

  • Créer un bouton à la page de destination (landing page)
  • Ajouter 3 javascripts sur la page unbounce
  • Copier l’ID de votre bouton et le remplacer dans un premier java script
  • Copier votre clé d’API et la remplacer dans un second java script
  • Publier la page et vous avez terminé

Si vous ne savez pas comment créer une page de destination unbounce, vous pouvez démarrer par ce guide : Créer une page de destination unbounce 

Ajouter le module de réservation en ligne booxi à un bouton

Dès finalisation de la création de votre page et l’ajout d’un bouton permettant l’ouverture de la pop up de réservation booxi, suivez ces étapes :

  1. Depuis le créateur de votre page, sélectionnez Add New JavaScript dans les options Javascripts en bas de page.
  2. Sélectionnez le Placement comme Head, et copiez ceci : <script src= »https://www.booxi.com/api/booknow.js » async= » »></script>
  3. Ajoutez un deuxième Java script, avec le Placement comme After Body Tag, et copiez ceci :

    <script>

    var bnHandler = null;

    window.bxApiInit = function () {

    bnHandler = booxiController.configure({

    apiKey: « YOUR_API_KEY_HERE »

    });

    };

    </script>

  4. Remplacez YOUR_API_KEY_HERE avec votre clé d’API, que vous trouverez dans votre compte booxi (Mon entreprise, Détails. Défiler en bas jusque clé API).
  5. Ajoutez un dernier JavaScript avec Placement comme After Body End Tag, et copiez ceci :

    <script>

    $(‘#YOUR_BUTTON_ID’).click(function(){

    booxiController.book();

    });

    </script>

  6. Remplacez  YOUR_BUTTON_ID avec l’ID de votre bouton unbounce. Vous pouvez le trouver en cliquant sur votre bouton (dans le créateur) pour ouvrir les Properties. Défilez vers le bas jusqu’à Element Metadata et trouver votre ID.
    Maintenant, publiez votre page pour tester votre bouton de réservation.

Plus de fonctionnalités et ressources

booxi offre une large gamme de fonctionnalités et ainsi créer un bouton de réservation avec des scénarios variés.

  • Commencer avec la localisation des magasins
  • Filtrer la liste des magasins
  • Filtrer la liste des services
  • Commencer avec un service ou une catégorie pré-sélectionnée
  • Pousser de les données clients à la réservation
  • Et bien plus

Si vous désirez ouvrir la réservation avec d’autres fonctionnalités comme la localisation magasin (bookingFlow), pousser les données clients (customRequest), filtrer les services (serviceTags), utiliser le script ci-dessous à la place de celui présenté à l’étape 5.

<script>

$(‘#YOUR_BUTTON_ID’).click(function(){

var props = {

apiKey: « YOUR_API_KEY_HERE »,

bookingFlow: « locations »,

customRequest: « YOUR DATA »,

serviceTags: « YOUR TAGS »

}

booxiController.open(null, props);

});

</script>

Assurez-vous d’utiliser le symbole guillemets (double quotes) dans  votre code, car parfois copier/coller transforme ce symbole. Si votre compte booxi est sur un serveur Européen, utiliser booxi.eu

<script src= »https://www.booxi.eu/api/booknow.js » async= » »></script>

Pour tester votre clé d’API et les diverses fonctionnalités supportée par la réservation, essayez notre générateur de code :
https://www.booxi.com/api/test_cases/generator#/
https://www.booxi.eu/api/test_cases/generator#/

Margaux Duchatelet
Margaux Duchatelet
Configurer la réservation en ligne pour des rendez-vous par téléphone ou vidéoconférence
Astuces d'affaires   |   Mai 20, 2020
Setting Up Online Booking for personal shopper appointment in store
Astuces d'affaires   |   Mai 15, 2020
Prêt à augmenter vos revenus?
14 jours gratuits |Aucune carte de crédit requise
Démarrez