> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/component-libraries-explained.md).

# Bibliothèques de composants expliquées

Les composants sont les blocs de construction individuels, comme les images principales et les cartes de tâche, qui composent votre widget ou microsite. Tous nos modèles actuels sont alimenté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 ambassadeurs clients les dernières expériences Advocate. La plupart des modèles actuels utilisent des 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 l' *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 l' *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 la *Hébergement du site* rubrique, 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 l' *Composants Mint* carte.
6. Sélectionnez **Enregistrer**.

</details>

<details>

<summary>Composants Bedrock</summary>

Tous les modèles alimentés par les composants Mint ont également le paquet 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 à partir de quel programme un composant récupère ses données. Vous pouvez trouver le paquet de composants Bedrock dans la *Composants avancés* section dans l’ *Ajouter* onglet de l’éditeur de widget ou de microsite.

Il existe deux composants dans le paquet de composants Bedrock :

**Section conditionnelle**

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

**Section de programme**

Le *section de programme* Le composant 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 paquets de composants pour personnaliser davantage votre expérience Advocate. Ces composants peuvent être ajoutés à n’importe quel modèle et utilisés en parallèle des 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 sous forme de composants Web.

Pour commencer à créer votre widget avec des composants personnalisés, installez votre paquet 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 paquet *nom*, *version* et *chemin d’accès au fichier*.
8. Sélectionnez **Ajouter**.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.impact.com/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/component-libraries-explained.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
