> 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/widget-and-microsite-components-explained.md).

# Komponenten von Widgets und Microsites erklärt

<a href="https://pxa.impact.com/student/activity/2359603?sid=0c0e3e5c-54c9-4435-9bee-ebcdccb7f292&#x26;sid_i=0?utm_source=app.impact.com&#x26;utm_medium=owned-platform&#x26;utm_content=&#x26;utm_campaign=help-center" class="button primary">Nimm am PXA-Kurs teil</a>

{% hint style="success" %}
**Eingeschränkt**: Komponenten sind, abgesehen von den in den bereitgestellten Vorlagen enthaltenen, nur für bestimmte Produkteditionen oder Add-ons verfügbar. Wenn Sie mehr granulare Kontrolle darüber wünschen, welche Komponenten Ihre Microsites verwenden, kontaktieren Sie uns, um Ihr Programm zu erweitern.
{% endhint %}

Komponenten sind die einzelnen Bausteine, wie Hero-Bilder und Task-Karten, aus denen das Widget oder die Microsite Ihres Advocate-Programms besteht. Diese Elemente prägen das [Teilnehmererlebnis](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/introduction-to-participant-experiences.md) und können an Ihre Marke angepasst werden.

Dieser Artikel bietet eine kategorisierte Liste der verfügbaren Komponenten in den Widget- und Microsite-Editoren. Die meisten Komponenten unterstützen Styling und Anpassung, obwohl einige Designbeschränkungen haben. Sie können auch Ihre Komponenten-Zustände in der Editor-Oberfläche in der Vorschau anzeigen.

<details>

<summary>Statistiken</summary>

Verwenden Sie *Statistiken* Komponenten, um Ihren Teilnehmern zu zeigen, wie sie in Ihrem Programm abschneiden. Eine Liste der Statistiken, die diese Komponenten unterstützen können, finden Sie unter [Statistiken für Widget und Microsite](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained.md).

| Komponenten                    | Beschreibung                                                                                                                                                                     |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Punkteguthaben                 | Zeigt das Punkteguthaben des Teilnehmers an. Wird in Advocate-Programmen verwendet, die Teilnehmer mit Punkten belohnen.                                                         |
| Verdiente Geschenkkarten       | Zeigt die Anzahl der vom Advocate verdienten Geschenkkarten-Belohnungen an.                                                                                                      |
| Empfehlungen                   | Zeigt an, wie viele Empfehlungen der Teilnehmer ausgesprochen hat. Beinhaltet gestartete und konvertierte Empfehlungen.                                                          |
| Container mit drei Statistiken | Eine Vorlage mit Platz für drei Statistiken. Die angezeigten Statistiken können geändert werden. Statistiken können nach Belieben hinzugefügt und entfernt werden.               |
| Andere Statistik               | Zeigt eine Statistik Ihrer Wahl an. Sie können zwischen einer Empfehlungsstatistik, verschiedenen Belohnungsstatistiken wählen oder eine benutzerdefinierte Statistik erstellen. |

<figure><img src="/files/e24d4b5608de0386f9e44d550567380594de2c65" alt="" width="563"><figcaption></figcaption></figure>

</details>

<details>

<summary>Häufige Komponenten</summary>

*Häufige Komponenten* werden häufig verwendet, um sowohl die Funktionalität als auch die Designkonsistenz in Ihrem Widget oder Ihrer Microsite zu verbessern. Sie decken allgemeine visuelle und strukturelle Elemente wie Hero-Bilder, Layout-Formatierung und beschreibende Programmschritte ab.

