> 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/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/component-libraries-explained.md).
# Komponentenbibliotheken erklärt
Komponenten sind die einzelnen Bausteine, wie Hero-Bilder und Aufgabenkarten, die Ihr Widget oder Ihre Microsite bilden. Alle unsere aktuellen Vorlagen basieren auf unseren Mint- und Bedrock-Komponentenbibliotheken.
Mint-Komponenten
Widgets und Microsites, die mit Mint-Komponenten erstellt wurden, bieten Kundenvertretenden die neuesten Advocate-Erlebnisse. Die meisten aktuellen Vorlagen verwenden Mint-Komponenten. Wenn Sie sich nicht sicher sind, ob Sie die aktuelle Komponentenbibliothek verwenden, können Sie dies manuell überprüfen und Ihre Bibliothek bei Bedarf aktualisieren.
Zum Upgrade auf Mint-Komponenten für Ihr **Programm-Widget**:
1. Wählen Sie im linken Navigationsmenü  **\[Engage] → Inhalt**.
2. Wählen Sie **Widgets bearbeiten** auf dem *Widgets* Karte.
3. Wählen Sie den Namen des Widgets aus, das Sie bearbeiten möchten.
4. Wählen Sie im linken Seitenleistenmenü **Pakete**.
5. Wählen Sie  **Paket hinzufügen**.
6. Wählen Sie **Hinzufügen** auf dem *Mint-Komponenten* Karte.
Zum Upgrade auf Mint-Komponenten für Ihr **Microsite**:
1. Wählen Sie im linken Navigationsmenü  **\[Engage] → Inhalte.**
2. Wählen Sie das **Einstellungen bearbeiten** Schaltfläche auf der *Microsite* Karte.
3. Unter der *Site-Hosting* Überschrift, navigieren Sie zu der *Pakete* Abschnitt.
4. Wählen Sie  **Paket hinzufügen**.
5. Wählen Sie **Hinzufügen** auf dem *Mint-Komponenten* Karte.
6. Wählen Sie **Speichern**.
Bedrock-Komponenten
Alle Vorlagen, die von Mint-Komponenten unterstützt werden, haben auch das Bedrock-Komponentenpaket installiert. Bedrock-Komponenten sind für Teilnehmende nicht sichtbar, bieten aber die Möglichkeit, Ihrem Design erweiterte Logik hinzuzufügen. Sie können andere Komponenten bedingt anzeigen und festlegen, aus welchem Programm eine Komponente Daten bezieht. Sie finden das Bedrock-Komponentenpaket in der *Erweiterte Komponenten* Bereich innerhalb der *Hinzufügen* Registerkarte im Widget- oder Microsite-Editor.
Im Bedrock-Komponentenpaket sind zwei Komponenten enthalten:
**Bedingter Abschnitt**
Die *bedingter Abschnitt* Komponente können Sie bedingte Inhalte basierend auf der E-Mail-Adresse, dem Land, dem Segment oder einem benutzerdefinierten Feld eines Teilnehmers einfügen. Fügen Sie im *Bedingung* Feld einen JSONata-Ausdruck ein, um die Anzeigebedingungen festzulegen. Verschieben Sie dann alle Inhalte, die innerhalb des bedingten Abschnitts für eine bestimmte Teilnehmendengruppe angezeigt werden sollen.
**Programmabschnitt**
Die *Programmabschnitt* Komponente können Sie die Programm-ID ihrer untergeordneten Komponenten überschreiben. Verwenden Sie sie, um Inhalte anzuzeigen, die nicht mit einem bestimmten Programm verknüpft sind. Die *Programmabschnitt* Komponente ist standardmäßig in den meisten Widget- und Microsite-Vorlagen enthalten.
Benutzerdefinierte Komponentenbibliotheken
Sie können Ihre eigenen Komponentenpakete erstellen und verwenden, um Ihr Advocate-Erlebnis weiter anzupassen. Diese Komponenten können zu jeder Vorlage hinzugefügt und zusammen mit den von Advocate bereitgestellten Komponenten verwendet werden.
Advocate-Widgets verwenden standardmäßiges HTML und [Webkomponenten](https://www.webcomponents.org/) . Um Ihre eigenen Komponenten in unserem Widget-Editor zu verwenden, müssen sie als Webkomponenten geschrieben sein.
Installieren Sie zunächst Ihr benutzerdefiniertes Paket, um mit dem Erstellen Ihres Widgets mit benutzerdefinierten Komponenten zu beginnen:
1. Wählen Sie im linken Navigationsmenü  **\[Engage] → Inhalt**.
2. Wählen Sie **Widgets bearbeiten** auf der Widgets-Karte.
3. Wählen Sie den Namen des Widgets aus, das Sie bearbeiten möchten.
4. Wählen Sie im linken Seitenleistenmenü **Pakete**.
5. Wählen Sie  **Paket hinzufügen**.
6. Wählen Sie  **Von NPM hinzufügen**.
7. Geben Sie das Paket ein *Name*, *Version* und *Dateipfad*.
8. Wählen Sie **Hinzufügen**.
---
# 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://help.impact.com/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/component-libraries-explained.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.