# Explication des bibliothèques de composants

Les composants sont les éléments constitutifs individuels, comme les images principales 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 construits 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 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 à 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 le *widget* carte.
3. Sélectionnez le nom du widget que vous voulez modifier.
4. Dans le menu de la barre latérale 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 le *Composants Mint* carte.

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

1. Dans le menu de navigation à 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 le *microsite* carte.
3. Sous le *Hébergement du site* titre, accédez à 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 le *Composants Mint* carte.
6. Sélectionnez **Enregistrer**.

</details>

<details>

<summary>Composants Bedrock</summary>

Tous les modèles propulsés par les composants Mint ont également le package de composants Bedrock installé. Les composants Bedrock ne sont pas visibles 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 de quel programme un composant obtient ses données. Vous pouvez trouver le package de composants Bedrock dans la *Composants avancés* section au sein de l’onglet *Ajouter* dans l’éditeur de widget ou de microsite.

Il y a deux composants dans le package de composants Bedrock :

**Section conditionnelle**

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

**Section de programme**

Le *composant de section de programme* vous permet de remplacer l’ID du 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 dans la plupart des modèles de widget et de microsite par défaut.

</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 aux côtés des composants fournis par Advocate.

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

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

1. Dans le menu de navigation à 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 widgets.
3. Sélectionnez le nom du widget que vous voulez modifier.
4. Dans le menu de la barre latérale 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>
