> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🔘 Comment configurer Floating Action Button comme Calendly pour les réservations de rendez-vous > ℹ️ **Note:** Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien. Vous voulez que les clients puissent réserver de n'importe où dans votre magasin — pas seulement la page de produit? Un bouton d'action flottant fonctionne comme le widget Calendly: un petit bouton "Réserver maintenant" reste fixe dans le coin de chaque page, prêt à ouvrir votre modale de réservation en un clic. Hoppy Appointments vous permet d'ajouter ce bouton par service, de personnaliser son texte et ses couleurs, et de choisir où il apparaît sur l'écran. Ce guide vous aide à le mettre en place. --- # **⚠️ Avant de commencer** Avant de configurer le bouton d'action flottant, assurez-vous d'avoir : * Les **Hoppy Appointments** app installée sur votre Shopify magasin * Au moins un service actif déjà créé * Les **Hoppy Appointments application intégrée** activé dans votre thème 💡 Le bouton flottant n'apparaît que sur les pages où l'application est active. Si vous n'avez pas encore activé l'intégration, allez à **Shopify Admin → Boutique en ligne → Thèmes → Personnaliser → App Embeds** et allumer Hoppy Appointments Embarquez. --- # **🛠️ Étape 1 — Ouvrir l'onglet Général du Service** Le bouton d'action flottant est configuré par service, **Généralités** onglet — pas l'onglet Conception. 1. Ouvrir la **Hoppy Appointments** app 2. Allez à **Services** 3. Cliquez sur le service que vous voulez ajouter le bouton à 4. Cliquez sur le **Généralités** onglet 5. Faites défiler jusqu'au **Bouton d'action flottant** carte --- # **🛠️ Étape 2 — Activer le bouton action flottante** Dans la **Bouton d'action flottant** carte: 1. Allumez la **Activer le bouton flottant** basculer Une fois activés, les champs de configuration apparaissent sous le basculement. --- # **🛠️ Étape 3 — Configurer le bouton** Configurez le bouton correspondant au style de votre magasin et au flux de réservation. ## **Texte du bouton** Entrez l'étiquette que les clients verront sur le bouton. Le texte par défaut est **Réservez maintenant**, mais vous pouvez utiliser tout ce qui correspond à votre marque — par exemple: * **Réserver un appel** * **Nomination prévue** * **Réserve une tache** ## **Fonction** Choisissez où le bouton apparaît à l'écran : * **En bas à droite** — apparaît dans le coin inférieur droit * **En bas à gauche** — apparaît dans le coin inférieur gauche * **Centre inférieur** — apparaît centré en bas ## **Couleur de fond** Choisissez la couleur de fond du bouton. La valeur par défaut est noire. ## **Couleur du texte** Choisissez la couleur de l'étiquette du bouton. La valeur par défaut est blanche. 💡 Choisissez des couleurs avec un fort contraste afin que le bouton soit facile à lire sur votre fond de magasin. --- # **💾 Étape 4 — Enregistrer et prévisualiser** 1. Cliquez sur **Enregistrer** en haut de la page de service 2. Attendez le message de confirmation 3. Visitez votre magasin et vérifiez différentes pages — maison, produit, collection, panier, etc. Le bouton doit rester fixé dans le coin choisi et ouvrir le mode de réservation lorsqu'il est cliqué. --- # **⚠️ Remarques importantes** * **Réglage par service** — chaque service a son propre bouton flottant. Configurez-le séparément pour chaque service sur lequel vous voulez l'afficher. * **Apparaît sur toutes les pages** — une fois activé, le bouton affiche sur chaque page où Hoppy Appointments app include est active. Il n'existe pas de règles de visibilité spécifiques aux pages. * **Plusieurs services = plusieurs boutons** — si vous activez le bouton flottant pour plusieurs services, chacun rendra son propre bouton. Pour une expérience plus propre, ne l'activer que sur le service que vous voulez promouvoir le plus. * **Ouvre le mode de réservation** — en cliquant sur le bouton ouvre le flux de réservation pour ce service directement, sans quitter la page actuelle. * **Les traductions nécessitent une configuration avancée** — si vous voulez que le texte du bouton change par langue, activez **Utiliser la configuration avancée** sur le service et placer la traduction sous **Paramètres → Traductions → Traductions de services**. Voir le guide de traduction pour plus de détails. --- # **🐞 Dépannage** ## **Le bouton ne s'affiche pas sur mon magasin** 1. Assurez-vous **Activer le bouton flottant** est allumé pour le service 2. Assurez-vous que vous avez cliqué **Enregistrer** 3. Confirmer Hoppy Appointments app include est activé dans votre thème 4. Effacer le cache ou le test de votre navigateur dans une fenêtre incognito 5. Vérifier que le service est actif et correctement connecté à un produit ## **Le texte du bouton est incorrect ou non traduit** * Si **Utiliser la configuration avancée** est désactivé, le bouton utilise le texte de la **Texte du bouton** directement. * Si **Utiliser la configuration avancée** est allumé, le texte du bouton est tiré de **Paramètres → Traductions → Traductions de services → Étiquette à bouton flottant**. ## **La couleur du bouton ne semble pas droite** Utilisez les sélectionneurs de couleurs dans la carte FAB pour le style de base. Pour des changements visuels plus avancés, vous pouvez cibler le `.futureblink-fab` cours avec CSS personnalisé. Consultez le guide CSS personnalisé pour plus de détails. --- # **🎉 Résultat final** Une fois configuré : ✅ Un bouton flottant "Réserver maintenant" apparaît sur chaque page de votre magasin ✅ Les clients peuvent commencer à réserver de n'importe où sans naviguer vers une page de produit ✅ Le bouton ouvre instantanément votre service modal de réservation ✅ Le texte, la position et les couleurs correspondent à votre marque --- # **📚 Articles connexes** * **Réservations de rendez-vous — Options de conception et de styling** * **Comment définir l'application CSS personnalisée pour les réservations de rendez-vous** * **Réservations de rendez-vous — Traduction** * **Comment configurer les services de réservation de rendez-vous**