Le widget de réservation et son apparence

Activer le bouton Réserver

Utilisez Ouvrir l'éditeur de thème dans le guide de configuration. Il ouvre les Intégrations d’applications de votre éditeur de thème avec l'intégration Réserver de Rezervito déjà activée : cliquez sur Enregistrer et c'est terminé. Vous pouvez aussi ouvrir vous-même Paramètres du thème → Intégrations d’applications dans l'éditeur de thème et activer Réserver.

C'est la seule chose qui doit être activée. Avec l'intégration activée, un bouton flottant Réserver s'affiche dans un coin de chaque page de votre boutique, et tous les autres boutons Réserver fonctionnent. Il ne s'affiche pas sur la page où le client voit sa réservation : il a déjà réservé, et sur un téléphone il cacherait les boutons de cette page. Tant que le panier latéral, le menu ou la recherche de votre thème est ouvert, il s'efface, pour ne jamais cacher leurs boutons. Si elle est désactivée, aucun ne fonctionne.

L'étape Activez le bouton Réserver du guide de configuration se coche d'elle-même dès que l'intégration est activée dans votre thème publié. Voir Premiers pas.

Les réglages de l'intégration dans l'éditeur de thème :

• Afficher le bouton flottant : activé au départ. Désactivez-le si vous préférez placer vos propres boutons.
• Position : En bas à droite, En bas à gauche, Milieu à droite ou Milieu à gauche.
• Distance du bord et Distance du bas, en pixels : 20 au départ. Avec une position Milieu, la distance du bas descend plutôt le bouton sous le milieu.
• Autre distance du bas sur téléphone : activez-la pour régler la Distance du bas sur téléphone, par exemple pour remonter le bouton au-dessus de la barre Ajouter au panier fixe de votre thème ou d'un bouton de chat.
• Texte du bouton : laissez-le vide pour afficher « Réserver » dans la langue dans laquelle votre client navigue.
• Libellé du champ de notes et Texte indicatif du champ de notes : le texte du champ de notes. Le fait de demander des notes aux clients se règle dans Rezervito, dans Paramètres → Règles de réservation → Coordonnées du client. Laissé vide, le champ affiche un rappel de ne pas écrire de données de santé ou d'autres données sensibles ; avec votre propre texte indicatif, ce rappel s'affiche sous le champ.

D'autres boutons Réserver

Chaque bouton Réserver ouvre la même fenêtre de réservation :

• Le bloc Bouton de réservation. Dans l'éditeur de thème, ajoutez le bloc Bouton de réservation à toute section qui accepte les blocs d'application, par exemple la bannière de votre page d'accueil ou l'en-tête de votre boutique. Ses réglages sont Texte (vide, il affiche « Réserver » dans la langue de votre client) et Alignement : Gauche, Centre ou Droite. Dans l'en-tête, Position dans l'en-tête le place Avant les icônes, Avant le panier (le choix de départ) ou Après le panier ; la marge de déplacement dépend de votre thème. Sur un téléphone, il s'affiche plus petit, sur une ligne ; dans un thème avec un large logo au centre de l'en-tête, la place peut quand même manquer : vérifiez votre boutique sur un téléphone et utilisez-y plutôt le bouton flottant ou un lien de menu. Le bloc ne s'affiche que lorsque l'intégration est activée.
• Tout lien vers `#book-now`. Ajoutez un élément de menu, ou un bouton dans votre thème, dont le lien est #book-now (ou /#book-now). Il ouvre la fenêtre de réservation sur la page où se trouve le client. Cela fonctionne aussi là où votre thème n'accepte pas de blocs d'application.
• Un lien à partager. L'adresse de votre boutique suivie de /#book-now, par exemple https://your-store.com/#book-now, ouvre la boutique avec la fenêtre de réservation déjà ouverte. Utilisez-le dans des e-mails, des publications sur les réseaux sociaux ou un QR code.

Si vous désactivez le bouton flottant et ne placez aucun autre bouton Réserver, les clients n'ont aucun moyen de réserver, et rien ne vous en avertit. Vérifiez votre boutique après avoir modifié ces réglages.

La fenêtre de réservation suit la langue de votre boutique. Lorsque Calendrier ouvert aux nouvelles réservations est désactivé dans Paramètres → Règles de réservation, elle indique que le salon n'accepte pas de réservations pour le moment. Voir Comment les clients réservent.

Votre page de réservation

Votre boutique a aussi une page de réservation : l'adresse de votre boutique suivie de /apps/booking, par exemple https://votre-boutique.fr/apps/booking. Dès qu'elle se charge, elle ouvre la fenêtre de réservation. Sous la fenêtre, la page affiche « Prendre rendez-vous » et un bouton Réserver, pour qu'un client qui ferme la fenêtre puisse la rouvrir.

