Shortcode & intégration

Ajoutez le widget de réservation sur n'importe quelle page avec un seul shortcode. Le constructeur remplit les ID Square à partir des noms.

Shortcode de base

Ajoutez ceci à n'importe quelle page, article ou zone de widgets qui accepte les shortcodes :

[square_booking]

Le widget charge vos services Square, disponibilités et checkout en ligne — sans iframe vers la page Square.

L'alias historique [sqb_booking] continue de fonctionner.

Constructeur de shortcode

Dans Réglages → Square Booking → Booking flow, le Shortcode builder liste vos services et votre personnel par nom et remplit les ID. Choisissez un thème ou gardez Site default, puis copiez le [square_booking …] généré.

Attributs

`theme`

Surcharge le préréglage du site (onglet Appearance) pour cette instance seulement. Valeurs : luxury, card, flat, square-classic. Omettez l'attribut pour garder le défaut du site (Luxury tant que vous n'avez pas changé Appearance).

[square_booking theme="square-classic"]

Voir Apparence pour le rendu de chaque préréglage.

`service_id`

Présélectionne un service avec l'ID d'item catalogue Square (le service lui-même), pas l'ID d'une variation. Le constructeur insère la bonne valeur.

[square_booking service_id="SERVICE_ITEM_ID"]

Quand un service est présélectionné, la première étape est masquée. La description du service s'affiche au-dessus des options (si les descriptions sont activées). S'il n'a qu'une variation, le widget saute les options et ouvre le calendrier.

`staff_id`

Assigne les réservations à un membre d'équipe via son ID Square. Le sélecteur de personnel est alors sauté.

[square_booking staff_id="TEAM_MEMBER_ID"]

Exemple combiné

[square_booking theme="card" service_id="SERVICE_ITEM_ID" staff_id="TEAM_MEMBER_ID"]

Conseils de placement

Utilisez un modèle pleine largeur pour le mobile.
Placez le shortcode au-dessus de la ligne de flottaison sur les pages d'annonces.
Le widget ne défile pas automatiquement au chargement de la page. Il ne défile que lorsque le visiteur change d'étape.
Évitez un cache agressif — voir Dépannage.
Dans l'éditeur de blocs, ajoutez un bloc Shortcode et collez [square_booking].

Modes d'affichage

Par défaut, le widget s'affiche dans la page. mode l'ouvre plutôt dans une fenêtre depuis un bouton : [square_booking mode="modal" button_label="Réserver"] pour une fenêtre centrée, mode="drawer" pour un panneau latéral, ou mode="floating" pour un bouton flottant. Les données Square ne se chargent qu'à l'ouverture.

Tout bouton ou lien portant l'attribut data-square-booking-open ouvre la fenêtre, y compris les boutons Elementor et Gutenberg (ajoutez-le en attribut personnalisé). Ajoutez data-service-id, data-staff-id ou data-location-id pour présélectionner. button_label="" masque le bouton du plugin.

mode="modal" : le widget s'ouvre dans une fenêtre, ici sur l'étape du lieu.

Dans Booking flow → Display, vous pouvez aussi afficher un bouton de réservation flottant sur toutes les pages et ajouter une étape « membre de l'équipe » après le service. Avec plusieurs emplacements activés (voir Configuration Square), location_id="…" fixe le lieu et saute cette étape.

Booking flow → Display : étape membre de l'équipe, bouton flottant, modes.

Lien vers un service

Ajoutez ?sqb_service=…&sqb_staff=…&sqb_location=… à l'URL de la page de réservation pour les présélectionner, et sqb_open=1 pour ouvrir la fenêtre au chargement. Les ID inconnus sont ignorés.