| Komponenten                   | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Hero-Bild mit zwei Spalten    | <p>Ein Bannerbild und Header-Text über zwei Spalten hinweg. Das Bild, der Text und die Hintergrundfarbe können aktualisiert werden.</p><p><img src="/files/f1b460483b0d3f16c8097e30986ed31110357daf" alt="" data-size="original"></p>                                                                                                                                                                                          |
| Hero-Bild mit Überlagerung    | <p>Ein Bannerbild mit überlagertem Text. Das Bild, der Text und die Hintergrundfarbe können aktualisiert werden.</p><p><img src="/files/db9241abde0442082e8ae047e22f9c985eb089c9" alt="" data-size="original"></p>                                                                                                                                                                                                             |
| Bild                          | <p>Ein Bild. Die Hintergrundfarbe, Ausrichtung, Höhe und Breite können geändert werden.</p><p><img src="/files/403d8e2ddf72dfcb79fd718c3fa6aaa2c214d9e2" alt="" data-size="original"></p>                                                                                                                                                                                                                                      |
| Link-Schaltfläche             | <p>Eine anklickbare Schaltfläche, die Teilnehmer zu Ihrem ausgewählten Link weiterleitet. Die Schaltflächenfarbe wird durch die auf Ebene des Brand Containers festgelegte Markenfarbe gesteuert.</p><p><img src="/files/55565b0b8c3602d1a293354318710e54d51ab4a0" alt="" data-size="original"></p>                                                                                                                            |
| Programmerklärung             | <p>Eine Vorlage, die erklärt, wie ein Advocate-Programm funktioniert, z. B. wie Belohnungen verdient werden. Enthält standardmäßig zwei Schritte der Programmerklärung. Weitere Schritte können hinzugefügt werden. Die Farbe wird durch die auf Ebene des Brand Containers festgelegte Markenfarbe gesteuert.</p><p><img src="/files/7833dfb3ea8c30df2f4e97d2a6e5746fe4dc8abb" alt="" data-size="original"></p>               |
| Schritt der Programmerklärung | <p>Fügen Sie beschreibenden Text hinzu, um einen Teil Ihres Programms zu erklären. Passt in eine Komponente der Programmerklärung. Die Farbe wird durch die auf Ebene des Brand Containers festgelegte Markenfarbe gesteuert.</p><p><img src="/files/0e76c2857b3c8076c7de422b265409112a96010a" alt="" data-size="original"></p>                                                                                                |
| Programm-Zeitachse            | <p>Zeigen Sie Ihren Teilnehmern einen Überblick über die Empfehlungsreise und die Belohnungen an. Fügen Sie Zeitachsen-Einträge nach Bedarf hinzu oder entfernen Sie sie. Die Farbe des Kreis-Symbols und der Linien zwischen den Einträgen wird durch die auf Ebene des Brand Containers festgelegte Markenfarbe gesteuert.</p><p><img src="/files/e5413bb3ebe196c3d693fbcd3dd53d985b88fa7a" alt="" data-size="original"></p> |
| Zeitachsen-Eintrag            | <p>Passt in eine Programm-Zeitachsenkomponente, um einen Schritt der Empfehlungsreise anzuzeigen. Die Farbe des Kreis-Symbols und der Linien zwischen den Einträgen wird durch die auf Ebene des Brand Containers festgelegte Markenfarbe gesteuert.</p><p><img src="/files/02ca2925d5177a30868ed27b8351321c13c0bdeb" alt="" data-size="original"></p>                                                                         |
| Anzeigename des Benutzers     | <p>Zieht dynamisch den vollständigen Namen des Teilnehmers ein. Standardmäßig „Anonymer Benutzer“, wenn der Teilnehmer keinen Namen eingegeben hat.</p><p><img src="/files/2320a0c1f43a9fd0f17bdaa838095bffcd9a304c" alt="" data-size="original"></p>                                                                                                                                                                          |

</details>

<details>

<summary>Prämien</summary>

{% hint style="info" %}
**Hinweis:** *Belohnung* Komponenten können nur für Widgets und Microsites mit verifiziertem Zugriff verwendet werden.
{% endhint %}

| Komponenten              | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Task-Karten-Feed         | <p>Task-Karten ermöglichen es Ihren Nutzern, Aktionen auszuführen oder ihren Fortschritt in Richtung der Ziele des Advocate-Programms direkt im Widget oder in der Microsite zu sehen. Diese Komponente fügt Ihrem Widget oder Ihrer Microsite mehrere Task-Karten hinzu. Die Schaltflächenfarbe wird durch die auf Ebene des Brand Containers festgelegte Markenfarbe gesteuert.</p><p><img src="/files/9cbc4dbe2f4ad447e773742f4e3fbfd402ff1b4a" alt="" data-size="original"></p> |
| Belohnungstausch         | <p>Ermöglichen Sie Teilnehmern, verdiente Belohnungen gegen eine andere Art von Belohnung einzutauschen.</p><p>Sie müssen <a href="/pages/b9ab78fd786708d7957d9b930fef49572bffa03a">Belohnungstausch</a> eingerichtet haben, um diese Funktion zu verwenden.</p><p><img src="/files/27a5dd8c69c7383c5e5820f15a753f88f33ff142" alt="" data-size="original"></p>                                                                                                                      |
| Belohnungstabelle        | <p>Zeigt eine Liste der Belohnungen an, die der Teilnehmer verdient hat. Kann manuelle Belohnungen und/oder Belohnungen aus mehreren Advocate-Programmen enthalten.</p><p><img src="/files/3477502c9f7c06c697b681fcd541bf59d0fe95d3" alt="" data-size="original"></p>                                                                                                                                                                                                               |
| Spalte für Kundennotizen | <p>Fügen Sie der Belohnungstabelle eine weitere Notizspalte hinzu. Muss innerhalb der Komponente „Belohnungstabelle“ platziert werden.</p><p><img src="/files/a226edcc3eba7f7944e6565dd6ef77df06e7f1db" alt="" data-size="original"></p>                                                                                                                                                                                                                                            |
| Datums-Spalte            | <p>Fügen Sie der Belohnungstabelle eine weitere Datumsspalte hinzu. Muss innerhalb der Komponente „Belohnungstabelle“ platziert werden.</p><p><img src="/files/3b82220dea659e4493a774a63f9a07c9e3cbcde7" alt="" data-size="original"></p>                                                                                                                                                                                                                                           |
| Belohnungsspalte         | <p>Fügen Sie der Belohnungstabelle eine weitere Belohnungsspalte hinzu. Muss innerhalb der Komponente „Belohnungstabelle“ platziert werden.</p><p><img src="/files/e90b813d1bcac45855a0f34aee3084d4df84d27d" alt="" data-size="original"></p>                                                                                                                                                                                                                                       |
| Quellen-Spalte           | <p>Fügen Sie der Belohnungstabelle eine weitere Quellenspalte hinzu. Muss innerhalb der Komponente „Belohnungstabelle“ platziert werden.</p><p><img src="/files/a68b9f3d23a419d2b612a777bbb05df0a415b7b2" alt="" data-size="original"></p>                                                                                                                                                                                                                                          |
| Statusspalte             | <p>Fügen Sie der Belohnungstabelle eine weitere Statusspalte hinzu. Muss innerhalb der Komponente „Belohnungstabelle“ platziert werden.</p><p><img src="/files/4d5ca47d83c4468b420318d37071bff19f89014e" alt="" data-size="original"></p>                                                                                                                                                                                                                                           |

