Vous pouvez intégrer l’Assistant de Planification sur n’importe quelle plateforme externe et, donc, accepter des réservations directement depuis d’autres sites internet, Facebook, des pages de listings, ou n’importe quel autre endroit prenant en charge une intégration HTML. Les rendez-vous pris sur des plateformes externes apparaîtront dans votre vue Calendrier de l’Éditeur.
Avant d’intégrer la Planification
Suivez les étapes ci-dessous pour bien configurer la Planification et vous préparer à prendre des réservations:
-
Paramétrez votre configuration basique, y compris les langues et devises prises en charge, les informations sur votre entreprise, vos horaires d’ouverture, les textes que vous voulez voir apparaître dans l’assistant de Planification, etc.
-
Créez les services que vous voulez que les visiteurs puissent réserver.
-
Ajoutez des membres d’équipe et associez-les aux services que vous fournissez.
-
Familiarisez-vous avec la vue Calendrier de la Planification où vous pourrez gérer les rendez-vous en attente et également créer manuellement de nouveaux rendez-vous.
Certificat SSL requis
La plupart des plateformes externes exigent que tout contenu intégré soit hébergé sur un domaine avec un Certificat SSL ajouté afin d’assurer un transfert crypté des données. Beaucoup de plateformes externes empêchent le contenu intégré non protégé par SSL de s’afficher, y compris la fenêtre de l’assistant de Planification, si le SSL n’a pas été activé. Si votre sous-domaine ou domaine n’a pas de certificat SSL installé, veuillez contacter votre fournisseur de services numériques pour en demander un.
Option 1: Intégrer l’assistant de Planification sur une plateforme externe
Une fois que vous avez établi votre configuration basique, vos services et vos membres d’équipe, vous êtes prêt à intégrer la Planification sur une plateforme externe de votre choix.
Assurez-vous que la plateforme externe prend en charge le contenu intégré
Avant de tenter d’intégrer la Planification, assurez-vous que la plateforme externe supporte l’HTML intégré. Cherchez les options pour ajouter le "code HTML", une "bribe de code", un "iframe", un "code intégré", un "HTML personnalisé", ou similaire. Consultez la documentation technique de la plateforme ou les ressources d’aide si vous n’êtes pas sûr de la manière de coller le code HTML externe.
Tout d’abord, dans l’Éditeur, allez sur Planification > Paramètres > Widget intégré où vous pourrez configurer l’apparence du bouton de réservation de la Planification que vous intègrerez sur une plateforme externe.
Saisissez le texte que vous voulez afficher sur le bouton, en le sélectionnant parmi quatre options différentes de design, et choisissez une couleur pour le bouton.
Vous pouvez choisir entre les quatre options de design prédéfinies suivantes:
-
Angles droits, sans ombre
-
Angles droits, avec ombre
-
Angles arrondis, sans ombre
-
Lien texte brut
Le code intégré en bas de l’écran changera en fonction de l’option de design que vous avez choisie pour votre bouton.
Sur la plateforme externe où vous souhaitez intégrer la Planification, collez le bout de code à l’emplacement de votre choix.
Fonctionner dans plusieurs langues
Si vous proposez la Planification dans plusieurs langues, vous pouvez modifier le code intégré une fois que vous l’avez collé pour afficher l’assistant de Planification dans la langue de votre choix. Par exemple, si vous voulez que l’assistant s’affiche en français, procédez aux modifications suivantes:
<a href="#" id="schwiz-ifr-btn" data-url="//u1119527.yourdomain.com/s"
data-locale="fr">Réserver maintenant</a>
Styliser le bouton après l’avoir intégré
Une fois que vous avez collé le code intégré sur la plateforme externe, vous pouvez procéder à des changements dessus afin de modifier le style et l’apparence du bouton. Des modifications de style peuvent nécessiter des connaissances fondamentales en CSS, mais il est facile de faire des modifications mineures comme changer la couleur du bouton.
Comment modifier la couleur du texte du bouton
Dans le code intégré, cherchez le paramètre suivant:
color: #fff;
Modifiez fff pour n’importe quel code couleur HEX de votre choix.
Comment modifier la couleur d’arrière-plan du bouton
Dans le code intégré, cherchez le paramètre suivant:
background: #ab1234;
Modifiez ab1234 (ou peu importe la combinaison de nombres/chiffres que vous voyez dans le code intégré) pour n’importe quel code couleur HEX de votre choix.
Comment modifier la taille du bouton
Dans le code intégré, cherchez le paramètre suivant:
padding: 16px 20px;
Le premier chiffre (16px) définit la quantité d’espace en haut et en bas entre le texte du bouton et la bordure du bouton. Le deuxième chiffre (20px) définit la quantité d’espace à droite et à gauche entre le texte du bouton et la bordure du bouton. Changez les chiffres pour modifier la taille de votre bouton à votre convenance.
Option 2: Créer un lien vers votre site internet et déclencher automatiquement l’assistant de Planification
Si vous avez déjà paramétré la Planification sur votre site internet, vous pouvez créer un lien qui déclenchera immédiatement l’assistant de Planification quand on clique dessus. Vous pourrez insérer ce lien partout où il vous plaira, par exemple dans une signature d’e-mail.
Exigences pour que cette option fonctionne
Afin de pouvoir utiliser cette option, vous devez avoir un site internet dans l’Éditeur avec un bouton de Planification ajouté sur l’URL de la page vers laquelle vous voulez faire un lien. Si vous n’avez pas de bouton de Planification sur la page, l’assistant de Planification ne pourra pas se déclencher.
Vous générez ce lien en ajoutant simplement /#afficher la Réservation à la fin de votre URL (assurez-vous que le R reste en lettre capitale). Par exemple, si vous avez un bouton de Planification sur la page https://www.infinityhairstudio/book-time, l’URL de votre lien devra être https://www.infinityhairstudio/book-time/#afficher la Réservation. Une fois qu’il aura cliqué, la page s’ouvrira dans le navigateur du visiteur et déclenchera immédiatement l’assistant de Planification.
Exemple de lien inséré dans un e-mail :