> 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" %}
**Begrenzt**: Komponenten, abgesehen von den in den bereitgestellten Vorlagen enthaltenen, sind nur für bestimmte Produkteditionen oder Add-ons verfügbar. Wenn Sie mehr fein abgestimmte 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-Images 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 Design-Einschränkungen haben. Sie können die Zustände Ihrer Komponenten außerdem in der Editoroberfläche in der Vorschau anzeigen.

<details>

<summary>Statistiken</summary>

Verwenden Sie *Statistiken* Komponenten, damit Ihre Teilnehmer sehen können, wie sie in Ihrem Programm abschneiden. 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                                                                                                                                                                     |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Punktestand                    | 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 abgegeben hat. Umfasst 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 Bedarf 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>Allgemeine Komponenten</summary>

*Allgemeine Komponenten* werden häufig verwendet, um sowohl die Funktionalität als auch die Designkonsistenz Ihres Widgets oder Ihrer Microsite zu verbessern. Sie umfassen allgemeine visuelle und strukturelle Elemente wie Hero-Images, Layout-Formatierungen und beschreibende Programmschritte.

| Komponente                    | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Hero-Image mit zwei Spalten   | <p>Ein Bannerbild und eine Überschrift ü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>                                                                                                                                                                                       |
| Überlagertes Hero-Image       | <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 Brand Color gesteuert, die auf Ebene des Brand Container festgelegt ist.</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 Brand Color gesteuert, die auf Ebene des Brand Container festgelegt ist.</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 Brand Color gesteuert, die auf Ebene des Brand Container festgelegt ist.</p><p><img src="/files/0e76c2857b3c8076c7de422b265409112a96010a" alt="" data-size="original"></p>                                                                                           |
| Programm-Timeline             | <p>Zeigen Sie eine Übersicht über die Empfehlungsreise und die Belohnungen Ihrer Teilnehmer an. Fügen Sie Timeline-Einträge nach Bedarf hinzu oder entfernen Sie sie. Die Farbe des Kreissymbols und der Linien zwischen den Einträgen wird durch die Brand Color gesteuert, die auf Ebene des Brand Container festgelegt ist.</p><p><img src="/files/e5413bb3ebe196c3d693fbcd3dd53d985b88fa7a" alt="" data-size="original"></p> |
| Timeline-Eintrag              | <p>Passt in eine Komponente der Programm-Timeline, um einen Schritt der Empfehlungsreise darzustellen. Die Farbe des Kreissymbols und der Linien zwischen den Einträgen wird durch die Brand Color gesteuert, die auf Ebene des Brand Container festgelegt ist.</p><p><img src="/files/02ca2925d5177a30868ed27b8351321c13c0bdeb" alt="" data-size="original"></p>                                                                |
| Anzeige des Benutzernamens    | <p>Zieht den vollständigen Namen des Teilnehmers dynamisch 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:** *Belohnung* 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 direkt im Widget oder in der Microsite auszuführen oder ihren Fortschritt in Richtung der Ziele des Advocate-Programms zu sehen. Diese Komponente fügt Ihrem Widget oder Ihrer Microsite mehrere Aufgabenkarten hinzu. Die Buttonfarbe wird durch die Brand Color gesteuert, die auf Ebene des Brand Container festgelegt ist.</p><p><img src="/files/9cbc4dbe2f4ad447e773742f4e3fbfd402ff1b4a" alt="" data-size="original"></p> |
| Belohnungstausch         | <p>Ermöglichen Sie Teilnehmern, verdiente Belohnungen gegen eine andere Belohnungsart 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 Belohnungen an, die der Teilnehmer verdient hat. Kann manuelle Belohnungen und/oder Belohnungen umfassen, die über mehrere Advocate-Programme hinweg verdient wurden.</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>                                                                                                                                                                                                                                                  |
| Datenspalte              | <p>Fügen Sie der Belohnungstabelle eine weitere Datenspalte 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 Navigationsseitenleiste 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 ein Kontrollkästchen hinzu. Sie können zuordnen, ob das Kästchen angekreuzt war, und zwar zu einem benutzerdefinierten Feld beim Advocate-Teilnehmer. Lesen Sie „Ihre Einsendungen des Microsite-Registrierungsformulars anzeigen“ für weitere Informationen.</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 Listenelementen hinzu. Sie können das vom Nutzer ausgewählte Listenelement einem benutzerdefinierten Feld beim Advocate-Teilnehmer zuordnen. Wenden Sie sich bei Bedarf an den Support.</p><p><img src="/files/65e3133e895bdd1a6506935350e9fbfd4d137206" alt="" data-size="original"></p>                                                               |
| Eingabefeld im Formular   | <p>Fügen Sie dem Registrierungsformular ein freies Texteingabefeld 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;">Wenden Sie sich an den Support</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 Ihrer Seitenleisten-Navigation auf der Microsite eine neue Seite oder einen Link hinzu. Kann nur innerhalb des angemeldeten Layouts 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 für geworbene Freunde schnell und einfach, sich anzumelden oder Belohnungen einzulösen, ohne den Standard-Registrierungsprozess durchlaufen zu müssen. Sie eignen sich ideal für Programme mit Empfehlungs-Widgets für Sofortzugriff oder Flüssen zur Freundregistrierung.

