Réservation de table sur Squarespace

Les options propres à Squarespace

Squarespace propose un produit de rendez-vous destiné aux salons et aux consultants. Il réserve une personne pour un créneau, ce qui n'est pas le fonctionnement d'un restaurant : vous avez vingt tables de tailles différentes, des durées d'occupation qui dépendent de la taille du groupe, et une cuisine qui ne peut pas installer tout le monde à 19h30. L'autre voie des utilisateurs de Squarespace est le widget d'une place de marché, qui apporte des frais par convive et un abonnement mensuel. Voir notre comparatif avec OpenTable pour ce que cela coûte.

Nabsie est conçu autour des tables, des durées d'occupation et du rythme, et il est gratuit jusqu'à 50 réservations par mois, puis £14.99 par mois, sans frais par couvert.

Ajouter le formulaire de réservation à une page

1. Ouvrez la page dans l'éditeur et cliquez sur Modifier.
2. Ajoutez un bloc à l'endroit où vous voulez le formulaire et choisissez Code.
3. Laissez le type sur HTML et collez votre code d'intégration :

<script src="https://my.nabsie.com/embed.js" data-venue="your-venue"></script>

4. Cliquez sur Appliquer, puis sur Enregistrer.

Le formulaire apparaît dans le bloc et s'agrandit au fil de la saisie du client. Les blocs de code sont disponibles sur toutes les formules Squarespace actuelles. Si vous avez une très ancienne formule qui n'en dispose pas, utilisez le bloc Embed avec la version iframe de la page du widget.

Un bouton « Réserver une table » dans l'en-tête

La plupart des restaurants préfèrent un bouton dans la navigation plutôt qu'un formulaire enfoui dans une page. Le plus simple est d'ajouter un bouton d'en-tête dans Styles du site, ou un lien de navigation, qui pointe vers votre page de réservation à l'adresse https://your-venue.nabsie.com/. Réglez-le pour qu'il s'ouvre dans un nouvel onglet. Aucun code n'est nécessaire et cela fonctionne aussi dans les menus mobiles.

Si vous préférez que le bouton ouvre le formulaire en superposition sur votre page, collez la version bouton du script dans un bloc Code dans le pied de page ou sur la page :

<script src="https://my.nabsie.com/embed.js" data-venue="your-venue" data-mode="button" data-label="Book a table" data-colour="#0f5c4c"></script>

Changez la couleur pour l'accorder à votre site. Pour qu'un bouton Squarespace existant ouvre la superposition, il faudrait lui donner la classe nabsie-open, ce que Squarespace n'autorise pas sur ses propres boutons ; le bouton généré ou un simple lien sont donc les solutions pratiques.

Assortissez-la à votre site

Dans votre tableau de bord Nabsie, définissez une couleur d'accent et importez votre logo. Le formulaire les utilise. Son fond est transparent, il prend donc la couleur de la section où il se trouve. Si votre site utilise une section sombre, placez le formulaire dans une section claire ; il est conçu pour les fonds clairs.

Fluid Engine et affichage mobile

Avec Fluid Engine (Squarespace 7.1), un bloc de code peut être redimensionné librement. Donnez-lui toute la largeur de la section sur mobile, et environ 600 px sur ordinateur, pour que le formulaire ne soit pas comprimé. Vérifiez l'affichage mobile dans l'éditeur : le formulaire est pensé d'abord pour le téléphone et devrait s'afficher correctement sans retouche.

À surveiller

• Ne collez pas le code dans un bloc Texte. Il s'afficherait comme du texte. Il doit s'agir d'un bloc Code.
• L'injection de code de Squarespace (dans les paramètres) sert aux scripts valables pour tout le site. Vous pouvez y mettre le script du bouton pour avoir un bouton sur chaque page, mais pour un formulaire sur une seule page, utilisez un bloc de code.
• Si vous utilisez le bandeau de cookies de Squarespace en mode strict, l'intégration n'est pas affectée, car elle ne dépose aucun cookie sur votre domaine.