> 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 Aufgaben-Karten, aus denen Ihr Widget oder Ihre Microsite besteht. Alle unserer aktuellen Vorlagen werden von unseren Mint- und Bedrock-Komponentenbibliotheken unterstützt.

<details>

<summary>Mint-Komponenten</summary>

Widgets und Microsites, die mit Mint-Komponenten erstellt wurden, bieten Customer Advocates die neuesten Advocate-Erlebnisse. Die meisten der 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.

Um für Ihr **Programm-Widget**:

1. Wählen Sie im linken Navigationsmenü ![](/files/8189ccdb3d6833e64eac05afbd5a6e7ceadce224) **\[Engage] → Inhalte**.
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 ![](/files/2dce7a714de3b2540fb3c3421aa9c2d75fc643bd) **Paket hinzufügen**.
6. Wählen Sie **Hinzufügen** auf dem *Mint-Komponenten* Karte.

Um für Ihr **Mikrosite**:

1. Wählen Sie im linken Navigationsmenü ![](/files/8189ccdb3d6833e64eac05afbd5a6e7ceadce224) **\[Engage] → Inhalt.**
2. Wählen Sie den **Einstellungen bearbeiten** Schaltfläche auf der *Mikrosite* Karte.
3. Unter den *Website-Hosting* Überschrift navigieren Sie zu den *Pakete* Abschnitt.
4. Wählen Sie ![](/files/2dce7a714de3b2540fb3c3421aa9c2d75fc643bd) **Paket hinzufügen**.
5. Wählen Sie **Hinzufügen** auf dem *Mint-Komponenten* Karte.
6. Wählen Sie **Speichern**.

</details>

<details>

<summary>Bedrock-Komponenten</summary>

Alle Vorlagen, die von Mint-Komponenten unterstützt werden, haben außerdem das Bedrock-Komponentenpaket installiert. Bedrock-Komponenten sind für Teilnehmer 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. Das Bedrock-Komponentenpaket finden Sie im *Erweiterte Komponenten* Bereich innerhalb des *Hinzufügen* Registerkarte im Widget- oder Microsite-Editor.

Im Bedrock-Komponentenpaket gibt es zwei Komponenten:

**Bedingter Abschnitt**

Die *bedingter Abschnitt* Komponente können Sie bedingte Inhalte basierend auf der E-Mail, dem Land, dem Segment oder einem benutzerdefinierten Feld eines Teilnehmers einfügen. Fügen Sie im *Bedingungs* Feld eine JSONata-Ausdruck ein, um die Anzeigebedingungen festzulegen. Verschieben Sie dann alle Inhalte, die für eine bestimmte Teilnehmergruppe angezeigt werden sollen, innerhalb des bedingten Abschnitts dorthin.

**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.

</details>

<details>

<summary>Benutzerdefinierte Komponentenbibliotheken</summary>

Sie können Ihre eigenen Komponentenpakete erstellen und verwenden, um Ihr Advocate-Erlebnis weiter anzupassen. Diese Komponenten können jeder Vorlage hinzugefügt und zusammen mit von Advocate bereitgestellten Komponenten verwendet werden.

Advocate-Widgets verwenden standardmäßiges HTML und [Web Components](https://www.webcomponents.org/) . Um Ihre eigenen Komponenten in unserem Widget-Editor zu verwenden, müssen sie als Web Components geschrieben sein.

Um mit der Erstellung Ihres Widgets mit benutzerdefinierten Komponenten zu beginnen, installieren Sie Ihr benutzerdefiniertes Paket:

1. Wählen Sie im linken Navigationsmenü ![](/files/8189ccdb3d6833e64eac05afbd5a6e7ceadce224) **\[Engage] → Inhalte**.
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 ![](/files/2dce7a714de3b2540fb3c3421aa9c2d75fc643bd) **Paket hinzufügen**.
6. Wählen Sie ![](/files/2dce7a714de3b2540fb3c3421aa9c2d75fc643bd) **Aus NPM hinzufügen**.
7. Geben Sie das Paket ein *Namen*, *Version* und *Dateipfad*.
8. Wählen Sie **Hinzufügen**.

</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 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=<question>&goal=<endgoal>
```

`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.
