# Explication des bibliothèques de composants

Les composants sont les éléments de base individuels, comme les images de héros et les cartes de tâches, qui composent votre widget ou microsite. Tous nos modèles actuels sont propulsés par nos bibliothèques de composants Mint et Bedrock.

<details>

<summary>Composants Mint</summary>

Les widgets et microsites créés avec les composants Mint offrent aux défenseurs clients les dernières expériences Advocate. La plupart des modèles actuels utilisent les composants Mint. Si vous n’êtes pas sûr d’utiliser la bibliothèque de composants actuelle, vous pouvez vérifier manuellement pour vous en assurer et mettre à jour votre bibliothèque si nécessaire.

Pour passer aux composants Mint pour votre **widget de programme**:

1. Dans le menu de navigation de gauche, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenu**.
2. Sélectionnez **Modifier les widgets** sur la *widgets* carte.
3. Sélectionnez le nom du widget que vous souhaitez modifier.
4. Dans le menu latéral gauche, sélectionnez **Packages**.
5. Sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Ajouter un package**.
6. Sélectionnez **Ajouter** sur la *Composants Mint* carte.

Pour passer aux composants Mint pour votre **microsite**:

1. Dans le menu de navigation de gauche, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenu.**
2. Sélectionnez le **Modifier les paramètres** bouton sur la *microsite* carte.
3. Sous l’en-tête *Hébergement du site* rendez-vous dans la *Packages* section.
4. Sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Ajouter un package**.
5. Sélectionnez **Ajouter** sur la *Composants Mint* carte.
6. Sélectionnez **Enregistrer**.

</details>

<details>

<summary>Composants Bedrock</summary>

Tous les modèles propulsés par des composants Mint disposent également du package de composants Bedrock installé. Les composants Bedrock ne peuvent pas être vus par les participants, mais ils offrent la possibilité d’ajouter une logique avancée à votre conception. Ils peuvent afficher conditionnellement d’autres composants et définir à partir de quel programme un composant récupère ses données. Vous pouvez trouver le package de composants Bedrock dans la *Composants avancés* section dans l’ *Ajouter* onglet de l’éditeur de widget ou de microsite.

Le package de composants Bedrock comprend deux composants :

**Section conditionnelle**

Le *composant de section conditionnelle* vous permet d’inclure du contenu conditionnel en fonction de l’e-mail, du pays, du segment ou du champ personnalisé d’un participant. Insérez une expression JSONata dans la zone *Condition* pour définir les conditions d’affichage. Ensuite, déplacez tout contenu que vous souhaitez afficher à un groupe spécifique de participants dans la section conditionnelle.

**Section de programme**

Le *composant de section de programme* vous permet de remplacer l’ID de programme de ses composants enfants. Utilisez-le pour afficher du contenu qui n’est pas lié à un programme spécifique. Le *Section de programme* composant est inclus par défaut dans la plupart des modèles de widget et de microsite.

</details>

<details>

<summary>Bibliothèques de composants personnalisées</summary>

Vous pouvez créer et utiliser vos propres packages de composants pour personnaliser davantage votre expérience Advocate. Ces composants peuvent être ajoutés à n’importe quel modèle et utilisés avec les composants fournis par Advocate.

Les widgets Advocate utilisent du HTML standard et des [composants web](https://www.webcomponents.org/) . Pour utiliser vos propres composants dans notre éditeur de widgets, ils doivent être écrits en tant que composants web.

Pour commencer à créer votre widget avec des composants personnalisés, installez votre package personnalisé :

1. Dans le menu de navigation de gauche, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenu**.
2. Sélectionnez **Modifier les widgets** sur la carte des widgets.
3. Sélectionnez le nom du widget que vous souhaitez modifier.
4. Dans le menu latéral gauche, sélectionnez **Packages**.
5. Sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Ajouter un package**.
6. Sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Ajouter depuis NPM**.
7. Saisissez le *nom*, *version* et *chemin du fichier*.
8. Sélectionnez **Ajouter**.

</details>
