# 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](/white-label/reacting-to-service-choice.md) |
| `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  : 

```markup
<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" :&#x20;

| 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"*                                                     |
| <p><code>planity\_ui\_action\_button\_root</code></p><p> <code>planity\_ui\_action\_button\_icon-remove</code></p> | 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                |
| ------------------------------------------------------------------------------------------------------------ | ---- | --------------------------- |
| <p><code>react-add-to-calendar\_\_icon-</code></p><p><code>window\.planity.primaryColors</code></p>          | Link | *"Ajouter à mon agenda"*    |
| <p><code>planity\_ui\_action\_cancel-appointment</code></p><p><code>window\.planity.primaryColors</code></p> | Link | *"Annuler le RDV"*          |
| `planity_ui_action_edit-password`                                                                            | Link | *"Changer le mot de passe"* |

{% hint style="info" %}
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`
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://planity.gitbook.io/white-label/css-class-names.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.