Guide d'intégration

Intégrez la réservation en ligne sur votre site

Choisissez la méthode qui correspond à vos besoins et compétences techniques.

Quelle option choisir ?

  • Page hébergée — Vous n'avez pas de site web ou souhaitez une solution immédiate
  • Plugin WordPress — Vous avez un site WordPress et souhaitez une intégration native
  • Widget iframe — Vous avez un site et voulez y intégrer le formulaire
  • Bouton flottant — Vous voulez un bouton "Réserver" sur toutes vos pages
  • API publique — Vous êtes développeur et voulez des intégrations personnalisées
Facile · Tout le monde

Page de réservation hébergée

Votre page de réservation est déjà prête. Partagez simplement le lien.

Déjà prêt, rien à faire

Votre page de réservation existe déjà avec une adresse personnalisée (ex: votre-restaurant.couverty.ch/reservation). Vous pouvez la partager immédiatement.

Pourquoi utiliser cette option ?

Aucune configuration

Pas de code à copier, pas de technique

Design automatique

Adapté aux couleurs de votre restaurant

Toujours à jour

Horaires, capacités, fermetures synchronisés

Mobile-friendly

Optimisé pour smartphones et tablettes

Astuce : créer un QR Code

Imprimez un QR Code pour vos supports physiques

Vos clients peuvent scanner le code avec leur smartphone pour accéder directement au formulaire de réservation. Idéal pour : cartes de visite, menus, flyers, affiches en vitrine...

Intermédiaire · Web designers, développeurs

Widget intégré (iframe)

Intégrez le formulaire de réservation directement dans une page de votre site web.

Le widget s'adapte automatiquement à la largeur de votre page et redimensionne sa hauteur selon le contenu. Vous pouvez le placer dans n'importe quelle page de votre site.

Code d'intégration

Copiez ce code et collez-le à l'endroit souhaité :

html
<!-- Widget de Réservation Couverty -->
<div id="couverty-reservation-widget"></div>
<script>
(function() {
  var iframe = document.createElement('iframe');
  iframe.src = 'https://votre-domaine.ch/embed/votre-slug';
  iframe.style.width = '100%';
  iframe.style.minHeight = '200px';
  iframe.style.border = 'none';
  iframe.style.overflow = 'hidden';
  iframe.setAttribute('scrolling', 'no');
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('title', 'Formulaire de réservation');

  window.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'widget:resize') {
      iframe.style.height = event.data.height + 'px';
    }
  });

  var container = document.getElementById('couverty-reservation-widget');
  if (container) container.appendChild(iframe);
})();
</script>

Où trouver mon code personnalisé ?

Le code ci-dessus est un exemple. Votre code personnalisé avec votre URL de restaurant est disponible dans les réglages d'intégration.

Installation sur WordPress

  1. 1

    Connectez-vous à WordPress

    Accédez à votre tableau de bord WordPress
  2. 2

    Éditez votre page de réservation

    Créez une nouvelle page ou éditez une page existante
  3. 3

    Ajoutez un bloc HTML personnalisé

    Gutenberg : Cherchez "HTML personnalisé" dans les blocs
    Éditeur classique : Passez en mode "Texte"
  4. 4

    Collez le code et publiez

    Collez le code copié depuis les réglages, puis publiez la page

Autres plateformes

Wix

Ajoutez un élément "Embed HTML" et collez le code

Squarespace

Ajoutez un bloc "Code" et collez le code d'intégration

Webflow

Utilisez l'élément "Embed" pour ajouter du code HTML

HTML simple

Collez le code directement dans votre fichier HTML

Facile · Utilisateurs WordPress

Plugin WordPress

Intégrez menu, boissons, menu du jour et réservation en quelques clics avec notre plugin officiel.

Pourquoi utiliser le plugin ?

Le plugin ajoute des blocs Gutenberg et shortcodes natifs WordPress. Vos données sont récupérées automatiquement via l'API Couverty, avec un cache intégré pour des performances optimales.

Installation

Télécharger le plugin Couverty

Fichier .zip — Compatible WordPress 6.0+ / PHP 7.4+

  1. 1

    Installez le plugin

    Dans WordPress : Extensions → Ajouter → Téléverser une extension → Sélectionnez le .zip
  2. 2

    Activez et configurez

    Activez le plugin puis allez dans le menu Couverty dans la barre latérale
  3. 3

    Connectez votre compte

    Collez votre clé API et cliquez sur "Test Connection" — le slug se remplit automatiquement
  4. 4

    Ajoutez les blocs

    Dans l'éditeur, cherchez "Couverty" dans les blocs Gutenberg ou utilisez les shortcodes

Blocs et shortcodes disponibles

Menu (carte des plats)

[couverty_menu]

Boissons

[couverty_boissons]

Menu du jour

[couverty_menu_du_jour]

Réservation (widget)

[couverty_reservation]

Chaque bloc est aussi disponible dans l'éditeur Gutenberg avec des options visuelles. Le bouton de réservation flottant se configure directement dans les réglages du plugin.

Intermédiaire · Web designers, développeurs

Bouton flottant

Un bouton 'Réserver' apparaît en bas à droite de toutes les pages de votre site.

Comment ça fonctionne ?

Un bouton discret apparaît en bas à droite de l'écran. Quand un visiteur clique dessus, une fenêtre s'ouvre avec le formulaire de réservation. Le visiteur peut réserver sans quitter votre page.

Code d'intégration

Une seule ligne de code à ajouter sur votre site :

html
<script src="https://votre-domaine.ch/widget-floating.js?slug=votre-slug" async></script>

Installation

Où placer ce code ?

  1. 1

    Copiez le code personnalisé

    Depuis la page des réglages d'intégration

  2. 2

    Collez avant la balise </body>

    Cette balise se trouve à la fin de chaque page HTML

  3. Terminé !

    Le bouton apparaîtra automatiquement sur toutes les pages

Où trouver </body> selon votre plateforme

  • WordPress : Dans le fichier footer.php de votre thème, ou utilisez un plugin comme "Insert Headers and Footers"
  • Wix : Paramètres → Avancé → Code personnalisé → Body - End
  • Squarespace : Paramètres → Avancé → Injection de code → Footer
  • Webflow : Project Settings → Custom Code → Footer Code

Besoin de plus de contrôle ?

Consultez notre documentation API complète pour créer des intégrations personnalisées.

Voir la documentation API

Besoin d'aide pour l'intégration ? Contactez notre support