> 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).

# Übersicht über den Widget-Editor

Ihr Advocate-Programm bietet einen Pick-and-Plop-Editor, mit dem Sie das Aussehen 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 eine Vorschau des fertigen Widgets ansehen können. Verwenden Sie die Symbole für Desktop, Tablet oder Mobilgerät, 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 für Ihre Teilnehmer angezeigt werden.
{% endtab %}

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

Für noch weitergehende Gestaltung auf Branding-Ebene wählen Sie die Option Widget-Stil. Siehe [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) für weitere Informationen zu den verfügbaren Gestaltungsoptionen.
{% endtab %}

{% tab title="Komponente" %}
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 Anpassungen an bereits vorhandenen Elementen vorzunehmen.
{% endtab %}
{% endtabs %}

#### Fehlerbehebung

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

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

Wenn ungelöste Fehler vorliegen, wird oben rechts in 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 ungelösten Fehlern anzeigen**

1. Wählen Sie **Details** in der Warnmeldung für eine kurze Erklärung dessen, was schiefgelaufen ist.
2. Gehen Sie zur Komponente mit dem Fehler, indem Sie entweder:
   * Auswählen **Ebenen öffnen**
   * Die Fehlererklärungsmeldung auswählen
3. Suchen Sie die Komponente mit dem Fehler. Sie wird mit einem roten Ausrufezeichen-Symbol markiert sein.
4. Wählen Sie die Komponente aus, um die Eigenschaften in der **Bearbeiten** Leiste zu öffnen.
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:

```
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>
```

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.