</details>

<details>

<summary>Microsite-Komponenten</summary>

*Microsite* Komponenten werden hauptsächlich für das Registrierungsformular und die Navigations-Seitenleiste Ihrer Microsite verwendet. Diese Komponenten können nicht zu Programm-Widgets hinzugefügt werden.

| Komponenten            | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Formular-Checkbox-Feld | <p>Fügen Sie dem Registrierungsformular ein Kontrollkästchen hinzu. Sie können zuordnen, ob das Kästchen angekreuzt wurde, zu einem benutzerdefinierten Feld des Advocate-Teilnehmers. Lesen Sie „Ihre Einreichungen des Microsite-Registrierungsformulars anzeigen“ für weitere Informationen.</p><p><img src="/files/27e6a10f7d7f905091942201adca065921f89f2c" alt="" data-size="original"></p>                         |
| Formular-Dropdown-Feld | <p>Fügen Sie dem Registrierungsformular eine Dropdown-Liste mit anpassbaren Listenelementen hinzu. Sie können das vom Nutzer ausgewählte Listenelement einem benutzerdefinierten Feld des Advocate-Teilnehmers zuordnen. Kontaktieren Sie den Support für Unterstützung dabei.</p><p><img src="/files/65e3133e895bdd1a6506935350e9fbfd4d137206" alt="" data-size="original"></p>                                          |
| Formular-Eingabefeld   | <p>Fügen Sie dem Registrierungsformular ein freies Texteingabefeld hinzu. Sie können den vom Nutzer eingegebenen Text einem benutzerdefinierten Feld des Advocate-Teilnehmers zuordnen. <a href="https://app.impact.com/support/portal.ihtml?createTicket=true&#x26;">Support kontaktieren</a> für Unterstützung dabei.</p><p><img src="/files/e7eb7ed3082d672f14f25f75c13387588652fcd4" alt="" data-size="original"></p> |
| Formular-Namensfelder  | <p>Fügen Sie dem Registrierungsformular ausfüllbare Felder für Vorname und Nachname hinzu.</p><p><img src="/files/d65d7204ec95865a4a320f80926e1f440e267460" alt="" data-size="original"></p>                                                                                                                                                                                                                              |
| Seitenleisten-Element  | <p>Fügen Sie der Seitenleisten-Navigation Ihrer Microsite eine neue Seite oder einen neuen Link hinzu. Kann nur innerhalb des „Eingeloggt“-Layouts der Microsite platziert werden.</p><p><img src="/files/a2572b59c0be289926cb0073ca10ce2a721379f3" alt="" data-size="original"></p>                                                                                                                                      |
| Formular-Passwortfeld  | <p>Fügen Sie dem Registrierungsformular ein ausfüllbares Passwortfeld hinzu.</p><p><img src="/files/418c8e7c8e8bc93c78bbb3dac3c27b7f866be721" alt="" data-size="original"></p>                                                                                                                                                                                                                                            |

</details>

<details>

<summary>Sofortiger Zugriff</summary>

