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

# Widget- und Microsite-Komponenten 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">Den PXA-Kurs absolvieren</a>

{% hint style="success" %}
**Begrenzt**: Komponenten, abgesehen von den in den bereitgestellten Vorlagen enthaltenen, sind 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 aktualisieren.
{% endhint %}

Komponenten sind die einzelnen Bausteine, wie Hero-Bilder und Aufgabenkarten, aus denen das Widget oder die Microsite Ihres Advocate-Programms besteht. Diese Elemente prägen die [Teilnehmererfahrung](/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 innerhalb der Widget- und Microsite-Editoren. Die meisten Komponenten unterstützen Styling und Anpassung, obwohl einige Designbeschränkungen haben. Sie können außerdem die Zustände Ihrer Komponente innerhalb der Editor-Oberfläche in der Vorschau anzeigen.

<details>

<summary>Statistiken</summary>

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

| Komponente                     | 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 Geschenkkartenprämien an.                                                                                                        |
| Empfehlungen                   | Zeigt an, wie viele Empfehlungen der Teilnehmer gemacht hat. Enthält gestartete und umgewandelte 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 Bedarf hinzugefügt und entfernt werden.              |
| Andere Statistik               | Zeigt eine Statistik Ihrer Wahl an. Sie können zwischen einer Empfehlungsstatistik, verschiedenen Prämienstatistiken wählen oder eine benutzerdefinierte Statistik erstellen. |

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

</details>

<details>

<summary>Allgemeine Komponenten</summary>

*Allgemeine 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-Formatierungen und beschreibende Programmschritte ab.

| Komponente                      | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Hero-Bild mit zwei Spalten      | <p>Ein Bannerbild und Überschriftentext über zwei Spalten. Das Bild, der Text und die Hintergrundfarbe können aktualisiert werden.</p><p><img src="/files/f1b460483b0d3f16c8097e30986ed31110357daf" alt="" data-size="original"></p>                                                                                                                                                                                           |
| Überlagertes Hero-Bild          | <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-Button                     | <p>Ein anklickbarer Button, der Teilnehmer zu Ihrem ausgewählten Link weiterleitet. Die Buttonfarbe wird durch die auf Ebene des Brand Containers festgelegte Markenfarbe gesteuert.</p><p><img src="/files/55565b0b8c3602d1a293354318710e54d51ab4a0" alt="" data-size="original"></p>                                                                                                                                         |
| Programmerläuterung             | <p>Eine Vorlage, die erklärt, wie ein Advocate-Programm funktioniert, z. B. wie Belohnungen verdient werden. Enthält standardmäßig zwei Schritte zur Programmerläuterung. 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 Programmerläuterung | <p>Fügen Sie beschreibenden Text hinzu, um einen Teil Ihres Programms zu erläutern. Passt in eine Programmerläuterungskomponente. 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-Zeitleiste             | <p>Zeigen Sie einen Überblick über die Empfehlungsreise und die Belohnungen für Ihre Teilnehmer an. Fügen Sie bei Bedarf Zeitleisteneinträge hinzu oder entfernen Sie sie. Die Farbe des Kreissymbols 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> |
| Zeitleisteneintrag              | <p>Passt in eine Programm-Zeitleistenkomponente, um einen Schritt der Empfehlungsreise anzuzeigen. Die Farbe des Kreissymbols 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>                                                                         |
| Anzeige des Benutzernamens      | <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>Belohnungen</summary>

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

| Komponente             | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Aufgabenkarten-Feed    | <p>Aufgabenkarten ermöglichen es Ihren Nutzern, Aktionen auszuführen oder den Fortschritt bei den Zielen des Advocate-Programms direkt im Widget oder in der Microsite zu sehen. Diese Komponente fügt Ihrem Widget oder Ihrer Microsite mehrere Aufgabenkarten hinzu. Die Buttonfarbe 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 nutzen.</p><p><img src="/files/27a5dd8c69c7383c5e5820f15a753f88f33ff142" alt="" data-size="original"></p>                                                                                                               |
| Belohnungstabelle      | <p>Zeigt eine Liste der vom Teilnehmer verdienten Belohnungen an. Kann manuelle Belohnungen und/oder Belohnungen enthalten, die über mehrere Advocate-Programme hinweg verdient wurden.</p><p><img src="/files/3477502c9f7c06c697b681fcd541bf59d0fe95d3" alt="" data-size="original"></p>                                                                                                                                                                                 |
| Spalte für Kundennotiz | <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>                                                                                                                                                                                                                                  |
| Datenspalte            | <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>                                                                                                                                                                                                                             |
| Quellenspalte          | <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.

| Komponente                | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Checkbox-Feld im Formular | <p>Fügen Sie dem Registrierungsformular eine Checkbox hinzu. Sie können zuordnen, ob das Kästchen aktiviert war, und zwar zu einem benutzerdefinierten Feld beim Advocate-Teilnehmer. Weitere Informationen finden Sie unter „Anzeigen Ihrer Microsite-Registrierungsformular-Einreichungen“.</p><p><img src="/files/27e6a10f7d7f905091942201adca065921f89f2c" alt="" data-size="original"></p>                            |
| Dropdown-Feld im Formular | <p>Fügen Sie dem Registrierungsformular eine Dropdown-Liste mit anpassbaren Listeneinträgen hinzu. Sie können den vom Nutzer ausgewählten Listeneintrag einem benutzerdefinierten Feld beim Advocate-Teilnehmer zuordnen. Kontaktieren Sie den Support für Unterstützung dabei.</p><p><img src="/files/65e3133e895bdd1a6506935350e9fbfd4d137206" alt="" data-size="original"></p>                                          |
| Eingabefeld im Formular   | <p>Fügen Sie dem Registrierungsformular ein freies Text-Eingabefeld hinzu. Sie können den vom Nutzer eingegebenen Text einem benutzerdefinierten Feld beim Advocate-Teilnehmer 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> |
| Namensfelder im Formular  | <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 Seitenleistennavigation Ihrer Microsite eine neue Seite oder einen neuen Link hinzu. Kann nur im angemeldeten Layout der Microsite platziert werden.</p><p><img src="/files/a2572b59c0be289926cb0073ca10ce2a721379f3" alt="" data-size="original"></p>                                                                                                                                                    |
| Passwortfeld im Formular  | <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>Sofortzugriff</summary>

*Sofortzugriff* komponenten machen es einfach und schnell für empfohlene Freunde, sich anzumelden oder Belohnungen einzulösen, ohne den Standard-Registrierungsprozess durchlaufen zu müssen. Sie sind ideal für Programme, die Empfehlungs-Widgets mit Sofortzugriff oder Anmeldeabläufe für Freunde verwenden.

| Komponente                | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Gutscheincode             | <p>Zeigt einen einlösbaren Code für eine Fuel-Tank-Belohnung an.</p><p>Der <a href="/pages/9b9c427433fbc2084c461dd68e68a4264e041cdc">Belohnungs-Fueltank</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öglichen Sie neuen Advocates, ihre E-Mail-Adresse einzugeben, um sich zu registrieren und Empfehlungen abzugeben. 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 Empfehlungs-Widget mit Sofortzugriff verwendet.</p><p><img src="/files/d86fadc88a08add7f3bdc746f9425dd48e702d68" alt="" data-size="original"></p> |
| Aktuellen Nutzer abmelden | <p>Ermöglichen Sie dem Betrachter, die personalisierte Anzeige mit Sofortzugriff zu verlassen.</p><p><img src="/files/f78afd34712f1208b6e6756b0a2783e91dcc29c2" alt="" data-size="original"></p>                                                                                                                                                                                                                                        |
| Freundesregistrierung     | <p>Ermöglichen Sie empfohlenen Freunden, ihre E-Mail-Adresse zur Registrierung einzugeben. Nach Eingabe ihrer E-Mail-Adresse gelangen die Nutzer zu einem zweiten Bildschirm, auf dem sie auf ihren Gutscheincode-Belohnung zugreifen können. Wird für das Freundes-Widget mit Sofortzugriff 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.

| Komponente                   | Beschreibung                                                                                                                                                                                                                                                                                                        |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Hero-Layout mit zwei Spalten | <p>Fügen Sie ein Hero-Layout mit zwei Inhaltsspalten 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 vorhanden, aber Tabs können bei Bedarf entfernt oder hinzugefügt werden.</p><p><img src="/files/73c170880b6df0921c961f06d35ffa5c5423fcc3" alt="" data-size="original"></p> |
| Titelter Abschnitt           | <p>Fügen Sie einen neuen Abschnitt hinzu, der eine Überschrift und einen Absatztext enthält. Unter der Überschrift können weitere Komponenten zum Abschnitt 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 Verdienstdaten anzuzeigen.

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

</details>

Der *Bestenliste* komponente ermöglicht es Ihnen, Ihre Programmpartizipanten zu ranken, Top-Performern Belohnungen anzubieten und Teilnehmer zu motivieren, in Ihrem Programm bessere Ergebnisse zu erzielen. Fügen Sie Bestenlisten zu Ihrem [Widget mit verifiziertem 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 Rankingsystem und die Teilnehmerfilter-Optionen. 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)

| Komponente             | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Empfehlung gestartet   | <p>Diese Art von Bestenliste ordnet Teilnehmer nach der Anzahl der von ihnen initiierten Empfehlungen. Die Punkte 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 ordnet Teilnehmer nach der Anzahl der von ihnen konvertierten Empfehlungen. Empfehlungen gelten als konvertiert, sobald der empfohlene Freund ein Programmziel erreicht, z. B. einen von Ihnen festgelegten Kaufwert. Die Punkte 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 ordnet Teilnehmer nach der Gesamtzahl der Punkte, die sie in Advocate-Programmen verdient haben, die Punkte belohnen. Alle Belohnungseinheiten in Punkten werden gezählt, solange sie nicht ausstehend oder storniert sind. Dieser Bestenlisten-Typ gilt nur für den Punkt-Belohnungstyp.</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 Programmpartizipanten 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 Auszahlungsoptionen in Ihrem [Widget mit verifiziertem 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 Komponentengruppe ist nur verfügbar, wenn die [*Bar-Auszahlungen*](/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.

| Komponente                                 | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Hinweis zur Auszahlungsstatus              | <p>Weisen Sie den Teilnehmer auf Maßnahmen hin, die er ergreifen muss, bevor er eine Bar-Auszahlung erhalten kann. Die Komponente enthält eine Call-to-Action-Schaltfläche, die den Teilnehmer zu seinen Auszahlungseinstellungen führt.</p><p>Optional können Sie jede der Textbeschreibungen anpassen, die der Teilnehmer sieht, wenn er die Komponente anzeigt.</p><p><img src="/files/8915d926a831011703022e4a91cfa0e33c3821ed" alt="" data-size="original"></p> |
| Auszahlungsformular für Microsite & Widget | <p>Fügen Sie ein Formular ein, das die Bankdaten der Teilnehmer und alle anwendbaren Steuerformulare wie ein W-8 oder W-9 erfasst.</p><p>Optional können Sie jede der Textbeschreibungen anpassen, die der Teilnehmer sieht, wenn er das Formular anzeigt.</p><p>Sie können innerhalb 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 hinweg zu bewerben. Wenn ein Teilnehmer auf eine Teilen-Schaltfläche klickt, wird der gewählte Kanal geöffnet, wie zum Beispiel *Facebook*, *LinkedIn*, *WhatsApp*, oder *E-Mail*, mit einer vorgefüllten Nachricht oder einem vorgefüllten Link, bereit zum Senden.

Einige Komponenten, wie der Empfehlungscode, zeigen den individuellen Empfehlungs- oder Promo-Code des Teilnehmers zusammen mit einer Option zum Kopieren in die Zwischenablage für schnelles Teilen an. Andere, wie Promo-Codes, präsentieren mehrere verfügbare Codes (falls zugewiesen) in einer Slider-Ansicht und enthalten Teilen-Schaltflächen, damit Teilnehmer den ausgewählten Code sofort posten oder senden können. Diese Tools machen es einfach für Teilnehmer, die Nachricht zu verbreiten und neue Empfehlungen zu fördern.

| Komponente                     | 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 Schieberegler enthält, um zwischen verschiedenen Codes zu wechseln, wenn mehr als einer zugewiesen wurde. Er enthält außerdem einen Share-Link sowie Komponenten für die Teilen-Schaltflächen von Facebook, LinkedIn und Twitter / X.</p><p><img src="/files/8d23a3d8c1155771433d1bf54356b09bafe5581b" alt="" data-size="original"></p>                                                  |
| Facebook-Teilen-Button         | <p>Zeigt eine „Auf Facebook teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken wird die Schaltfläche zu einem neuen Beitrag im Facebook-Profil des Nutzers weiterleiten, wobei die Social Messaging-Nachricht der Marke bereits vorgefüllt ist.</p><p><img src="/files/e6aac52c5968187d133cb6acf49e770cccb67e2d" alt="" data-size="original"></p>                                                                                                            |
| X-Teilen-Button                | <p>Zeigt eine „Über X teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken wird die Schaltfläche zu einem neuen Beitrag im X-Konto des Nutzers weiterleiten, wobei die Social Messaging-Nachricht der Marke bereits vorgefüllt ist.</p><p><img src="/files/ad4fe76daf08f0efd3659f367f57277e82d9cb16" alt="" data-size="original"></p>                                                                                                                          |
| E-Mail-Teilen-Button           | <p>Zeigt eine „Per E-Mail teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken wird die Schaltfläche die Standard-E-Mail-Anwendung des Nutzers öffnen und eine neue E-Mail mit der vorgefüllten Social Messaging-Nachricht der Marke starten.</p><p><img src="/files/64b075a2994721c83bbe0c7fd85b113398a2e06f" alt="" data-size="original"></p>                                                                                                                |
| Button für mobiles Teilenblatt | <p>Zeigt eine Schaltfläche zum Teilen im Webbrowser des Teilnehmers an. Beim Klicken öffnet die Schaltfläche ein Menü, das alle verfügbaren Apps auflistet, die der Nutzer zum Teilen seines Links öffnen kann. Wenn eine App ausgewählt wird, wird ein neuer Beitrag oder eine neue Nachricht mit der vorgefüllten Social Messaging-Nachricht der Marke erstellt.</p><p><img src="/files/c9436207ac2794aa156545425c177a519e089c4d" alt="" data-size="original"></p> |
| LinkedIn-Teilen-Button         | <p>Zeigt eine „Auf LinkedIn teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken wird die Schaltfläche zu einem neuen Beitrag im LinkedIn-Profil des Nutzers weiterleiten, wobei die Social Messaging-Nachricht der Marke bereits vorgefüllt ist.</p><p><img src="/files/a1c57f37bef167089298857c482021a584236c1d" alt="" data-size="original"></p>                                                                                                            |
| SMS-Teilen-Button              | <p>Zeigt eine „Einem Freund schreiben“-Schaltfläche mit anpassbarem Text an. Beim Klicken wird die Schaltfläche die Standard-SMS-/Textnachrichten-App des Nutzers weiterleiten, und eine neue SMS-/Textnachricht wird mit der vorgefüllten Social Messaging-Nachricht der Marke erstellt.</p><p><img src="/files/4720f72fad53867faf27b9f29b748a6d69150ddf" alt="" data-size="original"></p>                                                                          |
| Messenger-Teilen-Button        | <p>Zeigt eine „Über Messenger teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken wird die Schaltfläche zu einer neuen Nachricht in der Facebook-Messenger-App des Nutzers weiterleiten, wobei die Social Messaging-Nachricht der Marke bereits vorgefüllt ist.</p><p><img src="/files/d61e2d68c9de08d97e1b9fcd6644bcea11408bd4" alt="" data-size="original"></p>                                                                                             |
| WhatsApp-Teilen-Button         | <p>Zeigt eine „Über WhatsApp teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken wird die Schaltfläche zu einer neuen Nachricht im WhatsApp-Konto des Nutzers weiterleiten, wobei die Social Messaging-Nachricht der Marke bereits vorgefüllt ist.</p><p><img src="/files/46d7c3860d81327f91884fdec6a5514e759a90ec" alt="" data-size="original"></p>                                                                                                          |
| LINE-Teilen-Button             | <p>Zeigt eine „Über Line Messenger teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken wird die Schaltfläche zu einer neuen Nachricht in der Line-Messenger-App des Nutzers weiterleiten, wobei die Social Messaging-Nachricht der Marke bereits vorgefüllt ist.</p><p><img src="/files/c85c40e4fb3521ba3ad5a8f75828756b2c38b571" alt="" data-size="original"></p>                                                                                            |
| Pinterest-Teilen-Button        | <p>Zeigt eine „Auf Pinterest teilen“-Schaltfläche mit anpassbarem Text an. Beim Klicken wird die Schaltfläche zu einem neuen Beitrag im Pinterest-Profil des Nutzers weiterleiten, wobei die Social Messaging-Nachricht der Marke bereits vorgefüllt ist.</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 empfohlenen Freunde des Teilnehmers und deren Konvertierungsstatus an. Sie erleichtern es den Teilnehmern, nachzuverfolgen, wen sie empfohlen haben, wann Konvertierungen stattgefunden haben und welche Belohnungen aus diesen Empfehlungen verdient wurden.

| Komponente                              | Beschreibung                                                                                                                                                                                                                                                                                                                                                               |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Empfehlungskarte                        | <p>Vorgefertigter Komponentenblock, der <em>Programm-Zeitleiste</em>, <em>Share-Link</em>, und <em>Facebook</em>, <em>LinkedIn,</em> und <em>Twitter / X</em> Teilen-Button-Komponenten enthält. Weitere Komponenten können bei Bedarf hinzugefügt oder entfernt werden.</p><p><img src="/files/b2527292c0fc5d5e0e21c75f17d76612ab8a5dbf" alt="" data-size="original"></p> |
| Empfehlungstabelle                      | <p>Zeigt eine Tabelle mit den vom Teilnehmer empfohlenen Freunden, dem Konvertierungsdatum und dem Konvertierungsstatus an.</p><p><img src="/files/8da5759f85d51ceb44bc607e2827ed17af188c7e" alt="" data-size="original"></p>                                                                                                                                              |
| Datenspalte 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- (empfohlener 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 die bedingte Anzeige von Inhalten, Programmüberschreibungen und andere spezialisierte Konfigurationen, die helfen, das Erlebnis für bestimmte Zielgruppen anzupassen.

| Komponente                  | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bedingter Bereich / Segment | <p>Zeigen Sie Inhalte in diesem Abschnitt nur an, wenn der Teilnehmer zu einem bestimmten <a href="/pages/1e1a3d7aeba6aba64849969d5e172ee944aa4625">Benutzersegment</a>.</p><p>gehört. Um das Benutzersegment festzulegen, öffnen Sie die Eigenschaften der Komponente und bearbeiten Sie den JSONata-Ausdruck im <em>Bedingung</em> Feld.</p><p>Benutzer innerhalb des festgelegten Segments sehen alle im bedingten Bereich 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>Zeigen Sie Inhalte in diesem Abschnitt nur an, wenn ein <a href="/pages/547679e222790192ea9dcf046775ae0c27ed1575">benutzerdefiniertes Feld</a> im Profil des Teilnehmers einen bestimmten Wert enthält.</p><p>Um den Namen und Wert des benutzerdefinierten Feldes festzulegen, öffnen Sie die Eigenschaften der Komponente und bearbeiten Sie den JSONata-Ausdruck im <em>Bedingung</em> Feld.</p><p>Benutzer mit dem richtigen Wert im benutzerdefinierten Feld sehen alle im bedingten Bereich angezeigten Inhalte, während Benutzer ohne den richtigen Wert im benutzerdefinierten Feld 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:

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

The question should be specific, self-contained, and written in natural language.
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.