Référence
L'initialisation du module se fait via la définition d'une variable globale
planity, avant l'inclusion du script avec le module.Cet objet prend 3 options en paramètre:
Option | Obligatoire | Commentaire |
key | ✓ | La clé API qui vous a été fournie, unique par salon |
primaryColor | | La couleur des boutons et liens. Par défaut: #000 |
container | | Un noeud du DOM où le module doit être inclus |
appointmentContainer | | Un noeud du DOM où le module doit être inclus |
giftVoucherContainer | | Un noeud du DOM où le module doit être inclus |
accountContainer | | Un noeud du DOM où le module doit être inclus |
options.onServiceAdd | | Une fonction vous permettant de contrôler le scroll de la page lorsque l'utilisateur choisit une prestation. En savoir plus |
options.appointmentRedirect | | Une fonction vous permettant de rediriger l'utilisateur sur son compte après la réservation d'un RDV. |
options.giftVoucherRedirect | | Une fonction vous permettant de rediriger l'utilisateur sur son compte après la l'achat d'une carte cadeau. |
Si vous souhaitez supporter internet explorer, il est nécessaire d'ajouter le script suivant a la fin du bloc contenant le script :
<script src="https://d2skjte8udjqxw.cloudfront.net/widget/production/polyfills.latest.js"></script>
Voici l'ensemble des classes CSS présentes dans le module vous permettant de personnaliser l'apparence du module.
Class names | Type | Informations |
planity_ui_appointment_background | Container | Background du widget |
planity_ui_item-list-element | Container | Ligne d'une prestation |
planity_appointment_service_cell | Ligne | "Nom de prestation" |
planity_appointment_service_small-cell | Ligne | "Tarifs / temps" |
planity_appointment_service_button | Bouton | "Choisir" |
planity_ui_action_button_root planity_ui_action_button_icon-remove | Bouton | Le bouton annuler lorsque l'utilisateur à choisi une prestation |
planity_ui_button_root | Bouton | "Ajouter une prestation à la suite" |
planity_ui_showMoreservices | Lien | "Voir les autres prestations" |
planity_ui_action_action_choose-with | Menu | "Choisir avec qui" |
planity_ui_action_worker | Menu | Liste des employés disponibles |
planity_ui_action_worker-name | Menu | Nom des employés disponibles |
planity_appointment_steps_step | Liste | Liste des jours (lors de la sélection du rendez-vous) |
planity_appointment_days_slider_hour_avaibility | Liste | Liste des heures disponibles |
Class names | Type | Informations |
react-add-to-calendar__icon-window.planity.primaryColors | Link | "Ajouter à mon agenda" |
planity_ui_action_cancel-appointmentwindow.planity.primaryColors | Link | "Annuler le RDV" |
planity_ui_action_edit-password | Link | "Changer le mot de passe" |
Si votre site dispose d'une barre de navigation (horizontale ou verticale) qui viendrait à passer au dessus du widget, il est possible alors que le widget apparaisse quand même au dessus.
Dans ce cas, il faut ajouter la propriété CSS
z-index à votre barre de navigation.Par exemple :
z-index:1