> 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, aus denen Ihr Widget oder Ihre Microsite besteht. Alle unsere aktuellen Vorlagen basieren auf unseren Mint- und Bedrock-Komponentenbibliotheken.

<details>

<summary>Mint-Komponenten</summary>

Mit Mint-Komponenten erstellte Widgets und Microsites bieten Customer Advocates die neuesten Advocate-Erlebnisse. Die meisten aktuellen Vorlagen verwenden Mint-Komponenten. Wenn Sie nicht sicher sind, ob Sie die aktuelle Komponentenbibliothek verwenden, können Sie dies manuell überprüfen und Ihre Bibliothek bei Bedarf aktualisieren.

Um auf Mint-Komponenten für Ihr **Programm-Widget**:

1. Wählen Sie im linken Navigationsmenü ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[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 ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Paket hinzufügen**.
6. Wählen Sie **Hinzufügen** auf der *Mint-Komponenten* Karte.

Um auf Mint-Komponenten für Ihr **Microsite**:

1. Wählen Sie im linken Navigationsmenü ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Inhalt.**
2. Wählen Sie die **Einstellungen bearbeiten** Schaltfläche auf der *Microsite* Karte.
3. Unter dem *Website-Hosting* Überschrift, navigieren Sie zur *Pakete* Sektion zugreifen.
4. Wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Paket hinzufügen**.
5. Wählen Sie **Hinzufügen** auf der *Mint-Komponenten* Karte.
6. Wählen Sie **Speichern**.

</details>

<details>

<summary>Bedrock-Komponenten</summary>

Alle Vorlagen, die auf Mint-Komponenten basieren, haben auch das Bedrock-Komponentenpaket installiert. Bedrock-Komponenten sind für Teilnehmende nicht sichtbar, bieten jedoch die Möglichkeit, Ihrem Design erweiterte Logik hinzuzufügen. Sie können andere Komponenten bedingt anzeigen und festlegen, von welchem Programm eine Komponente ihre Daten bezieht. Sie finden das Bedrock-Komponentenpaket in der *Erweiterte Komponenten* Abschnitt innerhalb der *Hinzufügen* Registerkarte im Widget- oder Microsite-Editor.

Im Bedrock-Komponentenpaket gibt es zwei Komponenten:

**Bedingter Abschnitt**

Der *bedingter Abschnitt* Komponente können Sie bedingte Inhalte basierend auf der E-Mail, dem Land, dem Segment oder einem benutzerdefinierten Feld eines Teilnehmenden einfügen. Fügen Sie im *Bedingung* Feld die Anzeigebedingungen fest. Verschieben Sie dann alle Inhalte, die für eine bestimmte Gruppe von Teilnehmenden angezeigt werden sollen, innerhalb des bedingten Abschnitts dorthin.

**Programmabschnitt**

Der *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 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/) . Damit Sie Ihre eigenen Komponenten in unserem Widget-Editor verwenden können, müssen sie als Webkomponenten 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ü ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Inhalt**.
2. Wählen Sie **Widgets bearbeiten** auf der Widget-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 ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Paket hinzufügen**.
6. Wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Aus NPM hinzufügen**.
7. Geben Sie das Paket ein *name*, *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 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/de/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.