*Sofortiger Zugriff* Komponenten machen es für geworbene Freunde schnell und einfach, sich anzumelden oder Belohnungen einzulösen, ohne den Standard-Registrierungsprozess zu durchlaufen. Sie sind ideal für Programme mit Referral-Widgets für sofortigen Zugriff oder Registrierungsabläufen für Freunde.

| Komponenten                 | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                              |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Gutscheincode               | <p>Zeigt einen einlösbaren Code für eine Fuel-Tank-Belohnung an.</p><p>Die <a href="/pages/9b9c427433fbc2084c461dd68e68a4264e041cdc">Belohnungs-Fuel-Tank</a> muss verfügbare Gutscheincodes haben, damit diese Komponente wie vorgesehen funktioniert.</p><p><img src="/files/1556c8d7ca85419d5ad187f0d14a5e9beec2959a" alt="" data-size="original"></p>                                                                                 |
| Advocate-Registrierung      | <p>Ermöglicht es neuen Advocates, ihre E-Mail-Adresse einzugeben, um sich zu registrieren und Empfehlungen zu machen. Nach Eingabe ihrer E-Mail-Adresse gelangen die Nutzer zu einem zweiten Bildschirm, auf dem sie auf ihre Empfehlungs-Sharelinks zugreifen können. Wird für das Widget zur sofortigen Website-Empfehlung verwendet.</p><p><img src="/files/d86fadc88a08add7f3bdc746f9425dd48e702d68" alt="" data-size="original"></p> |
| Aktuellen Benutzer abmelden | <p>Ermöglicht dem Betrachter, die personalisierte Anzeige für den Sofortzugriff zu verlassen.</p><p><img src="/files/f78afd34712f1208b6e6756b0a2783e91dcc29c2" alt="" data-size="original"></p>                                                                                                                                                                                                                                           |
| Freundesregistrierung       | <p>Ermöglicht es geworbenen Freunden, ihre E-Mail-Adresse einzugeben, um sich zu registrieren. Nach Eingabe ihrer E-Mail-Adresse gelangen die Nutzer zu einem zweiten Bildschirm, auf dem sie auf ihre Coupon-Code-Belohnung zugreifen können. Wird für das Widget für sofortigen Freundezugriff verwendet.</p><p><img src="/files/d86fadc88a08add7f3bdc746f9425dd48e702d68" alt="" data-size="original"></p>                             |

</details>

<details>

<summary>Layout</summary>

*Layout* Komponenten ermöglichen es Ihnen, andere Komponenten zu organisieren und zu gruppieren. Verwenden Sie sie, um Abschnitte, Zeilen, Spalten oder Tabs zu erstellen.

| Komponenten                  | Beschreibung                                                                                                                                                                                                                                                                                                   |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Hero-Layout mit zwei Spalten | <p>Fügen Sie ein Hero-Layout mit zwei Inhalts-Spalten hinzu.</p><p><img src="/files/5838d521dd6596afc8934d91a17f1a15e6c622dc" alt="" data-size="original"></p>                                                                                                                                                 |
| Zeilen-Layout-Container      | <p>Fügen Sie einen neuen Zeilen-Container für Inhalte hinzu. Andere Komponenten können innerhalb der Zeile platziert werden.</p><p><img src="/files/cdbc27803366b4cdab1af365ada9ec2d424d2d12" alt="" data-size="original"></p>                                                                                 |
| Spalten-Layout-Container     | <p>Fügen Sie einen neuen Spalten-Container für Inhalte hinzu. Andere Komponenten können innerhalb der Spalte platziert werden.</p><p><img src="/files/cdbc27803366b4cdab1af365ada9ec2d424d2d12" alt="" data-size="original"></p>                                                                               |
| Tab                          | <p>Fügen Sie einer allgemeinen Tab-Gruppe einen neuen Tab hinzu.</p><p><img src="/files/ce714a2f023aa633630e66d9ad526b4ae5c10d46" alt="" data-size="original"></p>                                                                                                                                             |
| Allgemeine Tab-Gruppe        | <p>Fügen Sie eine Gruppe von Tabs hinzu. Jeder Tab kann unterschiedliche Komponenten und Inhalte enthalten. Standardmäßig sind drei Tabs enthalten, können aber bei Bedarf entfernt oder hinzugefügt werden.</p><p><img src="/files/73c170880b6df0921c961f06d35ffa5c5423fcc3" alt="" data-size="original"></p> |
| Titelabschnitt               | <p>Fügen Sie einen neuen Abschnitt hinzu, der eine Überschrift und einen Absatztext enthält. Andere Komponenten können dem Titelabschnitt unter der Überschrift hinzugefügt werden.</p><p><img src="/files/7add95745dd4462239b1c36f0dd143cbcca9033a" alt="" data-size="original"></p>                          |

