> 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/integration-a-wordpress-1/integration-a-wordpress.md).

# Intégration à Wordpress (version 5 et supérieure)

Ce tutoriel n'est valide que sur les sites WordPress.org. Il n'est pas possible d'intégrer le module de prise de RDV Planity sur les sites hébergés sur wordpress.com.

## Tutoriel vidéo

{% embed url="<https://youtu.be/MxuoFk8_Wyg>" %}

## Tutoriel

{% tabs %}
{% tab title="Création de la page" %}
Dans un premier temps, il faut créer la page où vous souhaitez intégrer le Widget

![](https://696301771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LTvbGKGejelpC98QkAC%2F-LU0-yMYqM7vixsq7XsJ%2F-LU01-m_5eWeR4Lj-aR0%2FCapture%20d%E2%80%99e%CC%81cran%202018-12-18%20a%CC%80%2011.06.22.png?alt=media\&token=57aa0b7c-a9df-4d7b-ae19-7ce3c2afc5c0)
{% endtab %}

{% tab title="Création du bloc de code" %}
Une fois la page créée, vous devez créer un bloc dans votre page où intégrer le code du widget :&#x20;

![](https://696301771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LTvbGKGejelpC98QkAC%2F-LU0-yMYqM7vixsq7XsJ%2F-LU03855PjVrzNgVLzRm%2FCapture%20d%E2%80%99e%CC%81cran%202018-12-18%20a%CC%80%2011.06.43.png?alt=media\&token=e0654188-0ff8-4850-b6c7-b184b3da4f4b)

Choisir le bloc *"Custom HTML"*

![](https://696301771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LTvbGKGejelpC98QkAC%2F-LU0-yMYqM7vixsq7XsJ%2F-LU03EkSp3S4ddOUUhzq%2FCapture%20d%E2%80%99e%CC%81cran%202018-12-18%20a%CC%80%2011.06.55.png?alt=media\&token=be36bb42-f6f1-4acf-92bc-2bf16c51ec18)
{% endtab %}

{% tab title="Insertion du widget" %}
Une fois le bloc en place, vous devez y insérer le code du Widget (disponible [ici](/white-label/master.md#installation-rapide)) :

![](https://696301771-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LTvbGKGejelpC98QkAC%2F-LU0-yMYqM7vixsq7XsJ%2F-LU01tnoqrO03SUu-tsx%2FCapture%20d%E2%80%99e%CC%81cran%202018-12-18%20a%CC%80%2011.08.13.png?alt=media\&token=c206f51a-6420-4c8d-b588-a5bd7520dd70)
{% endtab %}

{% tab title="Réglage du Widget" %}
Afin que le widget affiche vos prestations et disponibilité, il est nécessaire de le configurer.

1. Vous avez pour cela reçu par mail une clé qui doit être insérer dans le code du Widget, à la place de : `'$apiKey'`
2. Vous devez également définir une couleur à utiliser, cas échéant celle de votre site sera repris. Les codes couleurs sont disponibles [ici](https://htmlcolorcodes.com/color-picker/). Afin de l'utiliser, vous devez remplacer dans le code`'$primaryColor'`
   {% endtab %}
   {% endtabs %}