Documentation

Exemples de Code

Exemples pratiques d'intégration du widget Restaurant Manager Pro.

1. Installation Basique

L'exemple le plus simple pour démarrer :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon Restaurant</title>
</head>
<body>
  <h1>Bienvenue</h1>
  
  <button onclick="openReservationModal()">
    Réserver une table
  </button>

  <script>
    window.RESTAURANT_CONFIG = {
      code: 'MONRESTAURANT2025',
      primaryColor: '#D4AF37',
      backgroundColor: '#2C2C2C'
    };
  </script>
  <script src="https://widget.restaurantmanagerpro.fr/widget.js"></script>
</body>
</html>

2. Intégration React

Utilisation dans une application React :

import { useEffect } from 'react';

export default function ReservationButton() {
  useEffect(() => {
    // Configuration
    window.RESTAURANT_CONFIG = {
      code: 'MONRESTAURANT2025',
      primaryColor: '#D4AF37',
      backgroundColor: '#2C2C2C'
    };

    // Charger le script
    const script = document.createElement('script');
    script.src = 'https://widget.restaurantmanagerpro.fr/widget.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <button 
      onClick={() => window.openReservationModal()}
      className="btn-primary"
    >
      Réserver une table
    </button>
  );
}

3. Intégration Next.js

Avec Next.js App Router :

'use client';

import { useEffect } from 'react';
import Script from 'next/script';

export default function ReservationWidget() {
  useEffect(() => {
    window.RESTAURANT_CONFIG = {
      code: 'MONRESTAURANT2025',
      primaryColor: '#D4AF37',
      backgroundColor: '#2C2C2C'
    };
  }, []);

  return (
    <>
      <button onClick={() => window.openReservationModal()}>
        Réserver
      </button>
      <Script 
        src="https://widget.restaurantmanagerpro.fr/widget.js"
        strategy="lazyOnload"
      />
    </>
  );
}

4. WordPress

Ajoutez ce code dans votre thème WordPress :

<!-- Dans header.php ou footer.php -->
<script>
  window.RESTAURANT_CONFIG = {
    code: 'MONRESTAURANT2025',
    primaryColor: '#D4AF37',
    backgroundColor: '#2C2C2C'
  };
</script>
<script src="https://widget.restaurantmanagerpro.fr/widget.js"></script>

<!-- Dans votre page/article -->
<button onclick="openReservationModal()">
  Réserver une table
</button>

5. Plusieurs Restaurants

Si vous gérez plusieurs restaurants sur le même site :

<div class="restaurants">
  <div class="restaurant">
    <h2>Restaurant Paris</h2>
    <button onclick="openReservation('PARIS2025')">
      Réserver
    </button>
  </div>
  
  <div class="restaurant">
    <h2>Restaurant Lyon</h2>
    <button onclick="openReservation('LYON2025')">
      Réserver
    </button>
  </div>
</div>

<script>
  function openReservation(code) {
    window.RESTAURANT_CONFIG = {
      code: code,
      primaryColor: '#D4AF37',
      backgroundColor: '#2C2C2C'
    };
    openReservationModal();
  }
</script>
<script src="https://widget.restaurantmanagerpro.fr/widget.js"></script>

6. Bouton Personnalisé Avancé

<style>
  .reservation-btn {
    background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
    color: #000;
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  
  .reservation-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.6);
  }
  
  .reservation-btn:active {
    transform: translateY(-1px);
  }
</style>

<button class="reservation-btn" onclick="openReservationModal()">
  <span>📅</span>
  <span>Réserver une table</span>
</button>

7. Intégration avec Analytics

Tracker les ouvertures du widget :

<button onclick="trackAndOpenReservation()">
  Réserver
</button>

<script>
  function trackAndOpenReservation() {
    // Google Analytics
    if (typeof gtag !== 'undefined') {
      gtag('event', 'reservation_modal_opened', {
        'event_category': 'Reservations',
        'event_label': 'Widget Opened'
      });
    }
    
    // Facebook Pixel
    if (typeof fbq !== 'undefined') {
      fbq('track', 'InitiateCheckout');
    }
    
    // Ouvrir le widget
    openReservationModal();
  }
</script>

8. Thème Clair (Light Mode)

Configuration pour un site avec fond clair :

<script>
  window.RESTAURANT_CONFIG = {
    code: 'MONRESTAURANT2025',
    primaryColor: '#2C5F2D',      // Vert foncé
    backgroundColor: '#FFFFFF'     // Fond blanc
  };
</script>

<style>
  /* Ajuster les textes pour le mode clair */
  #reservation-modal h2,
  #reservation-modal label {
    color: #2C2C2C !important;
  }
  
  #reservation-modal input,
  #reservation-modal select {
    border: 1px solid #E0E0E0 !important;
    color: #2C2C2C !important;
  }
</style>

9. Appel API Direct

Créer une réservation via l'API :

fetch('https://api.restaurantmanagerpro.fr/api/save-reservation', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    restaurantCode: 'MONRESTAURANT2025',
    name: 'Jean Dupont',
    email: 'jean@example.com',
    phone: '+33612345678',
    date: '2026-01-15',
    time: '19:00',
    guests: 4,
    notes: 'Table près de la fenêtre'
  })
})
.then(response => response.json())
.then(data => {
  console.log('Réservation créée:', data);
})
.catch(error => {
  console.error('Erreur:', error);
});

Prochaines Étapes