> 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-experiences/customize-program-widgets.md).

# Programm-Widgets anpassen

#### Rufen Sie den Widget-Editor auf

1. Wählen Sie im linken Navigationsmenü ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Inhalt**.
2. Auf der *Widgets* Karte, wählen Sie **Widgets bearbeiten.**
3. Wählen Sie im linken ausklappbaren Menü den Namen des Widgets aus, das Sie bearbeiten möchten.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F0I1JAhlX9u017vOG1oiM%2FScreenshot%202026-05-18%20at%2009.39.01.png?alt=media&amp;token=9315e124-9a39-4aa7-9a74-15c1d76cef00" alt="" width="347"><figcaption></figcaption></figure></div>

#### Passen Sie Ihre Widgets an

{% stepper %}
{% step %}
**Schritt 1: Vorlage auswählen**

1. Im linken ausklappbaren Menü unter *Aktuelles Widget*, wählen Sie **Vorlagen**.
2. Wählen Sie **Vorlage anwenden** neben der Vorlage, mit der Sie beginnen möchten.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FUprZtBVbqNwCSdeRzWgh%2FScreenshot%202026-05-18%20at%2009.22.47.png?alt=media&amp;token=ffb2f798-297e-4f6c-a154-30146230482c" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Hinweis:** Wenn Sie eine Vorschau darauf sehen möchten, wie die Vorlage aussieht, ohne die Änderung zu übernehmen, wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Vorschau]** bevor Sie speichern. Wählen Sie die **Speichern** Schaltfläche erst aus, wenn Sie bereit sind, die vorgenommenen Änderungen zu übernehmen.
{% endhint %}
{% endstep %}

{% step %}
**Schritt 2: Widget-Inhalt anpassen**

Sie können Komponenten hinzufügen, bearbeiten, verschieben oder entfernen, um den Inhalt zu ändern, den Ihre Kundenbotschafter im Widget sehen.

{% hint style="success" %}
**Hinweis:** Eine Erläuterung der verschiedenen Elemente des Widget-Editors finden Sie unter [Überblick über den Widget-Editor](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
{% endhint %}

{% tabs %}
{% tab title="Hinzufügen" %}

1. Auf der rechten Seite der Seite, im *Komponente* Menüs **Hinzufügen** Registerkarte, wählen Sie eine Komponentengruppe aus.
   * Erfahren Sie mehr über die [verfügbaren Komponenten](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) und darüber, wie sie gruppiert sind.
2. Wählen Sie die passende Komponente aus.
3. Wählen Sie die blaue **Hinzufügen zu** Schaltfläche an der Stelle aus, an der die Komponente auf der Arbeitsfläche erscheinen soll.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-faf3362b50a4598aeacff4ca831e5dcef8c7ef6e%2F346370cdced07562b504cd2b9bf6bf08b51539060e9551f784f029d4899ffa12.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Bearbeiten" %}
Die Eigenschaften, die Sie bearbeiten können, hängen davon ab, welche Art von Komponente Sie ausgewählt haben. Wenn Sie beispielsweise die *Hero-Bild* Komponente auswählen, können Sie ein neues Bild auswählen und die Hintergrundfarbe ändern. Wenn Sie ein reines Textelement wie eine Überschrift auswählen, können Sie die Schriftart, die Textfarbe und den Textinhalt ändern.

1. Wählen Sie die Komponente aus, die Sie bearbeiten möchten.
2. Verwenden Sie die Optionen in der *Komponente* Menüs **Bearbeiten** Registerkarte, um deren Eigenschaften zu ändern.

   * Wenn Sie einen Link in eine Textkomponente einfügen möchten, können Sie [dies tun, indem Sie das HTML des Widgets bearbeiten](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md).

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3e26ab9dbdff4f8e5d3d3e078d965672ade44d45%2F026f0ef0af7421ecfab6535433ea587862ec12c5223e8b393ef1db1228676e1f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Verschieben" %}

1. Wählen Sie auf der Arbeitsfläche die Komponente aus, die Sie verschieben möchten.
2. Wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Verschieben]**.
   * Einige Komponenten können nicht verschoben werden. Die ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Verschieben]** Option wird nur angezeigt, wenn es auf der Arbeitsfläche einen anderen gültigen Ort gibt, an den die Komponente verschoben werden kann.