| Komponente                | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Gutscheincode             | <p>Zeigt einen einlösbaren Code für eine Fuel-Tank-Belohnung an.</p><p>Der <a href="/pages/9b9c427433fbc2084c461dd68e68a4264e041cdc">Rewards Fuel Tank</a> muss über verfügbare Gutscheincodes verfügen, 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 zu machen. Nach Eingabe ihrer E-Mail-Adresse gelangen die Nutzer zu einem zweiten Bildschirm, auf dem sie auf ihre Empfehlungs-Freigabelinks zugreifen können. Wird für das Empfehlungs-Widget der Website 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 Sofortzugriffsanzeige zu verlassen.</p><p><img src="/files/f78afd34712f1208b6e6756b0a2783e91dcc29c2" alt="" data-size="original"></p>                                                                                                                                                                                                                                                           |
| Freundesregistrierung     | <p>Ermöglichen Sie 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 Freund-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 Spalten Inhalt 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 in 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 in der Spalte platziert werden.</p><p><img src="/files/cdbc27803366b4cdab1af365ada9ec2d424d2d12" alt="" data-size="original"></p>                                                                                     |
| Tab                          | <p>Fügen Sie einer generischen Tab-Gruppe einen neuen Tab hinzu.</p><p><img src="/files/ce714a2f023aa633630e66d9ad526b4ae5c10d46" alt="" data-size="original"></p>                                                                                                                                            |
| Generische 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, die bei Bedarf entfernt oder hinzugefügt werden können.</p><p><img src="/files/73c170880b6df0921c961f06d35ffa5c5423fcc3" alt="" data-size="original"></p> |
| Überschriftsabschnitt        | <p>Fügen Sie einen neuen Abschnitt hinzu, der eine Überschrift und Absatztext enthält. Weitere Komponenten können dem Überschriftsabschnitt 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 Einnahmendaten anzuzeigen.

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

</details>

Der *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 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), und konfigurieren Sie das Punktesystem, das Rangsystem und die Filteroptionen für Teilnehmer. 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 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 ordnet 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 dem von Ihnen definierten Wert 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 ordnet 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 Bestenlistentyp ist nur für den Belohnungstyp „Punkte“ 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 Bestenlistentyp 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, 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Partner-Info-Modal                              | <p>Fügen Sie ein Modal ein, das die Länder- und Währungsinformationen der Teilnehmer erfasst. Diese Informationen stellen sicher, dass Ihre Teilnehmer ihre Belohnungen ohne Verzögerungen oder zusätzliche Einrichtungsschritte erhalten können.<br></p><p>Es hat zwei konfigurierbare Zustände, abhängig davon, ob die E-Mail-Adresse des Teilnehmers bereits mit einem bestehenden Konto verknüpft ist:</p><ul><li><strong>Beschreibung für neuen Partner</strong>: Wird Erstteilnehmern angezeigt. Der Standardtext („Bestätigen Sie jetzt Ihr Land und Ihre Währung, um Ihre zukünftigen Belohnungen schneller zu erhalten“) fordert sie auf, ihre Angaben zu machen, bevor sie ihren Freigabelink erhalten.</li><li><strong>Beschreibung für bestehenden Partner</strong>: Wird angezeigt, wenn die E-Mail-Adresse des Teilnehmers bereits mit einem Konto auf impact.com verknüpft ist. Das Modal füllt ihre Angaben vorab aus und bittet sie, diese zu bestätigen, anstatt sie von Grund auf neu einzugeben.</li></ul> |
| Auszahlungsstatus-Hinweis                       | <p>Informieren Sie den Teilnehmer über die Schritte, die er vor dem Erhalt einer Barauszahlung durchführen muss. Die Komponente enthält einen Call-to-Action-Button, der den Teilnehmer zu seinen Auszahlungs-Einstellungen führt.</p><p>Passen Sie optional beliebige Textbeschreibungen an, die der Teilnehmer sieht, wenn er die Komponente aufruft.</p><p><img src="/files/8915d926a831011703022e4a91cfa0e33c3821ed" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| Barauszahlungsformular für Microsite und Widget | <p>Fügen Sie ein Formular ein, das die Bankdaten der Teilnehmer und alle anwendbaren Steuerformulare wie W-8 oder W-9 erfasst.</p><p>Passen Sie optional beliebige Textbeschreibungen an, die der Teilnehmer sieht, wenn er das Formular aufruft.</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 bequeme Möglichkeiten, ihre Empfehlungslinks und -codes über mehrere Kanäle zu bewerben. Wenn ein Teilnehmer auf einen Teilen-Button klickt, öffnet sich der gewählte Kanal, z. B. *Facebook*, *LinkedIn*, *WhatsApp*, oder *E-Mail*, mit einer vorausgefüllten Nachricht oder einem vorausgefü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 das schnelle Teilen an. Andere, wie Promo-Codes, präsentieren mehrere verfügbare Codes (falls zugewiesen) in einer Slider-Ansicht und enthalten Teilen-Buttons, 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 gewinnen.

