> 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

#### Greifen Sie auf den Widget-Editor zu

1. Wählen Sie im linken Navigationsmenü ![](/files/8189ccdb3d6833e64eac05afbd5a6e7ceadce224) **\[Engage] → Content**.
2. Auf der *Widgets* Karte, wählen Sie **Widgets bearbeiten.**
3. Wählen Sie im linken Ausklappmenü den Namen des Widgets aus, das Sie bearbeiten möchten.

   <div data-with-frame="true"><figure><img src="/files/865698312d501be3401e29c3f9919f06b9d2ef3b" alt="" width="347"><figcaption></figcaption></figure></div>

#### Passen Sie Ihre Widgets an

{% stepper %}
{% step %}
**Schritt 1: Wählen Sie eine Vorlage**

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

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

{% hint style="success" %}
**Hinweis:** Wenn Sie eine Vorschau sehen möchten, wie die Vorlage aussieht, ohne die Änderung zu übernehmen, wählen Sie ![](/files/d3904c51b3f5bb031a3032436a901d908539e7de) **\[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: Passen Sie den Widget-Inhalt an**

Sie können Komponenten hinzufügen, bearbeiten, verschieben oder entfernen, um den Inhalt anzupassen, den Ihre Kundenvertreter im Widget sehen.

{% hint style="success" %}
**Hinweis:** Eine Erklärung der verschiedenen Elemente des Widget-Editors finden Sie unter [Übersicht ü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 *Komponenten* 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 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="/files/7ca68d04552699e1963668a1f364e89ff43dafff" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Bearbeiten" %}
Die bearbeitbaren Eigenschaften hängen vom Typ der ausgewählten Komponente ab. Wenn Sie beispielsweise die *Hero-Bild* Komponente auswählen, können Sie ein neues Bild wählen und die Hintergrundfarbe ändern. Wenn Sie ein reines Textelement wie eine Überschrift auswählen, können Sie Schriftart, Textfarbe und Textinhalt ändern.

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

   * Wenn Sie einen Link in eine Textkomponente einfügen möchten, können Sie [das 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="/files/10997df38b2c59164bb09ad0062eef0dc81fa844" 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 ![](/files/cf6c8229407b5c76d5bae361979fc518fa4b536c) **\[Verschieben]**.
   * Einige Komponenten können nicht verschoben werden. Die ![](/files/cf6c8229407b5c76d5bae361979fc518fa4b536c) **\[Verschieben]** Option erscheint nur, wenn es auf der Arbeitsfläche einen weiteren 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 per Drag-and-drop müssen Sie die Schaltfläche und dann das Ziel auswählen.

   <div data-with-frame="true"><figure><img src="/files/8ed062aed09404adfd43e1a7c3b4f2cca7a99649" 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 ![](/files/a5160b49a26fec150bdaab07b1a907a12e4acf7a) **\[Entfernen]**.

   <div data-with-frame="true"><figure><img src="/files/8b7bf2999a25e797d3a33c663213065b3bce2682" alt="" width="507"><figcaption></figcaption></figure></div>

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

{% step %}
**Schritt 3: Passen Sie das Erscheinungsbild und das Design des Widgets an**

**Bilder oder Logos hinzufügen**

1. Rechts, in der *Komponenten* 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 *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="/files/73b8a789d0b64f7ccd8f3d7773e666d1aecec086" 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. In der **Bearbeiten** wählen Sie im Menü ![](/files/fb8f72be00c30f52a62d6a39cd42bf6b750eeb9d) **\[Entfernen]** und dann **Datei auswählen** aus, um ein neues Bild erneut hochzuladen.

   <div data-with-frame="true"><figure><img src="/files/1d9a4fce190573e13119ce4b1168b08b3f8e04cb" alt="" width="299"><figcaption></figcaption></figure></div>
3. Laden Sie das Bild auf eine der folgenden Arten hoch:
   * Ziehen Sie das Bild per Drag-and-drop
   * Suchen Sie auf Ihrem Computer nach einer Datei
   * In der *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**

Vorhandene Teilen-Schaltflächen können Sie über das **Bearbeiten** Menü bearbeiten.

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

   <div data-with-frame="true"><figure><img src="/files/427feae983c4b719bd28fac3f25309f1943b1bf2" alt="" width="296"><figcaption></figcaption></figure></div>

Fügen Sie eine neue Teilen-Schaltfläche hinzu, indem Sie die **Hinzufügen** Menü bearbeiten.

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

   <div data-with-frame="true"><figure><img src="/files/b192c7c0aaa531abab916c55d55256e921f1f73f" 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 anzeigen und speichern**

1. Zeigen Sie eine Vorschau an, wie das Widget Ihren Teilnehmern angezeigt wird, indem Sie ![](/files/d3904c51b3f5bb031a3032436a901d908539e7de) **\[Vorschau]** in der oberen Menüleiste auswählen.
   * Sie können zwischen einer Vorschau der Erfahrung für ![](/files/c54ab986e8aa9fdf7409506781798b3f72575255) **\[Desktop]**, ![](/files/8a35d3b2df8e4dba1930e7dc0846ea835801238a) **\[Tablet]**&#x6F;der ![](/files/7c475ce4f5172f2f02007c6ff280e7f52af35307) **\[Mobil]** Nutzer wechseln, indem Sie das jeweilige Gerätesymbol auswählen.
2. Um zur Bearbeitungsoberfläche zurückzukehren, wählen Sie ![](/files/d4b632b5d640c8713c37d24cf15e2d26c9f48c5e) **\[Bearbeiten]** in der oberen Menüleiste auswählen.

   <div data-with-frame="true"><figure><img src="/files/4aa292268518e97f829e0494655dbb7bdc21b8af" 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> regelmäßig darauf, damit Ihre Arbeit nicht verloren geht.</p></div>

Wenn Sie **Speichern**auswählen, 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

Erweiterte Komponenten ermöglichen es Ihnen, bedingte Inhalte einzubinden, die auf dem *E-Mail-*, *Segment*oder *benutzerdefinierten Feld*basieren. Wenn Sie beispielsweise eine Bestenliste nur für Teilnehmende anzeigen möchten, die Abonnenten auf Gold-Niveau sind, ermöglicht Ihnen die **Komponente für den bedingten Abschnitt nach Segment** dies.

Erweiterte Komponenten können Sie über die **Hinzufügen** Registerkarte hinzufügen. Die Einrichtung erfordert etwas mehr Aufwand, da Sie einen [JSONata-Ausdruck](http://docs.jsonata.org/overview.html) in das *Bedingungs* Feld eingeben müssen, 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.