Squarespace est apprécié des restaurateurs pour la qualité de ses templates visuels et sa simplicité. Ajouter un vrai bouton Réserver qui pointe vers un widget de réservation transforme un site vitrine en outil de conversion opérationnel. L'intégration est simple et fonctionne sur tous les plans Squarespace, sans compétence technique requise.
Ce guide détaille les deux méthodes possibles (bouton lien via bloc Bouton et widget embed via bloc Code), avec instructions pas à pas et dépannage des cas fréquents.
Les deux méthodes d'intégration Squarespace
| Méthode | Description | Cas d'usage |
|---|---|---|
| Bloc Bouton (lien externe) | Bouton visible sur le site qui redirige vers le widget de réservation dans un nouvel onglet | Simplicité maximale, header/menu de navigation, plans Squarespace basiques |
| Bloc Code (embed) | Le formulaire de réservation apparaît directement dans une page Squarespace, sans redirection | Page dédiée Réservation, expérience client premium, conversion optimale |
Contrairement à d'autres plateformes, Squarespace propose le bloc Code sur tous ses plans, y compris le plan Personal de base. Aucun surcoût pour intégrer un widget embed.
Méthode 1 · Ajouter un bouton dans le header de navigation
Le meilleur emplacement pour un bouton Réserver Squarespace, c'est le header (en-tête du site), qui apparaît en haut de toutes les pages. Squarespace prévoit un emplacement dédié aux boutons dans cette zone.
1Récupérer l'URL du widget de réservation
Depuis le tableau de bord de votre logiciel de réservation, copier l'URL publique de votre widget. Elle ressemble à :
2Accéder aux réglages du Header
Se connecter à Squarespace, ouvrir le site, cliquer sur « Design » dans le menu latéral gauche, puis « Site Header » (en-tête du site).
3Activer le bouton du header
Dans les options du Site Header, activer la section « Buttons ». Cliquer sur « + » pour ajouter un bouton primaire.
4Configurer le bouton
Renseigner :
- Label : « Réserver une table » (plus explicite que juste « Réserver »)
- URL : coller l'URL de réservation copiée à l'étape 1
- Ouvrir dans un nouvel onglet : cocher (préserve la navigation sur le site)
5Personnaliser le style
Ouvrir le « Style Editor » (éditeur de style) via Design puis Buttons. Choisir couleur de fond, couleur du texte, taille, forme. Recommandation : couleur qui contraste fortement avec l'arrière-plan du site.
6Publier
Cliquer sur « Save » puis « Publish » en haut à droite. Le bouton apparaît immédiatement en haut de toutes les pages du site. Tester le fonctionnement depuis un autre navigateur.
Temps total : 5 à 8 minutes pour un premier essai, 3 à 4 minutes pour un utilisateur habitué à Squarespace.
Méthode 2 · Widget embed sur une page dédiée
Cette méthode permet d'afficher le widget de réservation directement dans une page Squarespace. Le client reste sur le site pendant toute l'expérience, ce qui améliore la conversion.
1Récupérer le code embed
Depuis le tableau de bord du logiciel de réservation, copier le code embed HTML fourni. Il ressemble à :
2Créer une page dédiée « Réservation »
Dans Squarespace, aller dans « Pages », cliquer sur « + » à côté de « Main Navigation » (menu principal), choisir « Blank Page » (page vierge). Nommer la page « Réservation ».
3Ajouter un bloc Code
Ouvrir la nouvelle page en édition. Cliquer sur « + » pour ajouter un bloc, faire défiler jusqu'à trouver « Code » (icône avec balises HTML). Cliquer pour insérer le bloc.
4Coller le code embed
Dans la fenêtre d'édition du bloc Code, coller le code embed récupéré à l'étape 1. Vérifier que le mode est bien « HTML » (par défaut sur Squarespace) et non « Markdown ». Cliquer sur « Apply » (Appliquer).
5Ajuster la largeur du bloc
Squarespace permet de redimensionner le bloc en cliquant sur ses bords. Étendre le bloc sur toute la largeur de la page (12 colonnes de la grille Squarespace) pour maximiser la visibilité du widget.
6Publier et tester
Cliquer sur « Save » puis « Publish ». Ouvrir l'URL de la nouvelle page dans un autre navigateur pour vérifier que le widget s'affiche correctement. Tester une réservation complète pour valider le flux entier.
Ajouter un lien vers cette page « Réservation » dans le menu de navigation principal (via Pages puis glisser-déposer). Combiner ce lien avec un bouton dans le header rend le lien Réserver visible depuis deux endroits différents, ce qui maximise la conversion.
Personnaliser globalement le style des boutons
Squarespace centralise le style des boutons dans le Style Editor global. Cela garantit la cohérence graphique sur tout le site, mais impose une seule apparence pour tous les boutons.
Pour accéder au Style Editor :
- Design puis Style Editor
- Choisir la section « Buttons » (ou « Primary Buttons » selon la version)
- Modifier couleur de fond, couleur du texte, typographie, taille, forme (arrondi ou droit), épaisseur des bordures
- Appliquer et publier
Pour personnaliser individuellement un bouton (par exemple faire ressortir le bouton Réserver avec une couleur différente des autres), il faut ajouter un bloc Code CSS complémentaire dans les paramètres avancés du site, ce qui demande une compétence technique de base.
Où placer le bouton Réserver sur le site Squarespace
Trois emplacements incontournables pour maximiser la conversion :
- Header (en-tête) du site : bouton visible en haut de toutes les pages. Emplacement le plus rentable.
- Section hero de la page d'accueil : gros bouton visible dès l'arrivée sur le site, avec un texte incitatif (« Réserver votre table »).
- Page dédiée « Réservation » avec widget embed complet, accessible depuis le menu de navigation principal.
Dépannage · les 4 problèmes fréquents
Vérifier que le bloc utilisé est bien « Code » et non « Markdown » ou « Text ». Le bloc Code accepte le HTML brut. Vérifier aussi que le mode d'affichage est bien « HTML » dans les paramètres du bloc.
Vérifier que la section « Buttons » du Site Header est bien activée (Design puis Site Header). Sur certains templates Squarespace anciens, il faut basculer sur un template plus récent pour bénéficier de la fonctionnalité bouton dans le header.
Modifier l'attribut height dans le code embed (par exemple passer de height="600" à height="900"). Le bloc Code Squarespace s'ajuste à la hauteur définie dans le code de l'iframe.
Utiliser le mode aperçu mobile de Squarespace (icône smartphone en haut de l'éditeur). Ajuster la taille du bouton via le Style Editor si besoin. Un bouton doit faire minimum 44 pixels de hauteur pour être facilement cliquable au doigt.
Bonus · connecter le bouton Réserver Google Business Profile
En parallèle du site Squarespace, activer le bouton Réserver de Google Business Profile est un levier de conversion majeur. Ce bouton apparaît directement dans la fiche Google du restaurant, à côté d'Itinéraire et Appeler. La connexion se fait via le même logiciel de réservation, en 5 à 10 minutes.
Voir également les 10 erreurs Google Business qui coûtent 30 % de trafic.
Ce qu'il faut retenir
Squarespace facilite l'intégration d'un bouton Réserver pour un restaurant, avec deux méthodes qui fonctionnent sur tous les plans (y compris Personal de base). Le bouton lien dans le header est le levier numéro 1 de conversion, à mettre en place en priorité (5 à 8 minutes). Le widget embed sur une page dédiée offre une expérience client premium, avec une conversion 15 à 25 % supérieure au simple lien. Le Style Editor global de Squarespace garantit la cohérence graphique des boutons. Trois emplacements sont incontournables : header du site, section hero de la page d'accueil, page dédiée « Réservation ». En cas de problème d'affichage, vérifier le type de bloc (Code et non Markdown), le mode HTML activé, la hauteur définie dans l'iframe. Un logiciel de réservation moderne fournit à la fois l'URL et le code embed, plus une intégration Google Business Profile pour maximiser tous les canaux d'acquisition.
Widget de réservation compatible Squarespace en 5 minutes
Brewbook fournit URL et code embed prêts à copier-coller dans Squarespace. Widget responsive mobile, apparence personnalisable, aucun surcoût quel que soit votre plan Squarespace. Essai gratuit 30 jours, sans carte bancaire.
Essayer gratuitement →