La page de réservation fonctionne même quand l'intégration est désactivée ou que votre thème ne peut pas accueillir d'applications : c'est donc le lien le plus sûr à partager, dans votre menu, sur les réseaux sociaux, dans vos e-mails ou en code QR sur votre comptoir. Copiez son adresse avec Copier le lien sur la carte Où les clients peuvent réserver dans Paramètres → Apparence. La page s'affiche dans votre thème, dans la langue dans laquelle votre client navigue. Son bouton Réserver prend vos couleurs Bouton et Texte du bouton ; avec Thème choisi, il ressemble aux boutons de votre thème.

Où les clients peuvent réserver

La carte Où les clients peuvent réserver dans Paramètres → Apparence liste chaque façon d'ouvrir la fenêtre de réservation, chacune avec son raccourci :

• Bouton flottant : Activé ou Désactivé, tel que lu dans votre thème en ligne, et où il se trouve, par exemple « En bas à droite, sur chaque page. »
• Bouton dans l'en-tête ou une section : Ajouter ↗ ouvre l'éditeur de thème en ajoutant le bloc Bouton de réservation à votre en-tête. Certains thèmes ne l'acceptent pas dans l'en-tête ; ajoutez-le alors à une section.
• Lien de menu : #book-now avec Copier le lien. Dans Shopify, allez dans Contenu → Menus et ajoutez un élément de menu avec ce lien.
• Page de réservation : l'adresse de votre page de réservation avec Copier le lien.

La carte les regroupe : Dans votre thème réunit les trois premiers, qui ont besoin de l'intégration Réserver, et son en-tête indique Intégration activée ou Intégration désactivée. Modifier ↗ ouvre les intégrations d'applications de l'éditeur de thème. Partout réunit votre page de réservation, qui fonctionne sans l'intégration.

Quand votre thème en ligne semble avoir été créé de zéro par Canvas, ou n'est pas visible du tout, Dans votre thème indique Indisponible et ses lignes n'ont pas de raccourcis, car un tel thème ne peut pas encore accueillir d'applications : utilisez votre page de réservation.

Choisir les couleurs du widget

Ouvrez Paramètres → Apparence. La carte Widget de réservation contient :

• Palette de couleurs : des jeux de couleurs prêts à l'emploi. Thème, le choix de départ, ne définit aucune couleur propre : les boutons Réserver ressemblent aux boutons de votre thème, et la fenêtre de réservation est blanche avec du texte foncé. Toute autre palette définit les cinq couleurs, que vous pouvez ensuite modifier une par une. Personnalisée apparaît dès que vous modifiez une couleur à la main, et reste disponible pour y revenir si vous essayez une autre palette.
• Les cinq couleurs : Texte, Arrière-plan, Bouton, Texte du bouton et Bouton à contour.

Une paire de couleurs difficile à lire est signalée par Difficile à lire. Ce n'est qu'un avertissement : vous pouvez quand même l'enregistrer.

L'Aperçu montre le bouton flottant Réserver et la fenêtre de réservation avec des données d'exemple, en largeur Téléphone ou Ordinateur : la liste des prestations et les horaires. Sur un ordinateur, il se trouve à côté des cartes ; sur un téléphone, en dessous.

Enregistrer applique immédiatement les couleurs à votre boutique. Si votre boutique ne peut pas être mise à jour, rien n'est enregistré, et vous pouvez réessayer.

Les boutons Réserver prennent les couleurs Bouton et Texte du bouton. Ils gardent la forme des boutons de votre thème : coins, taille et typographie. Avec Thème choisi, ils ressemblent aux boutons de votre thème. Si les boutons de votre thème ne peuvent pas être reconnus, ils prennent un simple bouton à contour.

