> 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ü  **\[Engage] → Inhalt**.
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.
## Passen Sie Ihre Widgets an
{% stepper %}
{% step %}
### **Schritt 1: Wählen Sie eine Vorlage aus**
1. Im linken Ausklappmenü unter *Aktuelles Widget*, wählen Sie **Vorlagen**.
2. Auswählen **Vorlage anwenden** neben der Vorlage aus, mit der Sie beginnen möchten.
{% hint style="success" %}
**Hinweis:** Wenn Sie eine Vorschau anzeigen möchten, wie die Vorlage aussieht, ohne die Änderung zu übernehmen, wählen Sie  **\[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 anzupassen, den Ihre Kundenschützer im Widget sehen.
{% hint style="success" %}
**Hinweis:** Eine Erklärung der verschiedenen Elemente des Widget-Editors finden Sie unter Widget-Editor-Übersicht.
{% endhint %}
{% tabs %}
{% tab title="Hinzufügen" %}
1. Auf der rechten Seite der Seite, im *Komponenten* -Menü **Hinzufügen** -Tab, wählen Sie eine Komponentengruppe aus.
* Erfahren Sie mehr über die verfügbaren Komponenten 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.
{% endtab %}
{% tab title="Bearbeiten" %}
Die Eigenschaften, die Sie bearbeiten können, hängen von dem von Ihnen ausgewählten Komponententyp ab. Wenn Sie beispielsweise die *Hero-Bild* Komponente auswählen, können Sie ein neues Bild auswählen und die Hintergrundfarbe ändern. Wenn Sie ein nur aus Text bestehendes Element 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** -Tab, um deren 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.
{% endtab %}
{% tab title="Verschieben" %}
1. Wählen Sie auf der Arbeitsfläche die Komponente aus, die Sie verschieben möchten, und halten Sie sie gedrückt.
2. Ziehen Sie die Komponente an ihre neue Position auf der Arbeitsfläche und lassen Sie sie dann los, um sie dort abzulegen.
* Einige Komponenten können nicht verschoben werden. Wenn eine Komponente nicht per Drag & Drop verschiebbar ist, bewegt sie sich nicht, wenn Sie versuchen, sie neu zu positionieren.
{% endtab %}
{% tab title="Entfernen" %}
1. Wählen Sie auf der Arbeitsfläche die Komponente aus, die Sie entfernen möchten.
2. Auswählen  **\[Entfernen]**.
{% endtab %}
{% endtabs %}
{% endstep %}
{% step %}
### **Schritt 3: Erscheinungsbild und Design des Widgets anpassen**
#### **Bilder oder Logos hinzufügen**
1. Rechts, im *Komponenten* -Menü **Hinzufügen** -Tab, wählen Sie die **Allgemeine Komponenten** -Kategorie aus.
2. Wählen Sie entweder:
* **Überlagertes Hero-Bild** (ein Bild mit überlagertem, bearbeitbarem Text)
* **Bild** (ein einfaches Bild ohne Text darüber)
3. Fügen Sie das Bild zur Arbeitsfläche hinzu.
4. Aus dem *Komponenten-Menü* **Bearbeiten** -Tab, wählen Sie die **Datei auswählen** -Schaltfläche unter der *Bild* Überschrift.
#### **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  **\[Entfernen]** und wählen Sie dann **Datei auswählen** aus, um ein neues Bild erneut hochzuladen.
3. Laden Sie das Bild mit einer dieser Methoden hoch:
* Ziehen Sie das Bild per Drag & Drop
* Suchen Sie auf Ihrem Computer nach einer Datei
* Im *Webadresse* -Tab, fügen Sie die öffentliche URL der Datei ein
4. Auswählen **Fertig**.
#### **Passen Sie an, welche Freigabeschaltflächen angezeigt werden**
Sie können vorhandene Freigabeschaltflächen über das **Bearbeiten** -Menü bearbeiten.
1. Wählen Sie auf der Arbeitsfläche die Freigabeschaltfläche aus, die Sie bearbeiten möchten.
2. Im **Bearbeiten** Tab wählen Sie den Namen der Website oder des Dienstes unter dem *Freigabemedium* Überschrift.
Fügen Sie eine neue Freigabeschaltfläche hinzu, indem Sie den **Hinzufügen** -Menü bearbeiten.
1. Aus dem **Hinzufügen** -Tab wählen und **Freigabe**.
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 für Ihre Teilnehmer aussehen wird, indem Sie  **\[Vorschau]** in der oberen Menüleiste auswählen.
* Sie können zwischen einer Vorschau der Erfahrung für  **\[Desktop]**,  **\[Tablet]**, oder  **\[Mobil]** -Benutzer wechseln, indem Sie das entsprechende Gerätesymbol auswählen.
2. Um zur Bearbeitungsoberfläche zurückzukehren, wählen Sie  **\[Bearbeiten]** in der oberen Menüleiste auswählen.
3. **Speichern** Ihre Änderungen.
{% hint style="warning" %}
**Warnung:** Der Widget-Editor speichert Ihre Änderungen nicht automatisch. Klicken Sie häufig auf **Speichern** , damit Sie Ihre Arbeit nicht verlieren.
{% endhint %}
Wenn Sie **Speichern**auswählen, werden die Änderungen zu Ihrem Programmentwurf hinzugefügt.
{% endstep %}
{% endstepper %}
## Erweiterte Anpassungsoptionen
Erweiterte Komponenten ermöglichen es Ihnen, bedingte Inhalte einzubinden, die auf dem *E-Mail*, *Segment*, oder *benutzerdefinierten Feld*des Teilnehmers basieren. Wenn Sie beispielsweise eine Bestenliste nur für Teilnehmer anzeigen möchten, die Gold-Abonnenten sind, können Sie dies mit der **bedingten Sektion basierend auf Segment** -Komponente tun.
Sie können erweiterte Komponenten über den **Hinzufügen** -Tab hinzufügen. Das Einrichten erfordert etwas zusätzliche Arbeit, da Sie einen [JSONata-Ausdruck](http://docs.jsonata.org/overview.html) im *Bedingung* -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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
