# Überblick über den Widget-Editor

Ihr Advocate-Programm bietet einen Editor mit Drag-and-Drop-Funktion, mit dem Sie das Aussehen und den Inhalt der Widgets anpassen können, die Ihren Kundenbotschaftern angezeigt werden.

#### Widget-Editor-Oberfläche

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

<div data-with-frame="true"><figure><img src="/files/0dec334a37abd1625a4d9b8a8642e48b0834466f" alt=""><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 auswählen **Ebenen** um eine detaillierte Ansicht aller Komponenten in Ihrem Widget zu sehen, oder **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 Stil-Anpassungen auf Branding-Ebene wählen Sie die Option „Widget-Stil“. Siehe [Widgets und Microsites mit dem Content-Editor anpassen](/brand/de/woruber-mochten-sie-mehr-erfahren/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) für weitere Informationen zu den verfügbaren Stiloptionen.
{% 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 Anpassungen an den 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 überprüfen. Häufige Gründe für das Erhalten einer 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=""><figcaption></figcaption></figure></div>

Erfahren Sie mehr über [Programm-Widgets anpassen](/brand/de/woruber-mochten-sie-mehr-erfahren/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, was schiefgelaufen ist.
2. Gehen Sie zur Komponente mit dem Fehler, indem Sie entweder:
   * Auswählen von **Ebenen öffnen**
   * Die Fehlermeldung auswählen
3. Suchen Sie die Komponente mit dem Fehler. Sie ist mit einem roten Ausrufezeichen-Symbol markiert.
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: 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/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.