La fenêtre de réservation utilise toujours la police de votre thème et les graisses que votre thème donne au texte et aux titres : elle paraît aussi légère ou aussi affirmée que le reste de votre boutique. Tout le reste dans la fenêtre lui est propre : elle garde sa casse, son espacement des lettres, ses tailles et sa mise en page, quoi que votre thème fasse aux titres, aux libellés et aux champs, et son texte en gras (le mois, l'étape en cours, le total) n'est jamais plus fin que le texte de votre boutique. Elle se lit aussi de gauche à droite, comme toutes ses langues, même si votre boutique est configurée de droite à gauche (pour l'hébreu ou l'arabe). Pour tout autre style, utilisez le CSS personnalisé de votre thème ; une règle pour la fenêtre de réservation doit commencer par .rezervito-modal[data-rezervito-modal][open] (ou utiliser !important) pour s'appliquer. Les couleurs s'appliquent à chaque bouton Réserver et à la fenêtre de réservation dans tous les thèmes, ainsi qu'à la page où les clients voient, déplacent ou annulent leur réservation. Vos e-mails de réservation les reprennent aussi : la couleur Bouton en est l'accent (un gris foncé avec Thème, ou avec un bouton trop clair sur fond blanc), avec le logo de votre boutique, et les pages de Rezervito dans votre admin Shopify ont toujours l'apparence de Shopify.

La page de réservation de vos clients est présentée comme leurs e-mails : en haut, le nom de votre boutique et le N° de réservation, par exemple #1042 (le même numéro que dans l'admin) ; puis le statut de la réservation, l'horaire et la prestation avec son collaborateur, sa durée et son prix. En dessous, Modifier ou annuler indique jusqu'à quand le client peut modifier l'horaire ou annuler en ligne — en une phrase quand les deux délais se terminent en même temps — avec les boutons Déplacer et Annuler la réservation. Déplacer ouvre la même fenêtre de réservation que celle où les clients réservent, à Choisissez un créneau, pour la prestation de cette réservation : le collaborateur est déjà choisi, et d'autres ne sont proposés que s'ils la prennent au même prix et à la même durée. Une fois l'horaire choisi, la fenêtre montre le nouvel horaire, et Déplacer ma réservation la déplace et recharge la page. Annuler la réservation demande d'abord confirmation, dans une fenêtre avec Garder la réservation. Déplacer n'apparaît que tant que l'app embed « Book now » est activé dans votre thème. Quand plus rien n'est possible en ligne, la page le dit en une phrase et affiche un bouton Écrire au salon. La page d'une visite affiche le numéro une fois, puis chaque prestation l'une après l'autre.

La marque Rezervito

Les e-mails à vos clients se terminent par une courte ligne « Réservé avec Rezervito », avec une petite icône. Votre boutique n'affiche aucune marque Rezervito : ni dans la fenêtre de réservation, ni sur la page de réservation de vos clients. C'est pareil sur tous les forfaits.

Pour les retirer, contactez-nous et nous les désactiverons pour votre boutique.

L'apparence du portail de l'équipe

La carte Portail du personnel du même onglet règle la Couleur d'accent du portail : ses éléments mis en avant et ses boutons.

• Comme le bouton du widget (le choix de départ) suit la couleur Bouton du widget.
• Ma propre couleur vous permet d'en choisir une.

Un accent trop pâle pour être lisible dans le portail n'est pas utilisé : le portail garde le bleu de Rezervito, et la carte vous l'indique. L'arrière-plan, le texte et les couleurs des réservations du portail restent toujours les mêmes, pour qu'il reste facile à lire comme outil de travail.

Le portail affiche le Logo de votre boutique défini dans Paramètres → Marque dans Shopify ; Ouvrir les paramètres de marque vous y mène. Sans logo, il affiche le nom de votre boutique. Voir Équipe et horaires.

Le bouton Réserver dans un thème créé avec Canvas

Canvas est la nouvelle façon de Shopify de créer un thème avec Sidekick. Un thème dupliqué avec Canvas (dans le menu ⋯ du thème : Duplicate in Canvas) garde ses applications telles qu'elles étaient : si l'intégration Réserver était activée dans l'original, le bouton flottant, la fenêtre de réservation, les liens de menu vers #book-now et votre page de réservation fonctionnent dans la copie, et Rezervito la voit comme n'importe quel autre thème. Un thème que Canvas crée de zéro ne peut pas encore accueillir d'applications, et il n'y a rien à activer dans Canvas lui-même. Rezervito reconnaît un tel thème : tant qu'il est en ligne et que l'intégration est désactivée, l'étape Activez le bouton Réserver du guide de configuration indique que votre thème en ligne semble avoir été créé avec Canvas, et affiche l'adresse de votre page de réservation avec Copier le lien au lieu de Ouvrir l'éditeur de thème. (Si Rezervito ne voit pas du tout votre thème en ligne, l'étape indique « Nous ne voyons pas votre thème en ligne » et propose la même adresse.)

Dans ce cas, vous pouvez :

• envoyer vos clients vers votre page de réservation : ajoutez-la à votre menu et utilisez-la sur les réseaux sociaux, dans vos e-mails et en codes QR ; ou
• publier un thème classique et y activer l'intégration Réserver.

L'étape reste ouverte tant que votre thème en ligne n'est pas visible, et se coche d'elle-même dès que l'intégration est activée dans un thème en ligne que Rezervito peut voir.

La réservation affiche « Une erreur s'est produite »

L'adresse de Rezervito est /apps/booking sur presque toutes les boutiques, mais elle peut être différente sur la vôtre. Vous pouvez la changer dans Shopify (Paramètres → Applications → Rezervito → App proxy), et Shopify donne à Rezervito une autre adresse, comme /apps/booking-1, quand une autre application utilise déjà /apps/booking. Rezervito suit la nouvelle adresse tout seul dès qu'une visite l'atteint : la fenêtre de réservation essaie d'elle-même /apps/booking-1, /apps/booking-2 et /apps/booking-3, et la carte Où les clients peuvent réserver affiche alors votre page de réservation à la nouvelle adresse. Les e-mails de réservation envoyés ensuite renvoient aussi vers la nouvelle adresse.

Si la fenêtre de réservation affiche toujours seulement « Une erreur s'est produite. Veuillez réessayer. », ouvrez votre boutique dans l'éditeur de thème : là, la fenêtre de réservation vous dit, à vous seul, ce qui ne va pas. Dans Shopify, allez dans Paramètres → Applications → Rezervito, ouvrez une fois l'URL App proxy indiquée, puis rechargez votre boutique.