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