> For the complete documentation index, see [llms.txt](https://planity.gitbook.io/white-label/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://planity.gitbook.io/white-label/css-class-names.md).

# 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 %}