| Komponente                | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Empfehlungscode           | <p>Zeigt ein Feld für den Empfehlungscode 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>Vorkonfigurierter Komponentenblock, der ein Feld für den Empfehlungs-Promo-Code enthält, mit einem Slider zum Wechseln zwischen verschiedenen Codes, falls mehr als einer zugewiesen wurde. Er enthält außerdem einen Freigabelink sowie Komponenten für Teilen-Buttons für Facebook, LinkedIn und Twitter/X.</p><p><img src="/files/8d23a3d8c1155771433d1bf54356b09bafe5581b" alt="" data-size="original"></p>                        |
| Facebook-Teilen-Button    | <p>Zeigt einen „Auf Facebook teilen“-Button mit anpassbarem Text an. Beim Klicken leitet der Button zu einem neuen Beitrag im Facebook-Profil des Nutzers weiter, wobei die Social Messaging der Marke bereits geladen ist.</p><p><img src="/files/e6aac52c5968187d133cb6acf49e770cccb67e2d" alt="" data-size="original"></p>                                                                                                             |
| X-Teilen-Button           | <p>Zeigt einen „Über X teilen“-Button mit anpassbarem Text an. Beim Klicken leitet der Button zu einem neuen Beitrag im X-Konto des Nutzers weiter, wobei die Social Messaging der Marke bereits geladen ist.</p><p><img src="/files/ad4fe76daf08f0efd3659f367f57277e82d9cb16" alt="" data-size="original"></p>                                                                                                                           |
| E-Mail-Teilen-Button      | <p>Zeigt einen „Per E-Mail teilen“-Button mit anpassbarem Text an. Beim Klicken öffnet der Button die Standard-E-Mail-Anwendung des Nutzers und erstellt eine neue E-Mail, wobei die Social Messaging der Marke bereits geladen ist.</p><p><img src="/files/64b075a2994721c83bbe0c7fd85b113398a2e06f" alt="" data-size="original"></p>                                                                                                    |
| Button für mobiles Teilen | <p>Zeigt einen Button zum Teilen innerhalb des Webbrowsers des Teilnehmers an. Beim Klicken öffnet der Button ein Menü mit allen verfügbaren Apps, mit denen der Nutzer seinen Link teilen kann. Wenn eine App ausgewählt wird, wird ein neuer Beitrag oder eine Nachricht mit der vorab geladenen Social Messaging der Marke erstellt.</p><p><img src="/files/c9436207ac2794aa156545425c177a519e089c4d" alt="" data-size="original"></p> |
| LinkedIn-Teilen-Button    | <p>Zeigt einen „Auf LinkedIn teilen“-Button mit anpassbarem Text an. Beim Klicken leitet der Button zu einem neuen Beitrag im LinkedIn-Profil des Nutzers weiter, wobei die Social Messaging der Marke bereits geladen ist.</p><p><img src="/files/a1c57f37bef167089298857c482021a584236c1d" alt="" data-size="original"></p>                                                                                                             |
| SMS-Teilen-Button         | <p>Zeigt einen „Einem Freund schreiben“-Button mit anpassbarem Text an. Beim Klicken leitet der Button zur Standard-SMS-/Textnachrichten-App des Nutzers weiter, und eine neue SMS-/Textnachricht wird mit der vorab geladenen Social Messaging der Marke erstellt.</p><p><img src="/files/4720f72fad53867faf27b9f29b748a6d69150ddf" alt="" data-size="original"></p>                                                                     |
| Messenger-Teilen-Button   | <p>Zeigt einen „Über Messenger teilen“-Button mit anpassbarem Text an. Beim Klicken leitet der Button zu einer neuen Nachricht in der Facebook-Messenger-App des Nutzers weiter, wobei die Social Messaging der Marke bereits geladen ist.</p><p><img src="/files/d61e2d68c9de08d97e1b9fcd6644bcea11408bd4" alt="" data-size="original"></p>                                                                                              |
| WhatsApp-Teilen-Button    | <p>Zeigt einen „Über WhatsApp teilen“-Button mit anpassbarem Text an. Beim Klicken leitet der Button zu einer neuen Nachricht im WhatsApp-Konto des Nutzers weiter, wobei die Social Messaging der Marke bereits geladen ist.</p><p><img src="/files/46d7c3860d81327f91884fdec6a5514e759a90ec" alt="" data-size="original"></p>                                                                                                           |
| LINE-Teilen-Button        | <p>Zeigt einen „Über Line Messenger teilen“-Button mit anpassbarem Text an. Beim Klicken leitet der Button zu einer neuen Nachricht in der Line-Messenger-App des Nutzers weiter, wobei die Social Messaging der Marke bereits geladen ist.</p><p><img src="/files/c85c40e4fb3521ba3ad5a8f75828756b2c38b571" alt="" data-size="original"></p>                                                                                             |
| Pinterest-Teilen-Button   | <p>Zeigt einen „Auf Pinterest teilen“-Button mit anpassbarem Text an. Beim Klicken leitet der Button zu einem neuen Beitrag im Pinterest-Profil des Nutzers weiter, wobei die Social Messaging der Marke bereits geladen ist.</p><p><img src="/files/3bfb404865d12d73a350b846bda00d3678111c79" alt="" data-size="original"></p>                                                                                                           |
| Freigabelink              | <p>Zeigt den Freigabelink des Teilnehmers für dieses Programm an.</p><p><img src="/files/1072914bd791764e39ed67034971861300f4c6be" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                       |
| QR-Code                   | <p>Zeigt den Freigabelink 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.