</details>

<details>

<summary>Rechnungen</summary>

*Rechnung* Komponenten ermöglichen es Ihnen, Rechnungskomponenten einzufügen, um Ertragsdaten anzuzeigen.

| Komponenten                      | Beschreibung                                                                                                                                                                         |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Rechnungstabelle                 | <p>Fügen Sie ein aufklappbares Rechnung-Accordion hinzu, das Ertragsdaten enthält.</p><p><img src="/files/a014e06b4b16b9dbaf04d9df7e0ed7bf9330f566" alt="" data-size="original"></p> |
| Datenspalte der Rechnungstabelle | <p>Fügen Sie Ihrer Rechnungstabellen-Komponente eine neue Spalte hinzu.</p><p><img src="/files/a86ac7d6548ef7639b34ae6f0b26f6b38cc88284" alt="" data-size="original"></p>            |

</details>

Die *Bestenliste* Die Komponente ermöglicht es Ihnen, Ihre Programmteilnehmer zu ranken, Belohnungen für Top-Performer anzubieten und Teilnehmer zu motivieren, um in Ihrem Programm bessere Ergebnisse zu erzielen. Fügen Sie Bestenlisten zu Ihrem [Widget für verifizierten Zugriff](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) oder [Microsite](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md)hinzu, und konfigurieren Sie das Bewertungssystem, das Rangsystem und die Optionen zur Teilnehmerfilterung. Weitere Informationen finden Sie in den folgenden Artikeln:

* [Bestenlisten erklärt](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/leaderboards-explained.md)
* [Eine Bestenliste einrichten](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/set-up-a-leaderboard.md)

| Komponenten            | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Empfehlung gestartet   | <p>Diese Art von Bestenliste rankt Teilnehmer nach der Anzahl der Empfehlungen, die sie initiiert haben. Die Punktzahlen Ihrer Kunden-Advocates entsprechen der Anzahl der initiierten Empfehlungen.</p><p><img src="/files/c5b0bd96fb29a1c1c67f2788907c59a53f850ac8" alt="" data-size="original"></p>                                                                                                                                                             |
| Empfehlung konvertiert | <p>Diese Art von Bestenliste rankt Teilnehmer nach der Anzahl der Empfehlungen, die sie konvertiert haben. Empfehlungen gelten als konvertiert, sobald der geworbene Freund ein Programmziel erreicht, z. B. einen Kauf in der von Ihnen festgelegten Höhe tätigt. Die Punktzahlen Ihrer Kunden-Advocates entsprechen der Anzahl der konvertierten Empfehlungen.</p><p><img src="/files/c5b0bd96fb29a1c1c67f2788907c59a53f850ac8" alt="" data-size="original"></p> |
| Verdiente Punkte       | <p>Diese Art von Bestenliste rankt Teilnehmer nach der Gesamtzahl der Punkte, die sie in Advocate-Programmen verdient haben, die Punkte belohnen. Alle Belohnungseinheiten in Punkten zählen, solange sie nicht ausstehend oder storniert sind. Dieser Bestenlisten-Typ ist nur für den Punkt-Belohnungstyp gültig.</p><p><img src="/files/b924671dd6cc14786b370e86eb75b250efffa1a5" alt="" data-size="original"></p>                                              |
| Anonyme Bestenliste    | <p>Eine vollständig anonymisierte Version der Bestenliste, die keine personenbezogenen Informationen über andere Programmteilnehmer anzeigt. Kann jeden Bestenlisten-Typ anzeigen.</p><p><img src="/files/e26042888a71f70cae47faecac3385f6cedbed67" alt="" data-size="original"></p>                                                                                                                                                                               |

<details>

<summary>Steuern und Bargeld</summary>

*Steuern und Bargeld* Komponenten ermöglichen es Ihnen, die Erfassung von Steuerformularen und Optionen für Barauszahlungen in Ihr [Widget für verifizierten Zugriff](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) oder [Microsite](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md).

Diese Komponenten-Gruppe ist nur verfügbar, wenn die [*Barauszahlungen*](/brand/de/what-would-you-like-to-learn-about/advocate-program/advocate-rewards/pay-with-cash/cash-payouts-for-advocate-explained.md) Funktion für Ihr Konto aktiviert wurde.

