> 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/widget-editor-overview.md).

# Überblick über den Widget-Editor

Ihr Advocate-Programm bietet einen Pick-and-Plop-Editor, mit dem Sie das Erscheinungsbild und den Inhalt der Widgets anpassen können, die Ihren Kundenbefürwortern angezeigt werden.

#### Widget-Editor-Oberfläche

Der Self-Service-Widget-Editor hat vier Hauptbereiche:

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

{% tabs %}
{% tab title="Obere Menüleiste" %}
Die Menüleiste oben auf der Seite ist der Ort, an dem Sie Aktionen rückgängig machen, den HTML-Code anzeigen und das fertige Widget in der Vorschau ansehen können. Verwenden Sie die Desktop-, Tablet- oder Mobilgeräte-Symbole, um zu sehen, wie Ihr Widget auf Geräten mit unterschiedlichen Bildschirmgrößen angezeigt wird.
{% endtab %}

{% tab title="Arbeitsfläche" %}
Die Arbeitsfläche zeigt alle Komponenten, aus denen Ihr Widget besteht. Sie können einzelne Komponenten auswählen, um sie zu bearbeiten, oder neue hinzufügen und auf einen Blick sehen, wie sie Ihren Teilnehmenden angezeigt werden.
{% endtab %}

{% tab title="Linkes Ausklappmenü" %}
Das Einstellungsmenü im linken Ausklappmenü ist ein einklappbares Panel links von der Arbeitsfläche. Hier können Sie auswählen **Ebenen** um eine detaillierte Ansicht aller Komponenten in Ihrem Widget anzuzeigen, oder wählen Sie **Vorlagen** um eines unserer vorgefertigten Widgets zu verwenden. Die **Einstellungen** Schaltfläche führt Sie zum Untermenü für die Paketinstallation.

Für noch weitergehende Anpassungen auf Markenebene wählen Sie die Option Widget Style. Weitere Informationen finden Sie in [Widgets und Microsites mit dem Content Editor anpassen](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) zu den verfügbaren Styling-Optionen.
{% endtab %}

{% tab title="Komponenten" %}
Das Komponentenmenü ist ein Panel rechts neben der Arbeitsfläche. Verwenden Sie die **Hinzufügen** Registerkarte, um neue Komponenten in die Arbeitsfläche einzufügen, und verwenden Sie die **Bearbeiten** Registerkarte, um bereits vorhandene Komponenten anzupassen.
{% endtab %}
{% endtabs %}

#### Fehlerbehebung

Das Widget verfügt über zwei Validierungsebenen, um auf Fehler bei der Platzierung von Komponenten und bei den Komponenteneigenschaften zu prüfen. Häufige Gründe für eine Fehlermeldung sind:

* Ein erforderliches Feld fehlt
* Eine ungültige Farbe auswählen
* Eine ungültige URL eingeben

Wenn nicht behobene Fehler vorliegen, wird oben rechts auf der Arbeitsfläche eine Warnmeldung angezeigt, die Sie darüber informiert, wie viele Fehler gefunden wurden.

<div data-with-frame="true"><figure><img src="/files/28e4eb000744ce0dc3973568116dae25240001d4" alt="" width="333"><figcaption></figcaption></figure></div>

Erfahren Sie mehr über [Programm-Widgets anpassen](/brand/de/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md).

**Details zu nicht behobenen Fehlern anzeigen**

1. Wählen Sie **Details** in der Warnmeldung für eine kurze Erklärung dessen, was schiefgelaufen ist.
2. Wechseln Sie zum fehlerhaften Komponenten-Element auf eine der folgenden Arten:
   * Durch Auswählen von **Ebenen öffnen**
   * Durch Auswählen der Fehlermeldungsbeschreibung
3. Suchen Sie die fehlerhafte Komponente. Sie ist mit einem roten Ausrufezeichen-Symbol markiert.
4. Wählen Sie die Komponente aus, um die Eigenschaften in der **Bearbeiten** Leiste.
5. Nehmen Sie die erforderlichen Änderungen vor.


---

# 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/widget-editor-overview.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.