Référence

Initialisation du module

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.

Support internet explorer

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>

Classes CSS

Voici l'ensemble des classes CSS présentes dans le module vous permettant de personnaliser l'apparence du module.

Section "Prendre un Rendez-vous" :

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

Section "Mon compte"

Class names	Type	Informations
react-add-to-calendar__icon- window.planity.primaryColors	Link	"Ajouter à mon agenda"
planity_ui_action_cancel-appointment window.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