| Komponenten                                       | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Warnung zum Auszahlungsstatus                     | <p>Warnen Sie den Teilnehmer vor den Maßnahmen, die er ergreifen muss, bevor er eine Barauszahlung erhalten kann. Die Komponente enthält eine Call-to-Action-Schaltfläche, die den Teilnehmer zu seinen Auszahlungs-Einstellungen führt.</p><p>Optional können Sie alle Textbeschreibungen anpassen, die der Teilnehmer sieht, wenn er die Komponente betrachtet.</p><p><img src="/files/8915d926a831011703022e4a91cfa0e33c3821ed" alt="" data-size="original"></p>  |
| Bargeldauszahlungsformular für Microsite & Widget | <p>Fügen Sie ein Formular ein, das die Bankdaten der Teilnehmer und alle zutreffenden Steuerformulare erfasst, wie z. B. ein W-8 oder W-9.</p><p>Optional können Sie alle Textbeschreibungen anpassen, die der Teilnehmer sieht, wenn er das Formular betrachtet.</p><p>Sie können in dieser Komponente auch Verifizierungswarnungen und -anforderungen festlegen.</p><p><img src="/files/50173fe055819a8550137123cf033e22866cddad" alt="" data-size="original"></p> |

</details>

<details>

<summary>Teilen</summary>

*Teilen* Komponenten bieten Teilnehmern praktische Möglichkeiten, ihre Empfehlungslinks und -codes über mehrere Kanäle zu bewerben. Wenn ein Teilnehmer auf eine Teilen-Schaltfläche klickt, öffnet sich der gewählte Kanal, z. B. *Facebook*, *LinkedIn*, *WhatsApp*oder *E-Mail-*&#x6D;it einer vorab ausgefüllten Nachricht oder einem Link, bereit zum Senden.

Einige Komponenten, wie der Empfehlungs-Code, zeigen den individuellen Empfehlungs- oder Promo-Code des Teilnehmers zusammen mit einer Option zum Kopieren in die Zwischenablage für schnelles Teilen. Andere, wie Promo-Codes, stellen mehrere verfügbare Codes (falls zugewiesen) in einer Slider-Ansicht dar und enthalten Teilen-Schaltflächen, sodass Teilnehmer den ausgewählten Code sofort posten oder senden können. Diese Tools machen es den Teilnehmern leicht, die Werbetrommel zu rühren und neue Empfehlungen zu generieren.

