# Komponentbibliotheken erklärt

Komponenten sind die einzelnen Bausteine, wie Hero-Bilder und Aufgaben-Karten, die Ihr Widget oder Ihre Microsite ausmachen. Alle unsere aktuellen Vorlagen werden von unseren Component-Bibliotheken Mint und Bedrock unterstützt.

<details>

<summary>Mint-Komponenten</summary>

Widgets und Microsites, die mit Mint-Komponenten erstellt wurden, bieten Kundenbefürwortern 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 bei Bedarf Ihre Bibliothek aktualisieren.

Um auf Mint-Komponenten für Ihr **Program-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, 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 der *Site-Hosting* Überschrift, navigieren Sie zum *Pakete* Abschnitt.
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 von Mint-Komponenten unterstützt werden, haben außerdem das Bedrock-Komponentenpaket installiert. Bedrock-Komponenten sind für Teilnehmende nicht sichtbar, bieten jedoch die Möglichkeit, erweiterte Logik in Ihr Design einzubringen. Sie können andere Komponenten bedingt anzeigen und festlegen, aus welchem Programm eine Komponente ihre Daten bezieht. Das Bedrock-Komponentenpaket finden Sie im *Erweiterte Komponenten* Abschnitt innerhalb des *Hinzufügen* Tabs im Widget- oder Microsite-Editor.

Im Bedrock-Komponentenpaket gibt es zwei Komponenten:

**Bedingter Abschnitt**

Die *bedingte Abschnitt* Komponente ermöglicht es Ihnen, bedingte Inhalte basierend auf der E-Mail-Adresse, dem Land, dem Segment oder einem benutzerdefinierten Feld eines Teilnehmers einzubinden. Fügen Sie einen JSONata-Ausdruck in das *Bedingung* Feld ein, um die Anzeigebedingungen festzulegen. Verschieben Sie dann alle Inhalte, die Sie einer bestimmten Teilnehmergruppe anzeigen möchten, in den bedingten Abschnitt.

**Programmabschnitt**

Die *Programmabschnitt* Komponente ermöglicht es Ihnen, die Programm-ID ihrer Kindkomponenten zu ü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 eigene Komponentenpakete erstellen und verwenden, um das 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.

Um mit dem Erstellen 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 Widgets-Karte.
3. Wählen Sie den Namen des Widgets, 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) **Von NPM hinzufügen**.
7. Geben Sie den Paket *Namen*, *Version* und *Dateipfad*.
8. Wählen Sie **Hinzufügen**.

</details>