3. Wählen Sie die blaue **Verschieben nach** Schaltfläche, an die die Komponente verschoben werden soll.

   * Statt eines Drag-and-drop-Ansatzes müssen Sie die Schaltfläche auswählen und dann das Ziel auswählen.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7bd9887e9f359c787f834a8344a181d7bb186dd3%2Faadaf737882c59604dcaa6bbed1857c867a32cad8c3dd8ea7975c047c04e6a3f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Entfernen" %}

1. Wählen Sie auf der Arbeitsfläche die Komponente aus, die Sie entfernen möchten.
2. Wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[Entfernen]**.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-030ab8fb2f678027aa57af859245968daee6f736%2F987319390fa75c5fb85f94d2d6e0a951fbf4511a72dbd91af4e55c8f39317301.jpg?alt=media" alt="" width="507"><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}
**Schritt 3: Erscheinungsbild und Design des Widgets anpassen**

**Bilder oder Logos hinzufügen**

1. Rechts, aus der *Komponente* Menüs **Hinzufügen** Registerkarte, wählen Sie die **Häufige Komponenten** Kategorie aus.
2. Wählen Sie entweder:
   * **Hero-Bild mit Überlagerung** (ein Bild mit darüberliegendem, bearbeitbarem Text)
   * **Bild** (ein einfaches Bild ohne Text darüber)
3. Fügen Sie das Bild der Arbeitsfläche hinzu.
4. In der *des Komponentenmenüs* **Bearbeiten** Registerkarte, wählen Sie die **Datei auswählen** Schaltfläche unter der *Bild* Überschrift.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FlgpOwJZHPh4UAnrEyoZ2%2FScreenshot%202026-05-18%20at%2009.26.52.png?alt=media&amp;token=6430a500-8532-4fda-9789-1c879854cb67" alt="" width="295"><figcaption></figcaption></figure></div>

**Bilder oder Logos ersetzen**

1. Wählen Sie auf der Arbeitsfläche das Foto aus, das Sie ändern möchten.
2. Im **Bearbeiten** Menü, wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[Entfernen]** und wählen Sie dann **Datei auswählen** um ein neues Bild erneut hochzuladen.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FnLgD9kbzviI0PLgHBwi2%2FScreenshot%202026-05-18%20at%2009.27.57.png?alt=media&amp;token=f6eddd68-8246-4d60-8470-ab4cf3a66c9a" alt="" width="299"><figcaption></figcaption></figure></div>
3. Laden Sie das Bild mit einer dieser Methoden hoch:
   * Ziehen Sie das Bild per Drag-and-drop
   * Suchen Sie eine Datei auf Ihrem Computer
   * Im *Webadresse* Registerkarte, fügen Sie die öffentliche URL der Datei ein
4. Wählen Sie **Fertig**.

**Passen Sie an, welche Teilen-Schaltflächen angezeigt werden**

Sie können vorhandene Teilen-Schaltflächen mit dem **Bearbeiten** Menü bearbeiten.

1. Wählen Sie auf der Arbeitsfläche die Teilen-Schaltfläche aus, die Sie bearbeiten möchten.
2. Im **Bearbeiten** Registerkarte, wählen Sie den Namen der Website oder des Dienstes unter der *Freigabemedium* Überschrift.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FNvgjnWp81PZSbXRInnFF%2FScreenshot%202026-05-18%20at%2009.30.34.png?alt=media&amp;token=a9e03a88-d25c-4f80-a304-a922741ca5d2" alt="" width="296"><figcaption></figcaption></figure></div>