| Komponenten                      | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Empfehlungscode                  | <p>Zeigt ein Empfehlungs-Code-Feld mit einer Option zum Kopieren in die Zwischenablage an. Wird als Teil der Promo-Codes-Funktion verwendet.</p><p><img src="/files/6dfaf3494cc52f76b5e839fe66ef6230220d65b0" alt="" data-size="original"></p>                                                                                                                                                                                                          |
| Promo-Codes                      | <p>Vorgefertigter Komponentenblock, der ein Empfehlungs-Promo-Code-Feld mit Slider zum Wechseln zwischen verschiedenen Codes enthält, wenn mehr als einer zugewiesen wurde. Er enthält außerdem einen Share-Link sowie Facebook-, LinkedIn- und Twitter-/X-Teilen-Schaltflächenkomponenten.</p><p><img src="/files/8d23a3d8c1155771433d1bf54356b09bafe5581b" alt="" data-size="original"></p>                                                           |
| Facebook-Teilen-Schaltfläche     | <p>Zeigt eine „Auf Facebook teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken leitet die Schaltfläche zu einem neuen Beitrag im Facebook-Profil des Nutzers weiter, wobei die Social Messaging-Inhalte der Marke bereits vorab geladen sind.</p><p><img src="/files/e6aac52c5968187d133cb6acf49e770cccb67e2d" alt="" data-size="original"></p>                                                                                                 |
| X-Teilen-Schaltfläche            | <p>Zeigt eine „Über X teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken leitet die Schaltfläche zu einem neuen Beitrag im X-Konto des Nutzers weiter, wobei die Social Messaging-Inhalte der Marke bereits vorab geladen sind.</p><p><img src="/files/ad4fe76daf08f0efd3659f367f57277e82d9cb16" alt="" data-size="original"></p>                                                                                                               |
| E-Mail-Teilen-Schaltfläche       | <p>Zeigt eine „Per E-Mail teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken öffnet die Schaltfläche die Standard-E-Mail-Anwendung des Nutzers und erstellt eine neue E-Mail mit den vorab geladenen Social-Messaging-Inhalten der Marke.</p><p><img src="/files/64b075a2994721c83bbe0c7fd85b113398a2e06f" alt="" data-size="original"></p>                                                                                                     |
| Mobile-Teilen-Blatt-Schaltfläche | <p>Zeigt eine Schaltfläche zum Teilen im Webbrowser des Teilnehmers an. Beim Klicken öffnet die Schaltfläche ein Menü mit allen verfügbaren Apps, die der Nutzer zum Teilen seines Links öffnen kann. Wenn eine App ausgewählt wird, wird ein neuer Beitrag oder eine Nachricht mit den vorab geladenen Social-Messaging-Inhalten der Marke erstellt.</p><p><img src="/files/c9436207ac2794aa156545425c177a519e089c4d" alt="" data-size="original"></p> |
| LinkedIn-Teilen-Schaltfläche     | <p>Zeigt eine „Auf LinkedIn teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken leitet die Schaltfläche zu einem neuen Beitrag im LinkedIn-Profil des Nutzers weiter, wobei die Social Messaging-Inhalte der Marke bereits vorab geladen sind.</p><p><img src="/files/a1c57f37bef167089298857c482021a584236c1d" alt="" data-size="original"></p>                                                                                                 |
| SMS-Teilen-Schaltfläche          | <p>Zeigt eine „Einem Freund schreiben“-Schaltfläche mit anpassbarem Text an. Beim Klicken leitet die Schaltfläche zur standardmäßigen SMS-/Textnachrichten-App des Nutzers weiter, und eine neue SMS-/Textnachricht wird mit den vorab geladenen Social-Messaging-Inhalten der Marke erstellt.</p><p><img src="/files/4720f72fad53867faf27b9f29b748a6d69150ddf" alt="" data-size="original"></p>                                                        |
| Messenger-Teilen-Schaltfläche    | <p>Zeigt eine „Über Messenger teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken leitet die Schaltfläche zu einer neuen Nachricht in der Facebook-Messenger-App des Nutzers weiter, wobei die Social Messaging-Inhalte der Marke bereits vorab geladen sind.</p><p><img src="/files/d61e2d68c9de08d97e1b9fcd6644bcea11408bd4" alt="" data-size="original"></p>                                                                                  |
| WhatsApp-Teilen-Schaltfläche     | <p>Zeigt eine „Über WhatsApp teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken leitet die Schaltfläche zu einer neuen Nachricht im WhatsApp-Konto des Nutzers weiter, wobei die Social Messaging-Inhalte der Marke bereits vorab geladen sind.</p><p><img src="/files/46d7c3860d81327f91884fdec6a5514e759a90ec" alt="" data-size="original"></p>                                                                                               |
| LINE-Teilen-Schaltfläche         | <p>Zeigt eine „Über Line Messenger teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken leitet die Schaltfläche zu einer neuen Nachricht in der Line-Messenger-App des Nutzers weiter, wobei die Social Messaging-Inhalte der Marke bereits vorab geladen sind.</p><p><img src="/files/c85c40e4fb3521ba3ad5a8f75828756b2c38b571" alt="" data-size="original"></p>                                                                                 |
| Pinterest-Teilen-Schaltfläche    | <p>Zeigt eine „Auf Pinterest teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken leitet die Schaltfläche zu einem neuen Beitrag im Pinterest-Profil des Nutzers weiter, wobei die Social Messaging-Inhalte der Marke bereits vorab geladen sind.</p><p><img src="/files/3bfb404865d12d73a350b846bda00d3678111c79" alt="" data-size="original"></p>                                                                                               |
| Share-Link                       | <p>Zeigt den Share-Link des Teilnehmers für dieses Programm an.</p><p><img src="/files/1072914bd791764e39ed67034971861300f4c6be" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                       |
| QR-Code                          | <p>Zeigt den Share-Link des Teilnehmers für dieses Programm in Form eines QR-Codes an.</p><p><img src="/files/3c6ca7eeb119af8015b71a235167b433e0cdb64e" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                |

</details>

<details>

<summary>Empfehlungen</summary>

*Empfehlung* Komponenten zeigen Informationen über die geworbenen Freunde des Teilnehmers und deren Konversionsstatus an. Sie erleichtern es den Teilnehmern nachzuverfolgen, wen sie geworben haben, wann Konversionen stattgefunden haben und welche Belohnungen aus diesen Empfehlungen verdient wurden.

