Comment ajouter un système de réservation WordPress

Ajouter un système de réservation WordPress

Que vous gériez un salon de coiffure à Dakar, un cabinet médical, un espace de coworking ou un service de transport, un système de réservation en ligne élimine les appels téléphoniques et les messages WhatsApp pour la prise de rendez-vous. Vos clients réservent 24h/24, et vous recevez une notification instantanée. Voici comment mettre en place un système de réservation adapté à votre activité.

1. Choisir le bon plugin de réservation

Recommandation : Amelia pour les services avec rendez-vous (salons, cabinets, consultants) ou Simply Schedule Appointments pour les rendez-vous simples type consulting.

2. Configuration avec Amelia

Installation et paramètres initiaux

1. Installez Amelia depuis Extensions → Ajouter
2. Allez dans Amelia → Réglages :
   • Horaires de travail : lundi-vendredi 8h-18h, samedi 9h-14h
   • Durée par défaut : 30 ou 60 minutes selon votre activité
   • Fuseau horaire : Africa/Dakar (GMT+0)
   • Devise : XOF (Franc CFA)
   • Intervalle entre RDV : 15 minutes (temps de nettoyage/préparation)

Créer vos services

Dans Amelia → Services, ajoutez chaque prestation :

Ajouter des employés (optionnel)

Si plusieurs personnes prennent des rendez-vous :

1. Dans Amelia → Employés, ajoutez chaque personne
2. Assignez les services que chaque employé peut effectuer
3. Définissez les horaires individuels (jours de congé, horaires spécifiques)

Intégrer le formulaire de réservation

Utilisez le shortcode Amelia dans n’importe quelle page :

<!-- Formulaire de réservation complet -->
[ameliabooking]

<!-- Réservation pour un service spécifique -->
[ameliabooking service=1]

<!-- Réservation pour une catégorie -->
[ameliabooking category=2]

<!-- Catalogue de services (les clients choisissent) -->
[ameliacatalog]

<!-- Recherche de disponibilité -->
[ameliasearch]

3. Solution sans plugin : formulaire de réservation personnalisé

Pour un système simple sans plugin lourd, voici un formulaire de réservation avec sélection de date/heure :

<form id="reservation-form" class="reservation-form">
  <h3>Réserver un rendez-vous</h3>
  
  <div class="form-group">
    <label>Votre nom *</label>
    <input type="text" name="nom" required placeholder="Prénom Nom">
  </div>
  
  <div class="form-group">
    <label>Téléphone *</label>
    <input type="tel" name="telephone" required placeholder="+221 7X XXX XX XX">
  </div>
  
  <div class="form-group">
    <label>Service souhaité *</label>
    <select name="service" required>
      <option value="">Choisir un service</option>
      <option value="consultation" data-price="15000" data-duration="60">
        Consultation (60 min) — 15 000 FCFA
      </option>
      <option value="suivi" data-price="10000" data-duration="30">
        Suivi (30 min) — 10 000 FCFA
      </option>
      <option value="coaching" data-price="25000" data-duration="90">
        Coaching (90 min) — 25 000 FCFA
      </option>
    </select>
  </div>
  
  <div class="form-row">
    <div class="form-group">
      <label>Date *</label>
      <input type="date" name="date" required min="">
    </div>
    <div class="form-group">
      <label>Heure *</label>
      <select name="heure" required>
        <option value="">Choisir</option>
        <option value="08:00">08:00</option>
        <option value="08:30">08:30</option>
        <option value="09:00">09:00</option>
        <option value="09:30">09:30</option>
        <option value="10:00">10:00</option>
        <option value="10:30">10:30</option>
        <option value="11:00">11:00</option>
        <option value="11:30">11:30</option>
        <option value="14:00">14:00</option>
        <option value="14:30">14:30</option>
        <option value="15:00">15:00</option>
        <option value="15:30">15:30</option>
        <option value="16:00">16:00</option>
        <option value="16:30">16:30</option>
        <option value="17:00">17:00</option>
      </select>
    </div>
  </div>
  
  <div class="form-group">
    <label>Message (optionnel)</label>
    <textarea name="message" rows="3" placeholder="Précisions sur votre demande..."></textarea>
  </div>
  
  <button type="submit" class="btn-reservation">
    Confirmer la réservation
  </button>
  
  <p class="reservation-note">
    Vous recevrez une confirmation par WhatsApp dans les 30 minutes.
  </p>
</form>

<script>
// Définir la date minimum à aujourd'hui
document.querySelector('input[name="date"]').min = 
  new Date().toISOString().split('T')[0];

// Désactiver les dimanches
document.querySelector('input[name="date"]').addEventListener('input', function() {
  var day = new Date(this.value).getDay();
  if (day === 0) { // Dimanche
    alert('Nous sommes fermés le dimanche. Veuillez choisir un autre jour.');
    this.value = '';
  }
});
</script>

