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 :
1
<script src="https://d2skjte8udjqxw.cloudfront.net/widget/production/polyfills.latest.js"></script>
Copied!

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
Last modified 11mo ago