| Komponenten                             | Beschreibung                                                                                                                                                                                                                                                                                                                                                |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Empfehlungskarte                        | <p>Vorgefertigter Komponentenblock, der <em>Programm-Zeitachse</em>, <em>Share-Link</em>und <em>Facebook</em>, <em>LinkedIn,</em> und <em>Twitter / X</em> Teilen-Schaltflächenkomponenten. Kann bei Bedarf andere Komponenten hinzufügen oder entfernen.</p><p><img src="/files/b2527292c0fc5d5e0e21c75f17d76612ab8a5dbf" alt="" data-size="original"></p> |
| Empfehlungstabelle                      | <p>Zeigt eine Tabelle mit den geworbenen Freunden des Teilnehmers, dem Konversionsdatum und dem Konversionsstatus an.</p><p><img src="/files/8da5759f85d51ceb44bc607e2827ed17af188c7e" alt="" data-size="original"></p>                                                                                                                                     |
| Datumsspalte der Empfehlungstabelle     | <p>Fügen Sie der Empfehlungstabelle eine weitere Datumsspalte hinzu. Muss innerhalb der Komponente „Empfehlungstabelle“ platziert werden.</p><p><img src="/files/a9a98a25b91d89109617996382f4c524bc4edcf2" alt="" data-size="original"></p>                                                                                                                 |
| Belohnungsspalte der Empfehlungstabelle | <p>Fügen Sie der Empfehlungstabelle eine weitere Belohnungsspalte hinzu. Muss innerhalb der Komponente „Empfehlungstabelle“ platziert werden.</p><p><img src="/files/1bcb46410bc5b645eb2266cf1b39cf4e7bcd2a3f" alt="" data-size="original"></p>                                                                                                             |
| Statusspalte der Empfehlungstabelle     | <p>Fügen Sie der Empfehlungstabelle eine weitere Statusspalte hinzu. Muss innerhalb der Komponente „Empfehlungstabelle“ platziert werden.</p><p><img src="/files/981f986b2c8ba2907c561e3af728b1c0e1916c0a" alt="" data-size="original"></p>                                                                                                                 |
| Benutzerspalte der Empfehlungstabelle   | <p>Fügen Sie der Empfehlungstabelle eine weitere Kunden-(geworbener Freund)-Spalte hinzu. Muss innerhalb der Komponente „Empfehlungstabelle“ platziert werden.</p><p><img src="/files/7ac2ad6f70b468fd4af8501a6e69ecc43cad20e6" alt="" data-size="original"></p>                                                                                            |

</details>

<details>

<summary>Erweitert</summary>

Erweiterte Komponenten geben Ihnen mehr Kontrolle darüber, was Teilnehmer sehen und wann sie es sehen. Sie ermöglichen eine bedingte Anzeige von Inhalten, Programm-Überschreibungen und andere spezialisierte Konfigurationen, die helfen, das Erlebnis für bestimmte Zielgruppen anzupassen.

| Komponenten                 | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Bedingter Bereich / Segment | <p>Zeigt Inhalte in diesem Abschnitt nur an, wenn der Teilnehmer zu einem bestimmten <a href="/pages/1e1a3d7aeba6aba64849969d5e172ee944aa4625">Nutzersegment</a>.</p><p>Um das Benutzersegment festzulegen, öffnen Sie die Eigenschaften der Komponente und bearbeiten Sie den JSONata-Ausdruck im <em>Bedingungs</em> Feld.</p><p>Benutzer innerhalb des festgelegten Segments sehen alle im bedingten Abschnitt angezeigten Inhalte, während Benutzer außerhalb des Segments die Inhalte nicht sehen.</p><p><img src="/files/c076d929f9f2b04de2b51be844d37dd93bf71567" alt="" data-size="original"></p>                                                                                        |
| Bedingter Bereich / Feld    | <p>Zeigt Inhalte in diesem Abschnitt nur an, wenn ein <a href="/pages/547679e222790192ea9dcf046775ae0c27ed1575">benutzerdefinierten Feld</a> im Profil des Teilnehmers einen bestimmten Wert enthält.</p><p>Um den Namen und den Wert des benutzerdefinierten Felds festzulegen, öffnen Sie die Eigenschaften der Komponente und bearbeiten Sie den JSONata-Ausdruck im <em>Bedingungs</em> Feld.</p><p>Benutzer mit dem korrekten Wert des benutzerdefinierten Felds sehen alle im bedingten Abschnitt angezeigten Inhalte, während Benutzer ohne den korrekten Wert die Inhalte nicht sehen.</p><p><img src="/files/c076d929f9f2b04de2b51be844d37dd93bf71567" alt="" data-size="original"></p> |
| Programmabschnitt           | <p>Die Komponente „Programmabschnitt“ ermöglicht es Ihnen, die Programm-ID ihrer untergeordneten Komponenten zu überschreiben. Verwenden Sie sie, wenn Sie Inhalte anzeigen möchten, die nicht mit einem bestimmten Programm verknüpft sind. Standardmäßig in den meisten Widget- und Microsite-Vorlagen enthalten.</p><p><img src="/files/c076d929f9f2b04de2b51be844d37dd93bf71567" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                            |

</details>

<details>

<summary>Typografie</summary>

Typografie-Komponenten ermöglichen es Ihnen, formatierte Textblöcke zu Ihrem Widget oder Ihrer Microsite hinzuzufügen. Wählen Sie aus:

* Absatz
* Überschrift 1
* Überschrift 2
* Überschrift 3
* Überschrift 4

  <div data-with-frame="true"><figure><img src="/files/fb900e4a2a37a393a406e6b2665a0873074f769e" alt="" width="208"><figcaption></figcaption></figure></div>

</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/widget-and-microsite-components-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.