Fügen Sie mithilfe der neuen Teilen-Schaltfläche hinzu **Hinzufügen** Menü bearbeiten.

1. In der **Hinzufügen** Registerkarte, wählen Sie **Teilen**.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FAjOJfvj8X7nfL0AAJTJK%2FScreenshot%202026-05-18%20at%2009.31.51.png?alt=media&amp;token=5abcab17-8b61-4df8-892b-41db83253eb3" alt="" width="283"><figcaption></figcaption></figure></div>
2. Wählen Sie die passende Karte aus.
3. Wählen Sie die blaue **Hinzufügen zu** Schaltfläche, um die Komponente auf der Arbeitsfläche zu platzieren.
   {% endstep %}

{% step %}
**Schritt 4: Vorschau und speichern**

1. Sehen Sie sich in der Vorschau an, wie das Widget für Ihre Teilnehmenden angezeigt wird, indem Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Vorschau]** in der oberen Menüleiste auswählen.
   * Sie können zwischen einer Vorschau der Erfahrung für ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ae8027a26340e35a4d47f2a067cfadc9fc78113f%2F286f2a6c1251052ae82b73cd1c52b622b18f5203ba9cc10fde4d74292ac28d34.png?alt=media) **\[Desktop]**, ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-deeb14b0e398d5dbb2dfb280d3fd7d8e9411b26e%2F74c7be4be7f1d77a3793767c29c5bd878acceacf1d2533055231d5110b12dd61.png?alt=media) **\[Tablet]**, oder ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6156958cf5fc18498276161791a0514d9005d7cf%2F906c40a4da5b9c02a51450974f61a71761acc07baff3052b53f708d5b768a9be.png?alt=media) **\[Mobile]** Benutzer durch Auswahl des jeweiligen Gerätesymbols wechseln.
2. Um zur Bearbeitungsoberfläche zurückzukehren, wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Bearbeiten]** in der oberen Menüleiste auswählen.

   <div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FLtrKm25PXlhbzNvd63Kd%2FScreenshot%202026-05-18%20at%2009.32.48.png?alt=media&amp;token=6e306358-0acf-4592-bcdd-5122c7fee062" alt="" width="563"><figcaption></figcaption></figure></div>
3. **Speichern** Ihre Änderungen.

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>Warnung:</strong> Der Widget-Editor speichert Ihre Änderungen nicht automatisch. Klicken Sie <strong>Speichern</strong> häufig darauf, damit Sie Ihre Arbeit nicht verlieren.</p></div>

Wenn Sie **Speichern**, werden die Änderungen zu Ihrem [Programm-Entwurf](/brand/de/what-would-you-like-to-learn-about/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate.md).
{% endstep %}
{% endstepper %}

#### Erweiterte Anpassungsoptionen

Mit erweiterten Komponenten können Sie bedingte Inhalte einfügen, die auf dem *E-Mail*, *Segment*, oder *benutzerdefinierten Feld*des Teilnehmers basieren. Wenn Sie beispielsweise eine Rangliste nur für Teilnehmende anzeigen möchten, die Abonnenten auf Gold-Niveau sind, dann wird die **Bedingungsabschnitt nach Segment** Komponente Ihnen dies ermöglichen.

Sie können erweiterte Komponenten über die **Hinzufügen** Registerkarte hinzufügen. Das Einrichten erfordert etwas zusätzlichen Aufwand, da Sie einen [JSONata-Ausdruck](http://docs.jsonata.org/overview.html) im *Bedingung* Feld, das die Logik dafür definiert, wann die Bedingung erfüllt ist. Wenden Sie sich an unser [Support-Team](mailto:saasquatch-support@impact.com) wenn Sie Hilfe benötigen.

#### Mehr erfahren

* [Bearbeiten Sie das HTML Ihres Widgets oder Ihrer Microsite für Advocate](#access-the-widget-editor-0-0)
* [Benutzerdefinierte NPM-Pakete für Advocate installieren](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md)


---

# 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-experiences/customize-program-widgets.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.