Le bouton
Pour un site qui existe déjà
Vous ne touchez à aucune page : le bouton se pose d’un coup sur toutes celles qui chargent le script.
Sur votre site · WordPress · Wix · HTML
Vos clients réservent sans quitter votre site.
Trois formes, au choix : un bouton flottant posé par une seule balise, un cadre intégré à votre page « Réservation », ou l’adresse à partager telle quelle. Le code est écrit pour vous, votre lien déjà dedans.
Une balise, et le bouton est là.
- Une balise à coller, votre lien déjà dedans
- Votre page ne charge qu’un script ; le tunnel attend le clic
- Couleur, texte et côté du bouton, à votre choix
- WordPress, Wix ou un fichier HTML : les trois marches sont écrites
Prendre rendez-vous
En bas à droite, à votre couleur
Prendre rendez-vous
data-slugdata-colordata-labeldata-position
1
balise à coller
0
dépendance
2 s
après confirmation
Quatre attributs, un seul obligatoireFermer
1
balise <script> à coller, avant </body>
0
bibliothèque : le script est en JavaScript nu
3
formes : un bouton, un cadre, un lien
2 s
avant que la fenêtre se referme, RDV confirmé
hubbook.fr/widget/hubbook.js · data-slug · data-color · data-label · data-position
Au choix
Un bouton, un cadre, ou juste un lien.
Les trois vous attendent dans votre tableau de bord, prêts à copier. Vous n’en installez qu’un, celui qui correspond à ce que vous avez.
| Forme | Ce que vous collez | Où ça s’affiche | Ce qu’il vous faut |
|---|---|---|---|
| Le bouton | Une balise <script>, avant </body> | Un bouton flottant, sur chaque page | Rien d’autre |
| Le cadre | Un <iframe> et un court écouteur de hauteur | Dans votre page « Réservation » | Une page dédiée |
| Le lien | Une adresse à copier | Un e-mail, un SMS, une bio | Rien |
Le cadre
Pour une page « Réservation »
Le tunnel s’installe dans votre mise en page, entre votre en-tête et votre pied de page.
Le lien
Pour ce qui n’est pas un site
Instagram, Google, une signature d’e-mail, un message WhatsApp. L’adresse se copie et se partage telle quelle.
Choisissez votre créneau
Étape 2 sur 3
Lun
8
Mar
9
Mer
10
Jeu
11
Ven
12
09:0009:1509:3010:0010:1511:00
320 px
hauteur plancher
8 px
avant de renvoyer la mesure
900 px
le récapitulatif apparaît
Aucun compte demandé pour réserverContinuer
Le cadre
Le cadre se met à la hauteur de son contenu.
Une hauteur figée coupait le bas du tunnel sur téléphone, et le bouton de validation devenait inatteignable. Le cadre mesure désormais sa hauteur réelle et l’envoie à votre page, qui le redimensionne : à son arrivée, à chaque changement d’étape, à chaque image qui finit de charger, à la rotation de l’écran. Une page qui n’écoute pas garde un défilement interne.
- Le cadre publie sa hauteur, votre page l’ajuste
- Un lien de repli visible si un navigateur bloque le cadre
- L’écouteur livré ignore les messages qui ne viennent pas de HubBook
- Le cadre ne se charge que lorsqu’il approche de l’écran
Installation
Trois marches, sur trois plateformes.
Le même bloc, collé une seule fois. Il n’y a pas d’extension à installer : c’est un fichier de script et une adresse.
WordPress
Apparence → Éditeur de thème → footer.php. Collez le code juste avant </body>, enregistrez, videz le cache si vous en avez un. Le bouton apparaît en bas à droite.
Wix
+ → Intégrer → HTML embarqué. Collez, ramenez le bloc à 1 × 1 pixel, le bouton se place tout seul, puis publiez.
HTML
Ouvrez votre fichier, collez avant </body>, mettez en ligne. Le bouton apparaît sur toutes les pages qui chargent ce fichier.
Où trouver le code
Dans votre tableau de bord, Paramètres → onglet « Intégration site web ». Le code est déjà rempli avec votre lien. Un bouton le copie ; sur un site encore servi en HTTP, une seconde méthode prend le relais quand le navigateur bloque le presse-papier.
Ce que voit votre client
Votre page continue, la nôtre s’efface.
Le tunnel embarqué est dépouillé exprès : votre visiteur a cliqué pour réserver, pas pour relire votre nom.
Ni logo, ni en-tête de notre côté : votre page a déjà les siens.
Vos couleurs, votre police, vos arrondis, posés dès le rendu serveur, le cadre ne clignote pas avant de prendre votre marque.
Une seule adresse du début à la fin : le bouton « retour » du navigateur reste chez vous.
Le cadre n’est pas indexé : c’est votre page qui remonte, pas la nôtre.
Une réservation confirmée fait remonter un message à votre page, vous y branchez votre suivi.
Le récapitulatif attend 900 px de large ; en dessous, la place va au choix du créneau.
Questions fréquentes
Ce qu’on nous demande avant de coller le code.
Faut-il savoir coder ?
Non. Le bloc est écrit dans votre tableau de bord ; vous le copiez, et vous le collez avant la balise </body>.
Est-ce que ça ralentit mon site ?
Non : le script ne dépend d’aucune bibliothèque, et le tunnel ne se charge qu’au premier clic sur le bouton, pas au chargement de votre page.
Et si mon visiteur navigue au clavier ?
Échap ferme la fenêtre ; tant qu’elle est ouverte, la tabulation y reste enfermée, et le focus revient sur le bouton à la fermeture.
Sur téléphone ?
En dessous de 512 px de large, la fenêtre s’ouvre en plein écran et monte depuis le bas. Au-dessus, elle reste centrée.
Puis-je changer la couleur et le texte du bouton ?
Couleur, libellé et côté, à droite ou à gauche. Trois attributs de la balise, avec un aperçu du bouton pendant que vous les réglez.
Puis-je ouvrir la fenêtre depuis mon propre bouton ?
Oui : le script expose window.HubBook.open() et window.HubBook.close(). Si vous avez déjà un bouton « Prendre rendez-vous » dans votre menu, il peut appeler celui-là.
Et si un navigateur bloque le cadre ?
Le code d’intégration porte sous le cadre un lien visible, « Réserver directement », qui ouvre votre page publique.
Le rendez-vous arrive où ?
Dans votre agenda HubBook, comme s’il avait été pris sur votre page publique : c’est le même tunnel et la même base.
À votre tour
Votre bouton peut être en ligne ce soir.
Gratuit pour commencer. Le code vous attend dès que votre lien de réservation est choisi.
Vos hubs
Créez votre compte HubConnect
Un seul compte pour accéder à toutes les apps Hub. Gratuit, en une minute.