# Programm-Widgets anpassen

#### Auf den Widget-Editor zugreifen

1. Wählen Sie im linken Navigationsmenü ![](/files/8189ccdb3d6833e64eac05afbd5a6e7ceadce224) **\[Engage] → Inhalte**.
2. Auf der *Widgets* Karte wählen Sie **Widgets bearbeiten.**
3. Wählen Sie im linken Slide-out-Menü 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: Eine Vorlage auswählen**

1. Im linken Slide-out-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="/files/fb2ab69edfa05d95ba92a933426ea5041b3fe677" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Hinweis:** Wenn Sie eine Vorschau ansehen 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, wenn Sie bereit sind, die vorgenommenen Änderungen zu übernehmen.
{% endhint %}
{% endstep %}

{% step %}
**Schritt 2: Den 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 [Übersicht über den Widget-Editor](/brand/de/woruber-mochten-sie-mehr-erfahren/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ü **Hinzufügen** Reiter, wählen Sie eine Komponentengruppe aus.
   * Erfahren Sie mehr über die [verfügbaren Komponenten](/brand/de/woruber-mochten-sie-mehr-erfahren/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 Eigenschaften, die Sie bearbeiten können, hängen davon ab, welche Art von Komponente Sie ausgewählt haben. Wenn Sie beispielsweise die *Hero-Image* 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 Schriftart, Textfarbe und Textinhalt ändern.

1. Wählen Sie die Komponente aus, die Sie bearbeiten möchten.
2. Verwenden Sie die Optionen im *Komponenten* Menü **Bearbeiten** Reiter, um ihre 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/woruber-mochten-sie-mehr-erfahren/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 der Stelle aus, zu der die Komponente verschoben werden soll.

   * Statt per Drag-and-drop müssen Sie die Schaltfläche auswählen 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: Erscheinungsbild und Design des Widgets anpassen**

**Bilder oder Logos hinzufügen**

1. Rechts, im *Komponenten* Menü **Hinzufügen** Reiter, wählen Sie die **Allgemeinen Komponenten** Kategorie aus.
2. Wählen Sie entweder:
   * **Overlay-Hero-Image** (ein Bild mit darübergelegtem, bearbeitbarem Text)
   * **Bild** (ein einfaches Bild ohne Text darüber)
3. Fügen Sie das Bild der Arbeitsfläche hinzu.
4. Im *Komponenten-Menü* **Bearbeiten** Reiter, 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. Im **Bearbeiten** Menü wählen Sie ![](/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 mit einer dieser Methoden hoch:
   * Ziehen Sie das Bild per Drag-and-drop
   * Suchen Sie eine Datei auf Ihrem Computer
   * Im *Webadresse* Reiter, fügen Sie die öffentliche URL der Datei ein
4. Wählen Sie **Fertig**.

**Anpassen, 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** Reiter, wählen Sie den Namen der Website oder des Dienstes unter dem *Teilen-Medium* Ü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. Im **Hinzufügen** Reiter, 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 und speichern**

1. Sehen Sie in der Vorschau, wie das Widget für Ihre Teilnehmenden 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]** Benutzer 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 häufig auf <strong>Speichern</strong> sicherzustellen, dass Sie Ihre Arbeit nicht verlieren.</p></div>

Wenn Sie **Speichern**wählen, werden die Änderungen zu Ihrem [Programm-Entwurf](/brand/de/woruber-mochten-sie-mehr-erfahren/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 der Grundlage des *E-Mail*, *Segment*oder *benutzerdefinierten Felds*des Teilnehmenden basieren. Wenn Sie beispielsweise eine Rangliste nur für Teilnehmende anzeigen möchten, die Abonnenten auf Gold-Niveau sind, ermöglicht Ihnen die **Bedingter Abschnitt auf Segment** Komponente dies.

Sie können erweiterte Komponenten über den **Hinzufügen** Reiter hinzufügen. Die Einrichtung erfordert etwas zusätzlichen Aufwand, da Sie einen [JSONata-Ausdruck](http://docs.jsonata.org/overview.html) in das *Bedingung* Feld eingeben müssen, das die Logik 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/woruber-mochten-sie-mehr-erfahren/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md)


---

# Agent Instructions: 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/woruber-mochten-sie-mehr-erfahren/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.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.