| Komponente                              | Beschreibung                                                                                                                                                                                                                                                                                                                                                                   |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Empfehlungskarte                        | <p>Vorkonfigurierter Komponentenblock, der <em>Programm-Timeline</em>, <em>Freigabelink</em>, und <em>Facebook</em>, <em>LinkedIn,</em> und <em>Twitter / X</em> Teilen-Button-Komponenten enthält. Weitere Komponenten können nach Bedarf hinzugefügt oder entfernt werden.</p><p><img src="/files/b2527292c0fc5d5e0e21c75f17d76612ab8a5dbf" alt="" data-size="original"></p> |
| Empfehlungstabelle                      | <p>Zeigt eine Tabelle an, die die geworbenen Freunde des Teilnehmers, das Konversionsdatum und den Konversionsstatus anzeigt.</p><p><img src="/files/8da5759f85d51ceb44bc607e2827ed17af188c7e" alt="" data-size="original"></p>                                                                                                                                                |
| Datenspalte der Empfehlungstabelle      | <p>Fügen Sie der Empfehlungstabelle eine weitere Datenspalte 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 Kundenspalte (geworbener Freund) 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 spezielle 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">Nutzersegment</a>.</p><p>Um das Nutzersegment festzulegen, öffnen Sie die Eigenschaften der Komponente und bearbeiten Sie den JSONata-Ausdruck im <em>Bedingung</em> Feld.</p><p>Nutzer innerhalb des festgelegten Segments sehen alle im bedingten Abschnitt angezeigten Inhalte, während Nutzer, die nicht im Segment sind, 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 den Wert des benutzerdefinierten Feldes festzulegen, öffnen Sie die Eigenschaften der Komponente und bearbeiten Sie den JSONata-Ausdruck im <em>Bedingung</em> Feld.</p><p>Nutzer mit dem richtigen Wert im benutzerdefinierten Feld sehen alle im bedingten Abschnitt angezeigten Inhalte, während Nutzer 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, 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.