Guide d'Installation

Installation du Widget

Méthode 1 : Installation Simple (Recommandée)

Ajoutez ces lignes avant la balise </body> de votre site :

<!-- Bouton de réservation -->
<button onclick="openReservationModal()" class="btn-reservation">
  Réserver une table
</button>

<!-- Configuration du widget -->
<script>
  window.RESTAURANT_CONFIG = {
    code: 'VOTRE_CODE_RESTAURANT',
    primaryColor: '#D4AF37',
    backgroundColor: '#2C2C2C',
    title: 'Réserver une Table'
  };
</script>

<!-- Chargement du widget -->
<script src="https://widget.restaurantmanagerpro.fr/widget.js"></script>

Méthode 2 : Installation WordPress

Dans votre thème WordPress, ajoutez le code dans footer.php :

<?php
// Dans footer.php, avant wp_footer()
?>
<script>
  window.RESTAURANT_CONFIG = {
    code: '<?php echo get_option('restaurant_code'); ?>',
    primaryColor: '#D4AF37',
    backgroundColor: '#2C2C2C'
  };
</script>
<script src="https://widget.restaurantmanagerpro.fr/widget.js"></script>
<?php wp_footer(); ?>

Méthode 3 : Installation React/Next.js

Créez un composant React pour le widget :

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

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

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

Configuration

Options de Configuration

OptionTypeDescription
codestringCode unique de votre restaurant (obligatoire)
primaryColorstringCouleur principale (hex, rgb, ou nom)
backgroundColorstringCouleur de fond du modal
titlestringTitre du modal (optionnel)

Exemples de Personnalisation

// Style Italien (or et noir)

window.RESTAURANT_CONFIG = {
  code: 'VOTRE_CODE',
  primaryColor: '#D4AF37',
  backgroundColor: '#2C2C2C',
  title: 'Prenota un tavolo'
};

// Style Moderne (bleu et blanc)

window.RESTAURANT_CONFIG = {
  code: 'VOTRE_CODE',
  primaryColor: '#3B82F6',
  backgroundColor: '#FFFFFF',
  title: 'Réserver'
};

// Style Élégant (bordeaux et crème)

window.RESTAURANT_CONFIG = {
  code: 'VOTRE_CODE',
  primaryColor: '#8B0000',
  backgroundColor: '#FFF8DC',
  title: 'Réservation'
};

Vérification

Pour vérifier que le widget est correctement installé :

  1. Ouvrez votre site web dans un navigateur
  2. Ouvrez la console développeur (F12)
  3. Vérifiez qu'il n'y a pas d'erreurs
  4. Cliquez sur le bouton de réservation
  5. Le modal devrait s'ouvrir avec le formulaire

Dépannage

❌ Le widget ne s'affiche pas

Vérifiez que le script est bien chargé et que RESTAURANT_CONFIG est défini avant le script.

❌ "Restaurant non trouvé"

Vérifiez que le code restaurant est correct (sensible à la casse).

❌ Le modal ne s'ouvre pas

Vérifiez la console pour les erreurs JavaScript. Assurez-vous que openReservationModal() est appelé correctement.

Prochaines Étapes