HandyCafe Docs
owner

Menu client

Le menu client est la page web publique à handy.cafe/{your-slug}. Les clients y accèdent en scannant le QR code de leur table. Cette page décrit le parcours client de bout en bout afin que vous puissiez l'expliquer au personnel et planifier le déploiement.

Structure de l'URL

Chaque table possède une URL unique de la forme handy.cafe/{cafe-slug}/{table-code}. Le QR code encode cette URL ainsi qu'un jeton à courte durée de vie qui prouve l'authenticité de l'autocollant. Lorsque le client scanne le QR :

  1. Son téléphone ouvre l'URL dans le navigateur par défaut.
  2. La page résout le slug et le code de table via l'API cloud.
  3. Si la table est out_of_order, la page affiche un message d'indisponibilité.
  4. Si la table est idle, la page explique que le personnel n'a pas encore installé le client et lui demande d'appeler un membre du personnel.
  5. Si la table est in_use, la page demande le code de sécurité à 6 chiffres.

Vérification du code de sécurité

Le code de sécurité garantit que seul le client actuellement installé à la table peut passer commande. Il empêche qu'une personne ayant vu le QR sur une photo ou depuis l'extérieur de votre établissement passe des commandes frauduleuses.

Après saisie du code par le client :

  1. L'API valide le code par rapport à la valeur hachée stockée sur la table.
  2. Si le code est valide, une session est créée et un jeton est renvoyé.
  3. Le jeton est stocké dans un cookie (hc_menu_session). Une solution de secours via Bearer token est également conservée dans le stockage local de l'appareil. C'est nécessaire sur Safari iPhone, qui peut bloquer les cookies tiers dans certaines configurations.
  4. Le client est redirigé vers le menu.

La session est valable 24 heures à partir de son émission. Si le client ferme le navigateur et revient sur le même appareil, la session fonctionne toujours et il peut revenir sans nouvelle vérification.

Langues

Le menu prend en charge 24 langues : arabe, allemand, grec, anglais, espagnol, farsi, français, hindi, indonésien, italien, japonais, coréen, malais, polonais, portugais, roumain, russe, thaï, tagalog, turc, ukrainien, ourdou, vietnamien et chinois.

Lors de la première visite, la page examine l'en-tête Accept-Language du navigateur et choisit la meilleure correspondance. Le client peut changer de langue à tout moment avec le sélecteur en haut du menu. La langue choisie est mémorisée pour la session.

Les noms des produits, les descriptions et les ingrédients ne sont pas traduits automatiquement ; ils apparaissent dans la langue que vous avez saisie dans l'éditeur de menu. Les libellés d'interface comme "Add to Cart", "Checkout" et les messages du flux de paiement sont entièrement localisés.

Thème

Le menu prend en charge un thème clair et un thème sombre. Le comportement par défaut dépend de l'appareil : si le système d'exploitation du client est configuré en mode sombre, le menu s'ouvre en mode sombre. Un bouton de changement de thème en haut permet au client de basculer.

En-tête de marque

L'en-tête en haut du menu affiche :

Elément Source
Image d'en-tête Téléversée depuis Paramètres > Cafétéria (facultatif)
Logo Téléversé depuis Paramètres > Cafétéria
Nom d'affichage Issu de votre profil d'établissement
Adresse Issue de votre profil d'établissement (affichée dans le pied de page)
Téléphone Issu de votre profil d'établissement (affiché dans le pied de page)

Personnalisez ces champs pour donner la meilleure impression possible aux clients. Ils reconnaissent votre marque lorsque le menu ressemble à la signalétique physique de votre établissement.

Navigation dans le menu

Le menu est organisé par catégories. Dans une catégorie, les produits s'affichent avec une miniature, un nom, une courte description et un prix.

Toucher un produit ouvre sa fiche. La fiche affiche :

  • La photo complète.
  • La description Markdown.
  • La ligne d'ingrédients.
  • Le badge de temps de préparation (uniquement lorsque Show Prep Time on Menu est activé).
  • Le libellé d'unité si configuré (par exemple "250 ml").
  • Les sélecteurs de variantes pour les groupes de variantes attachés au produit.
  • Le sélecteur de quantité.
  • Un bouton Add to Cart.