/* CSS du formulaire de réservation */
.reservation-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.reservation-form h3 {
  text-align: center;
  margin: 0 0 25px;
  font-size: 24px;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #e94560;
  outline: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.btn-reservation {
  width: 100%;
  padding: 15px;
  background: #e94560;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-reservation:hover { background: #c73550; }

.reservation-note {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-top: 12px;
}

Traitement PHP côté serveur

// Traiter la réservation via AJAX
add_action('wp_ajax_nouvelle_reservation', 'traiter_reservation');
add_action('wp_ajax_nopriv_nouvelle_reservation', 'traiter_reservation');

function traiter_reservation() {
    check_ajax_referer('reservation_nonce', 'nonce');
    
    $nom = sanitize_text_field($_POST['nom']);
    $tel = sanitize_text_field($_POST['telephone']);
    $service = sanitize_text_field($_POST['service']);
    $date = sanitize_text_field($_POST['date']);
    $heure = sanitize_text_field($_POST['heure']);
    $message = sanitize_textarea_field($_POST['message']);
    
    // Créer un post de type réservation
    $reservation_id = wp_insert_post([
        'post_type' => 'reservation',
        'post_title' => $nom . ' — ' . $service . ' — ' . $date,
        'post_status' => 'pending',
    ]);
    
    if ($reservation_id) {
        update_post_meta($reservation_id, '_tel', $tel);
        update_post_meta($reservation_id, '_service', $service);
        update_post_meta($reservation_id, '_date', $date);
        update_post_meta($reservation_id, '_heure', $heure);
        update_post_meta($reservation_id, '_message', $message);
        
        // Envoyer email de notification à l'admin
        $admin_email = get_option('admin_email');
        wp_mail($admin_email, 
            'Nouvelle réservation : ' . $service,
            "Nom : $nom
Tél : $tel
Service : $service
Date : $date à $heure
Message : $message"
        );
        
        wp_send_json_success([
            'message' => 'Réservation confirmée ! Nous vous contacterons sur WhatsApp.',
        ]);
    }
    
    wp_send_json_error(['message' => 'Erreur lors de la réservation.']);
}

4. Synchronisation Google Calendar

Amelia et Simply Schedule supportent la synchronisation bidirectionnelle avec Google Calendar :

1. Créez un projet dans Google Cloud Console
2. Activez l’API Google Calendar
3. Générez des identifiants OAuth 2.0
4. Dans le plugin, entrez le Client ID et Client Secret
5. Autorisez l’accès à votre agenda

Avantage : chaque réservation apparaît automatiquement dans votre Google Agenda, et vos indisponibilités sont synchronisées en temps réel.

5. Notifications automatiques

Email de confirmation au client

Amelia envoie automatiquement des emails. Personnalisez le modèle dans Amelia → Réglages → Notifications :

Objet : Confirmation de votre rendez-vous — {service_name}

Bonjour {customer_firstName},

Votre rendez-vous est confirmé :

📋 Service : {service_name}
📅 Date : {appointment_date}
🕐 Heure : {appointment_startTime}
📍 Lieu : [Votre adresse à Dakar]
💰 Montant : {service_price} FCFA

Pour modifier ou annuler, contactez-nous sur WhatsApp : 
+221 7X XXX XX XX

À bientôt !
{company_name}

Rappel WhatsApp automatique

// Envoyer un rappel WhatsApp 24h avant le RDV
// (nécessite l'API WhatsApp Business)
add_action('amelia_booking_reminder', function($booking) {
    $phone = $booking['customer']['phone'];
    $service = $booking['service']['name'];
    $date = date('d/m/Y', strtotime($booking['appointment']['date']));
    $heure = $booking['appointment']['startTime'];
    
    $message = "Rappel : votre RDV *{$service}* est demain {$date} à {$heure}. "
      . "Confirmez en répondant OK ou contactez-nous pour modifier.";
    
    // Appel API WhatsApp Business
    wp_remote_post('https://graph.facebook.com/v18.0/PHONE_ID/messages', [
        'headers' => [
            'Authorization' => 'Bearer VOTRE_TOKEN',
            'Content-Type' => 'application/json',
        ],
        'body' => json_encode([
            'messaging_product' => 'whatsapp',
            'to' => preg_replace('/[^0-9]/', '', $phone),
            'type' => 'text',
            'text' => ['body' => $message],
        ]),
    ]);
});

6. Paiement en ligne à la réservation

Amelia supporte Stripe et PayPal nativement. Pour le mobile money au Sénégal, ajoutez un bouton de paiement après la confirmation :

<!-- Après confirmation de la réservation -->
<div class="payment-options">
  <h3>Payer maintenant (optionnel)</h3>
  <p>Payez en avance pour garantir votre créneau.</p>
  
  <a href="https://wa.me/221XXXXXXXXX?text=Paiement RDV [service] le [date] - [montant] FCFA" 
    class="btn-pay btn-pay--wave">
    Payer par Wave
  </a>
  
  <p class="payment-note">
    Envoyez le montant au +221 XX XXX XX XX via Wave, 
    puis envoyez la capture d'écran sur WhatsApp.
  </p>
</div>

7. Optimisations pour le Sénégal

• WhatsApp comme canal principal : après chaque réservation, envoyez la confirmation sur WhatsApp plutôt que par email — les gens consultent WhatsApp 50x plus que leur boîte mail
• Créneaux adaptés : tenez compte des heures de prière (13h-14h vendredi) et proposez des créneaux en soirée (18h-20h) pour les professionnels
• Formulaire léger : minimisez le nombre de champs. Nom + téléphone + service + date suffisent. Le reste se discute sur WhatsApp
• Rappels SMS : utilisez l’API Orange SMS pour envoyer des rappels 24h avant — taux d’ouverture de 98% contre 20% pour les emails
• Paiement flexible : proposez le paiement sur place ou par mobile money — ne forcez pas le paiement en ligne qui peut freiner les réservations

Un système de réservation en ligne réduit les no-shows de 30-40% grâce aux rappels automatiques, et libère votre temps en éliminant les allers-retours par téléphone et WhatsApp pour convenir d’un créneau.