Comment puis-je intégrer ma page de réservation sur mon site Internet ?

À qui s'adresse cet article ?

Vous avez votre propre site Web et voulez que vos visiteurs réservent sans le quitter ? Colib vous offre un widget de réservation : un bouton sur votre site ouvre votre page de réservation Colib dans une fenêtre, par-dessus votre page.

Cet article explique où trouver le code, comment l'ajouter à votre site et quoi faire si vous préférez un simple lien.

Avant de commencer : la réservation en ligne doit être activée dans Réglages > Réservations (www.colib.io/fr-ca/settings?show=bookingpage) : le Type de réservation client doit être autre chose que Aucun. Vous devez aussi pouvoir ajouter du code HTML à votre site (la plupart des créateurs de sites offrent un bloc « HTML » ou « code intégré »).

1Trouver votre page de réservation et le code du widget

1. Allez à www.colib.io/fr-ca/settings?show=bookingpage. Vous pouvez aussi cliquer sur l'icône Réglages (roue dentée) de la barre du haut, puis sur Réservations dans le menu Admin à gauche.
2. Dans la section Réservation directe, URL de la page affiche l'adresse de votre page de réservation. Pour ouvrir la page, cliquez sur le lien ici juste sous le champ.
3. Descendez jusqu'à la section Intégration du Widget, en bas de la page : elle contient le code à copier, déjà rempli avec l'adresse de votre page de réservation.

2Ajouter le code à votre site

1. Copiez le premier bout de code (la ligne qui commence par <script) et collez-le à la fin de la section body de votre page.
2. Copiez le deuxième bout de code (le bloc <div>) et collez-le n'importe où dans la section body, avant le script de l'étape précédente.
3. Sur votre page, ajoutez la classe colib--widget--open au bouton ou au lien qui doit ouvrir la fenêtre de réservation. Par exemple : <a class="colib--widget--open">Prendre rendez-vous</a>.
4. Publiez votre page.

3Tester le résultat

Ouvrez votre site et cliquez sur votre bouton : votre page de réservation s'ouvre dans une fenêtre au-dessus de votre page. Vos visiteurs choisissent leur rendez-vous et réservent exactement comme sur votre page de réservation Colib. La fenêtre se ferme avec le x en haut à droite ou en cliquant à côté.

Vous voulez voir le widget avant de l'ajouter à votre site ? Essayez-le sur notre page de démonstration : www.colib.io/fr-ca/practice/your-own-brand. Cliquez sur le bouton Widget de réservation pour ouvrir la fenêtre de réservation.

Vous préférez un simple lien ?

Si vous ne pouvez pas ajouter de code à votre site, ou si le widget ne convient pas à votre design, ajoutez un lien ou un bouton qui ouvre l'adresse de votre page de réservation (l'URL de la page de l'étape 1), par exemple https://www.colib.io/Booking/votre-clinique. Vous pouvez aussi imprimer le code QR avec Télécharger le code QR pour la page de réservation en ligne, dans la même section.

Bon à savoir

• Un bouton par page — seul le premier élément portant la classe colib--widget--open sur une page ouvre la fenêtre. Pour d'autres boutons sur la même page, utilisez un simple lien vers votre page de réservation.
• Si vous changez l'URL de la page — mettez à jour le code sur votre site : il contient l'adresse de votre page de réservation.
• Plusieurs cliniques — vos visiteurs choisissent d'abord la clinique, comme sur votre page de réservation.
• Les réglages restent dans Colib — types de rendez-vous, disponibilités, paiement et notifications sont ceux de votre page de réservation : modifiez-les dans Colib, le widget suit.
• Votre propre nom de domaine — Colib ne prend pas en charge les noms de domaine personnalisés : le widget et le lien ouvrent votre page de réservation à son adresse Colib. Pour afficher votre logo et le nom de votre pratique au lieu de la marque Colib, activez Masquer la marque Colib dans Réglages > Général (www.colib.io/fr-ca/settings?show=general).

Articles liés : Comment configurer le processus de réservation dans Colib ?, Comment créer un lien direct vers l’horaire d’un praticien ?, Comment avoir une page de réservation différente pour chaque clinique ?

Vous avez encore une question ?

Écrivez-nous à support@colib.io, nous serons heureux de vous aider.