QR Booking Page Generator
Help Guide · v1.0 · English / Français
1. Overview
The QR Booking Page Generator Add-On lets you create branded and personalized booking and QR code pages. You can create as many pages as you want, each with a specific purpose or targeted audience. Set a title, some text, link an image and you are done. Each page has its own QR code which can be renewed automatically after a delay — making it a secure, must-scan on-site booking page. Design a page to book with any or a specific store, a specific service and staff, or using service and store tags.
2. Getting Started — Account Setup
You can use the QR Booking Page Generator add-on as a web app or Chrome extension.
2.1 Registering a New Account
- Open the app — you will see the Auth screen with three tabs: Sign in, Register, and Reset.
- Click the Register tab.
- Enter your Merchant API Key — this is your Store identifier, found in the Booxi back-office under My Business → Details.
- Enter a Password and confirm it in the Confirm Password field.
- Click Register.
2.2 Signing in
- From the Auth screen, make sure the Sign in tab is selected (it is the default).
- Enter your Merchant API Key and Password.
- (Optional) Check Remember Me to pre-fill your API key on future visits.
- Click Sign in.
After a successful sign in you are taken directly to My Pages.
2.3 Resetting Your Password
If you can't remember your password, you can reset it to a temporary one sent by email (to the email associated with the store in Booxi Back-Office).
- From the Auth screen, click the Reset tab.
- Enter your Merchant API Key and click Reset.
- A password reset email is sent to the address associated with your account.
- Follow the instructions in the email to change this temporary password.
3. My Pages
The My Pages screen lists all your booking pages at a glance.
3.1 Page Cards
Each page card displays:
| Element | Description |
|---|---|
| Thumbnail | Cover photo (if set) or a color placeholder |
| Page name | Your internal label |
| Date | When the page was created |
| Toggle switch | Instantly enable or disable the page |
| Checkbox | Selects the page for bulk operations (see §9) |
| Copy QR link | Copies the QR display URL to clipboard |
| Booking Page link | Opens the live booking landing page in a new tab |
| Edit | Opens the page editor |
Active pages have a colored left border and the enabled switch ON. Type any part of a page name in the search bar at the top of the list to filter pages quickly.
Use the Toggle switch to:
- Enable (ON): The QR code works and the booking landing page is publicly accessible.
- Disable (OFF): The QR URL and booking URL still exist but customers cannot load the page.
3.2 QR Link
Use the QR Link to display the QR Code on a tablet or phone and let customers scan it to book. You can embed it on your website or print it on flyers or posters.
Click Copy QR on any page. The QR link URL is copied to your clipboard. The button briefly displays "Copied!" to confirm.
If you selected to use a rotating QR code, the page will refresh itself when the QR code expires (you can also display a countdown timer).
3.3 Booking Page
Use the Booking Page link to open the live booking landing page. Copy that URL to share it; however, if you are using a rotating QR code, the page URL is only valid until the next QR code rotation.
4. Creating and Editing a Page
Click the + button in the top-right of the list to create a new page. Click Edit on any existing page to modify it.
The page editor is structured into three main tabs:
4.1 Details Tab
Tab: DetailsThe Details tab controls the text content shown on the public booking landing page.
| Field | Required | Description |
|---|---|---|
| Internal Name | ✅ Yes | Your private label for this page — never shown to customers |
| Public Title | No | Large heading shown at the top of the booking page |
| Subtitle | No | Smaller secondary heading below the title |
| Information | No | Rich text body (bold, italic, underline, links, font size) for instructions or promotions |
| CTA Button Label | No | Text for the primary booking button (e.g. "Book Now" / "Réserver") |
4.2 Theme Tab
Tab: ThemeCustomize the visual presentation of your booking page. At the top of the tab, an interactive Live Preview Card reflects your visual adjustments immediately.
Cover Picture
Positioned directly below the live preview card, the Cover Picture section lets you brand your page hero:
- Hosted Image URL: Provide a direct web link to an external image (e.g.
https://...). - File Upload: Upload an image directly by dragging and dropping it into the dropzone or clicking Browse.
- Precedence Rule: An uploaded image file takes precedence over a hosted Image URL if both are provided.
- Reset: Click Reset to remove an uploaded image or clear the URL field.
- Supported File Types: JPEG (
.jpg,.jpeg), PNG (.png), WebP (.webp), GIF (.gif). - Maximum File Size: 5 MB.
- Automatic Optimization: Uploaded images are automatically scaled to a maximum width of 1400px and converted to WebP at 85% quality for ultra-fast mobile loading.
Colors
| Control | Description |
|---|---|
| Card Color | Background color for the central booking card |
| Accent Color | Main brand color used for button and link hover effects, active toggles, and highlights |
| Text Color | Color for body text and descriptive content |
| Background Color | Outer page background color |
| Button Color | Background color for the primary CTA action button |
| Title Color | Color for the public title heading |
Shape
| Control | Options | Description |
|---|---|---|
| Card Shape | Rounded, Square, Pill | Corner roundness of the central booking card container |
| Button Shape | Rounded, Square, Pill | Corner roundness of the CTA action button |
| Card Edge | Shadow, Border, None | Edge styling: elevated drop shadow, subtle border line, or flat edge |
| QR Code Size | 100–1000 px | Display dimension of the generated QR code (default 300 px) |
Fonts
| Control | Description |
|---|---|
| Google Font | Primary web font (Inter, Sora, DM Sans, Roboto, Open Sans, Montserrat, Lato, Poppins, Outfit, Playfair Display, Lora, Space Mono) |
| Fallback Font | System fallback font used if web fonts fail or in offline contexts (Sans-Serif, System UI, Arial, Helvetica, Verdana, Trebuchet MS, Tahoma, Georgia, Times New Roman, Courier New) |
Footer Link
| Control | Description |
|---|---|
| Link Label | Text for an optional footer link (e.g. "Privacy Policy") |
| Link URL | Destination URL for the footer link |
4.3 Configurations Tab
Tab: ConfigurationsManage security, merchant credentials, and Booxi booking parameters in collapsible groups:
QR Code Security
| Control | Default | Description |
|---|---|---|
| Enable Auto QR Renew | Off | Toggle to activate rotating cryptographic tokens for expiring QR codes |
| Renew Interval (minutes) | 15 | Duration in minutes before the QR token expires and refreshes |
| Show countdown timer | On | Displays an animated timer ring on the QR display screen |
/qr/<uid>) rather than sharing the Booking Page URL directly.Merchant API Key Override
| Field | Description |
|---|---|
| Merchant API Key | Overrides your default Booxi API key for this specific page. Leave empty to use the account default set in Settings. |
Booking Parameters
| Control | Description |
|---|---|
| Enable Store Selection | When ON, the booking flow starts with a location/store picker |
| Location Tags | (Visible when Store Selection is enabled) Booxi location tags to filter visible stores |
| Service Tags | Booxi service tags to filter visible services |
| Pre-select Service | Choose a specific service from Booxi to skip the service selection step |
| Pre-select Staff Member | (Only available after a service is chosen) Lock the appointment to a specific staff member |
4.4 Saving Your Page
Click the Save button in the top-right toolbar. On success, you are returned to My Pages where your page appears in the list.
5. The QR Display Page
URL: <your-domain>/qr/<uid>
This page is designed to be displayed on a screen or tablet at your reception or point of sale. It shows:
- The public title.
- A high-resolution QR code pointing to the current booking page.
- (If rotation is enabled) A live countdown showing the time until the next refresh.
6. The Booking Page
URL: <your-domain>/book/<token>
This is the customer-facing landing page opened after scanning the QR code:
- (Optional) A full-width cover picture.
- The public title and subtitle.
- The information block (your formatted rich text).
- The CTA button — opens the Booxi booking widget.
- (Optional) A secondary footer link (e.g. Privacy Policy).
All colors, font, fallback typography, card shape, and card edge are driven by the Theme Tab (§4.2). The Booxi booking widget opens as an overlay and guides the customer through the booking flow based on the Configurations Tab (§4.3).
7. Default Theme
Menu → Default Theme
Set a default theme that is applied to every new page you create. The fields are identical to the per-page Theme tab (§4.2). After saving, a green "Saved!" confirmation appears briefly.
8. Settings — Changing Your Password
Menu → Settings
| Field | Description |
|---|---|
| Current Password | Your existing password |
| New Password | Must be at least 6 characters |
| Confirm New Password | Must match New Password |
Click Update Password. A success message appears in green for 3 seconds.
9. Bulk Actions (Renew & Delete)
From My Pages, you can act on multiple pages at once.
- Tick the checkbox in the top-right corner of each page card you want to select.
- Click the ☰ menu (hamburger icon) in the header.
- Choose one of the bulk actions:
Renew QR Codes: Forces an immediate token rotation for all selected pages, invalidating currently-active booking URLs.
Delete Selected: Deletes the selected pages with confirmation.
10. Disconnecting / Sign Out
- Click the ☰ menu (hamburger icon) in the header.
- Click Sign Out.
Your session is terminated, local tokens are cleared, and you are returned to the Sign In screen.
11. Frequently Asked Questions
Q: My QR code points to the wrong page / opens an error.
A: The booking page URL uses a rotating token. Make sure you are displaying the QR Link URL (via Copy QR), not the Booking Page URL directly. The QR link is permanent; the booking token rotates.
Q: The Service and Staff dropdowns are empty in the editor.
A: The lists of services and staff are pulled from Booxi using your Merchant API Key. Check that the Merchant API Key set in Settings (or overridden on the page in Configurations) matches your Booxi store.
Q: I enabled token rotation. How do I know if it's working?
A: Open the QR display page in a browser. If a countdown timer is visible, rotation is active. Wait for it to reach zero — the QR code will fade out, refresh, and the timer will reset.
Q: Can I have multiple pages for the same Booxi account?
A: Yes. You can create as many booking pages as you need — for different services, promotions, or store locations. Each page has its own QR code, theme, and booking parameters.
Q: What happens if a customer scans the QR code after a token rotation?
A: The QR display page automatically regenerates the QR code smoothly before expiry, so there is virtually no window where the code is invalid.
Q: How do I change the email address used for password resets?
A: Email delivery uses the email set in your Booxi account. Changing that email in Booxi will send future password reset emails to the new address.
QR Booking Page Generator · v1.0
Générateur de page QR Booking
Guide d'aide · v1.0 · Français / English
1. Vue d'ensemble
L'extension Générateur de page QR Booking vous permet de créer des pages de réservation et des codes QR personnalisés et à votre image. Vous pouvez créer autant de pages que vous le souhaitez, chacune ayant un objectif spécifique ou ciblant un public particulier. Définissez un titre, un texte descriptif, associez une image et le tour est joué. Chaque page dispose de son propre code QR qui peut être renouvelé automatiquement après un délai — ce qui en fait une page de réservation sécurisée avec scan obligatoire sur place. Concevez une page pour réserver avec n'importe quelle boutique ou un établissement précis, un service et un employé spécifiques, ou en utilisant des tags de service et de lieu.
2. Pour commencer — Configuration du compte
Vous pouvez utiliser l'extension Générateur de page QR Booking en tant qu'application web ou extension Chrome.
2.1 Inscription d'un nouveau compte
- Ouvrez l'application — l'écran d'authentification s'affiche avec trois onglets : Connexion, S'inscrire et Réinitialiser.
- Cliquez sur l'onglet S'inscrire.
- Saisissez votre Clé API Marchand — il s'agit de l'identifiant de votre boutique, disponible dans le back-office Booxi sous Mon entreprise → Détails.
- Saisissez un Mot de passe et confirmez-le dans le champ Confirmer le mot de passe.
- Cliquez sur Créer un compte.
2.2 Connexion
- Depuis l'écran d'authentification, assurez-vous que l'onglet Connexion est sélectionné (sélectionné par défaut).
- Saisissez votre Clé API Marchand et votre Mot de passe.
- (Facultatif) Cochez Se souvenir de moi pour pré-remplir votre clé API lors de vos prochaines visites.
- Cliquez sur Se connecter.
Après une connexion réussie, vous êtes directement redirigé vers Mes pages.
2.3 Réinitialiser votre mot de passe
Si vous avez oublié votre mot de passe, vous pouvez le réinitialiser avec un mot de passe temporaire envoyé par courriel (à l'adresse associée à la boutique dans le back-office Booxi).
- Depuis l'écran d'authentification, cliquez sur l'onglet Réinitialiser.
- Saisissez votre Clé API Marchand et cliquez sur Réinitialiser le mot de passe.
- Un courriel de réinitialisation de mot de passe est envoyé à l'adresse associée à votre compte.
- Suivez les instructions contenues dans le courriel pour modifier ce mot de passe temporaire.
3. Mes pages
L'écran Mes pages répertorie l'ensemble de vos pages de réservation en un coup d'œil.
3.1 Fiches de page
Chaque fiche de page affiche :
| Élément | Description |
|---|---|
| Vignette | Photo de couverture (si configurée) ou couleur par défaut |
| Nom de la page | Votre libellé interne |
| Date | Date de création de la page |
| Interrupteur d'activation | Activez ou désactivez instantanément la page |
| Case à cocher | Sélectionne la page pour les actions groupées (voir §9) |
| Copier le lien QR | Copie l'URL de la page d'affichage QR dans le presse-papiers |
| Page de réservation | Ouvre la page de réservation en direct dans un nouvel onglet |
| Modifier | Ouvre l'éditeur de page |
Les pages actives présentent une bordure gauche colorée et l'interrupteur d'activation sur ON. Tapez n'importe quelle partie du nom d'une page dans la barre de recherche en haut de la liste pour filtrer rapidement vos pages.
Utilisez l'interrupteur pour :
- Activer (ON) : Le code QR fonctionne et la page de réservation est accessible au public.
- Désactiver (OFF) : L'URL du QR et l'URL de réservation existent toujours, mais les clients ne peuvent pas charger la page.
3.2 Lien QR
Utilisez le Lien QR pour afficher le code QR sur une tablette ou un téléphone et permettre aux clients de le scanner pour réserver. Vous pouvez l'intégrer sur votre site web ou l'imprimer sur des dépliants ou affiches.
Cliquez sur Copier QR sur n'importe quelle page. L'URL du lien QR est copiée dans votre presse-papiers. Le bouton affiche brièvement « Copié ! » pour confirmer.
Si vous avez choisi d'utiliser un code QR rotatif, la page s'actualise automatiquement à l'expiration du code QR (vous pouvez également afficher un compte à rebours).
3.3 Page de réservation
Utilisez le lien de la page de réservation pour ouvrir la page d'accueil de réservation en direct. Copiez cette URL pour la partager ; toutefois, si vous utilisez un code QR rotatif, l'URL de la page n'est valide que jusqu'à la prochaine rotation du code QR.
4. Créer et modifier une page
Cliquez sur le bouton + en haut à droite de la liste pour créer une nouvelle page. Cliquez sur Modifier sur une page existante pour la modifier.
L'éditeur de page est structuré en trois onglets principaux :
4.1 Onglet Détails
Onglet : DétailsL'onglet Détails contrôle le contenu textuel affiché sur la page de réservation publique.
| Champ | Requis | Description |
|---|---|---|
| Nom interne | ✅ Oui | Votre libellé privé pour cette page — jamais affiché aux clients |
| Titre public | Non | Titre principal affiché en haut de la page de réservation |
| Sous-titre | Non | Sous-titre secondaire plus petit sous le titre principal |
| Information | Non | Corps de texte enrichi (gras, italique, souligné, liens, taille de police) pour les instructions ou promotions |
| Libellé du bouton CTA | Non | Texte du bouton d'action principal (ex. : « Réserver » / « Book Now ») |
4.2 Onglet Thème
Onglet : ThèmePersonnalisez la présentation visuelle de votre page de réservation. En haut de l'onglet, une **carte d'aperçu en direct** reflète immédiatement vos ajustements visuels.
Image de couverture
Positionnée directement sous la carte d'aperçu en direct, la section Image de couverture vous permet de personnaliser l'en-tête de votre page :
- URL de l'image : Fournissez un lien web direct vers une image externe (ex. :
https://...). - Téléversement d'image : Téléversez une image directement en la glissant-déposant dans la zone prévue ou en cliquant sur Ouvrir fichiers.
- Règle de priorité : Une image téléversée a priorité sur une URL d'image hébergée si les deux sont fournies.
- Réinitialiser : Cliquez sur Réinitialiser pour supprimer une image téléversée ou effacer le champ URL.
- Formats de fichier acceptés : JPEG (
.jpg,.jpeg), PNG (.png), WebP (.webp), GIF (.gif). - Taille maximale du fichier : 5 Mo.
- Optimisation automatique : Les images téléversées sont automatiquement redimensionnées à une largeur maximale de 1400px et converties au format WebP à une qualité de 85 % pour un chargement ultra-rapide sur mobile.
Couleurs
| Contrôle | Description |
|---|---|
| Couleur de la carte | Couleur d'arrière-plan de la carte centrale de réservation |
| Couleur d'accent | Couleur principale de la marque utilisée pour les effets de survol des boutons et liens, les commutateurs actifs et les mises en valeur |
| Couleur du texte | Couleur du corps de texte et du contenu descriptif |
| Couleur de fond | Couleur d'arrière-plan extérieure de la page |
| Couleur du bouton | Couleur d'arrière-plan du bouton d'action CTA principal |
| Couleur du titre | Couleur du titre public principal |
Forme
| Contrôle | Options | Description |
|---|---|---|
| Forme de la carte | Arrondi, Carré, Pilule | Arrondi des coins du conteneur central de la carte de réservation |
| Forme du bouton | Arrondi, Carré, Pilule | Arrondi des coins du bouton d'action CTA |
| Bordure de la carte | Ombre, Bordure, Aucun | Style de bordure : ombre portée élégante, ligne de bordure subtile ou contour plat |
| Taille du code QR | 100–1000 px | Dimension d'affichage du code QR généré (300 px par défaut) |
Polices
| Contrôle | Description |
|---|---|
| Police Google | Police web principale (Inter, Sora, DM Sans, Roboto, Open Sans, Montserrat, Lato, Poppins, Outfit, Playfair Display, Lora, Space Mono) |
| Police de secours | Police système de remplacement utilisée si les polices web échouent ou hors-ligne (Sans-Serif, System UI, Arial, Helvetica, Verdana, Trebuchet MS, Tahoma, Georgia, Times New Roman, Courier New) |
Pied de page
| Contrôle | Description |
|---|---|
| Libellé du lien | Texte d'un lien de bas de page facultatif (ex. : « Politique de confidentialité ») |
| URL du lien | URL de destination du lien de bas de page |
4.3 Onglet Configurations
Onglet : ConfigurationsGérez la sécurité, les identifiants marchand et les paramètres de réservation Booxi dans des sections repliables :
Sécurité du code QR
| Contrôle | Valeur par défaut | Description |
|---|---|---|
| Activer le renouvellement auto | Désactivé (Off) | Basculez pour activer les jetons cryptographiques rotatifs pour les codes QR à durée limitée |
| Intervalle de renouvellement (min) | 15 | Durée en minutes avant que le jeton QR n'expire et ne s'actualise |
| Afficher le compte à rebours | Activé (On) | Affiche un anneau de compte à rebours animé sur l'écran d'affichage QR |
/qr/<uid>) plutôt que de partager directement l'URL de la page de réservation.Remplacement de la clé API Marchand
| Champ | Description |
|---|---|
| Clé API Marchand | Remplace votre clé API Booxi par défaut pour cette page spécifique. Laissez vide pour utiliser la clé par défaut du compte définie dans Paramètres. |
Paramètres de réservation
| Contrôle | Description |
|---|---|
| Activer la sélection de boutique | Si ACTIVÉ, le parcours de réservation commence par un sélecteur de lieu/boutique |
| Tags de lieu | (Visible lorsque la sélection de boutique est activée) Tags de lieu Booxi pour filtrer les boutiques visibles |
| Tags de service | Tags de service Booxi pour filtrer les services visibles |
| Présélectionner un service | Choisissez un service Booxi précis pour ignorer l'étape de sélection du service |
| Présélectionner un employé | (Disponible uniquement après la sélection d'un service) Associe le rendez-vous à un employé spécifique |
4.4 Sauvegarder votre page
Cliquez sur le bouton Sauvegarder dans la barre d'outils en haut à droite. En cas de succès, vous revenez à Mes pages où votre page apparaît dans la liste.
5. La page d'affichage QR
URL : <votre-domaine>/qr/<uid>
Cette page est conçue pour être affichée sur un écran ou une tablette à votre accueil ou point de vente. Elle présente :
- Le titre public.
- Un code QR haute résolution pointant vers la page de réservation active.
- (Si la rotation est activée) Un compte à rebours en direct indiquant le temps restant avant la prochaine actualisation.
6. La page de réservation
URL : <votre-domaine>/book/<token>
Il s'agit de la page d'accueil vue par le client après avoir scanné le code QR :
- (Facultatif) Une image de couverture pleine largeur.
- Le titre public et le sous-titre.
- Le bloc d'information (votre texte enrichi mis en forme).
- Le bouton CTA — ouvre le widget de réservation Booxi.
- (Facultatif) Un lien secondaire de bas de page (ex. : Politique de confidentialité).
Toutes les couleurs, polices, typographies de secours, formes et bordures de carte sont déterminées par l'Onglet Thème (§4.2). Le widget de réservation Booxi s'ouvre en superposition et guide le client tout au long du parcours de réservation selon l'**Onglet Configurations** (§4.3).
7. Thème par défaut
Menu → Thème par défaut
Définissez un thème par défaut qui s'applique à chaque nouvelle page que vous créez. Les champs sont identiques à ceux de l'onglet Thème (§4.2). Après l'enregistrement, un message vert « Thème sauvegardé avec succès ! » s'affiche brièvement.
8. Paramètres — Modifier votre mot de passe
Menu → Paramètres
| Champ | Description |
|---|---|
| Mot de passe actuel | Votre mot de passe actuel |
| Nouveau mot de passe | Doit contenir au moins 6 caractères |
| Confirmer le nouveau | Doit correspondre au nouveau mot de passe |
Cliquez sur Mettre à jour le mot de passe. Un message de succès apparaît en vert pendant 3 secondes.
9. Actions groupées (Renouveler et supprimer)
Depuis Mes pages, vous pouvez effectuer des actions sur plusieurs pages à la fois.
- Cochez la case à cocher dans le coin supérieur droit de chaque fiche de page que vous souhaitez sélectionner.
- Cliquez sur le menu ☰ (icône hamburger) dans l'en-tête.
- Choisissez l'une des actions groupées :
Renouveler les codes QR : Force une rotation immédiate des jetons pour toutes les pages sélectionnées, invalidant ainsi les URL de réservation actuellement actives.
Supprimer la sélection : Supprime les pages sélectionnées avec confirmation.
10. Déconnexion
- Cliquez sur le menu ☰ (icône hamburger) dans l'en-tête.
- Cliquez sur Déconnexion.
Votre session prend fin, les jetons locaux sont effacés et vous êtes redirigé vers l'écran de connexion.
11. Foire aux questions (FAQ)
Q : Mon code QR pointe vers la mauvaise page ou affiche une erreur.
R : L'URL de la page de réservation utilise un jeton rotatif. Assurez-vous d'afficher l'URL du lien QR (via Copier QR), et non l'URL directe de la page de réservation. Le lien QR est permanent ; le jeton de réservation change périodiquement.
Q : Les listes déroulantes des services et employés sont vides dans l'éditeur.
R : Les listes de services et d'employés proviennent de Booxi grâce à votre clé API Marchand. Vérifiez que la clé API Marchand configurée dans les Paramètres (ou remplacée dans les Configurations de la page) correspond bien à votre boutique Booxi.
Q : J'ai activé la rotation des jetons. Comment savoir si elle fonctionne ?
R : Ouvrez la page d'affichage QR dans un navigateur. Si un compte à rebours est visible, la rotation est active. Attendez qu'il atteigne zéro — le code QR s'estompera, s'actualisera et le compte à rebours se réinitialisera.
Q : Puis-je avoir plusieurs pages pour le même compte Booxi ?
R : Oui. Vous pouvez créer autant de pages de réservation que vous le souhaitez — pour différents services, promotions ou établissements. Chaque page possède son propre code QR, son thème et ses paramètres de réservation.
Q : Que se passe-t-il si un client scanne le code QR après une rotation de jeton ?
R : La page d'affichage QR régénère automatiquement le code QR de manière fluide avant son expiration, il n'y a donc pratiquement aucun intervalle où le code est invalide.
Q : Comment modifier l'adresse courriel utilisée pour la réinitialisation du mot de passe ?
R : L'envoi des courriels utilise l'adresse configurée dans votre compte Booxi. La modification de cette adresse dans Booxi permettra d'envoyer les futurs courriels de réinitialisation à la nouvelle adresse.
Générateur de page QR Booking · v1.0