Les groupes de variantes obligatoires bloquent le bouton Add to Cart tant que le client n'a pas sélectionné d'option.

Panier

L'icône du panier reste à un emplacement fixe pour que les clients y accèdent depuis n'importe quel écran. Le contenu du panier persiste pendant la navigation dans le site ; passer du panier au menu et revenir ne fait pas perdre les articles.

Le panier permet au client :

  • De modifier la quantité par ligne.
  • De supprimer une ligne.
  • D'ajouter une note facultative.
  • De fournir un numéro de téléphone (facultatif).

Le sous-total, la TVA et le total s'affichent en temps réel.

Passer la commande

L'étape Checkout propose un ou deux modes de paiement selon votre configuration :

Cash

Si le paiement en ligne est désactivé dans vos paramètres, seul Cash s'affiche. Le client confirme la commande et elle est envoyée immédiatement. Il paie le caissier lorsque la commande arrive.

Online (Stripe Checkout)

Si le paiement en ligne est activé, Online apparaît comme option. A l'envoi :

  1. La commande est créée à l'état en attente.
  2. Un client secret Stripe Checkout est renvoyé.
  3. L'interface intégrée Stripe s'ouvre en ligne. Le client saisit ses informations de carte.
  4. Après autorisation réussie, Stripe confirme le débit et la commande passe à l'état payé.
  5. Le client voit la page de succès.

Les paiements échoués ou abandonnés laissent la commande à l'état en attente. Une deuxième tentative peut être effectuée depuis la même session, ou le personnel peut annuler la commande depuis le tableau de bord Orders.

Page de succès

Après un envoi réussi, le client arrive sur une page de reçu qui affiche :

  • Le numéro et l'heure de la commande.
  • Chaque ligne avec la quantité, les variantes et le total de ligne.
  • Le sous-total, la TVA et le total général.
  • Le mode de paiement.
  • L'icône de statut du paiement (en attente pour Cash ; payé pour Online).
  • Un appel à l'action "Place Another Order" qui ramène au menu avec la session intacte.
  • Un lien "Back to Menu".

Sondage du statut de commande

Après l'envoi, la vue de la commande côté client interroge l'endpoint de statut pour refléter les mises à jour de la cuisine. Si votre personnel fait passer un article de preparing à ready, le client voit le badge de la ligne se mettre à jour automatiquement en quelques secondes.

C'est utile pour le retrait en libre-service au comptoir. Le client peut rester à table jusqu'à ce que le menu lui indique que la commande est prête.

Ce que les clients ne peuvent pas faire

  • Les clients ne peuvent pas parcourir le menu sans le code de sécurité. L'étape de vérification est toujours requise.
  • Les clients ne peuvent pas passer de commande pour des tables à l'état idle ou out_of_order.
  • Les clients ne peuvent pas modifier ou annuler une commande après son envoi. L'annulation est une action du personnel depuis le tableau de bord Orders.

Conseils pour une expérience client propre

  • Imprimez des autocollants QR avec le nom du café et une instruction claire comme "Scan to order. Ask staff for the code." Sinon, les clients ratent parfois l'étape de vérification.
  • Gardez les noms de catégories et de produits courts. Les noms trop longs se renvoient sur mobile et poussent les images sous la ligne de flottaison.
  • Téléversez au moins une photo par produit. Les menus riches en images convertissent mieux que les menus texte seul.
  • Activez Show Prep Time on Menu seulement après que votre estimation dynamique a appris. Pendant les 30 premiers jours, la valeur statique peut être trop généreuse ou trop serrée, et les clients le remarquent.
  • Testez vous-même tout le parcours depuis un téléphone avant d'ouvrir aux clients. Scannez un vrai QR, saisissez le code, passez une commande test et vérifiez que la commande apparaît dans votre tableau de bord.