> 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 Drag-and-Drop-Editor, mit dem Sie das Erscheinungsbild und den Inhalt der Widgets anpassen können, die Ihren Kunden-Advocates angezeigt werden.

## Oberfläche des Widget-Editors

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

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F5lBstm39QZFddtyAHWzK%2FCanvas%20(2).png?alt=media&#x26;token=b8ae9b78-8cea-425e-8cd8-e35a0b97535a" alt="" width="563"><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="Obere Menüleiste" %}
In der Menüleiste oben auf der Seite können Sie Aktionen rückgängig machen, den HTML-Code anzeigen und das fertige Widget in der Vorschau ansehen. Verwenden Sie die Symbole für Desktop, Tablet oder Mobilgerät, um zu sehen, wie Ihr Widget auf Geräten mit unterschiedlichen Bildschirmgrößen dargestellt 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 Teilnehmenden angezeigt werden. Ziehen Sie eine Komponente an eine neue Position auf der Arbeitsfläche, um ihre Reihenfolge zu ändern.
{% endtab %}

{% tab title="Linkes Ausklappmenü" %}
Das Einstellungsmenü im linken Ausklappbereich 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 zu sehen, 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 mehr Styling auf Markenebene wählen Sie die Option „Widget-Design“. Weitere Informationen zu den verfügbaren Styling-Optionen finden Sie unter „Widgets und Microsites mit dem Content Editor anpassen“.
{% endtab %}

{% tab title="Komponente" %}
Das Komponentenmenü ist ein Panel rechts von der Arbeitsfläche. Verwenden Sie die **Hinzufügen** Registerkarte, um neue Komponenten auf der Arbeitsfläche einzufügen, und verwenden Sie die **Bearbeiten** Registerkarte, um Anpassungen an bereits vorhandenen Inhalten vorzunehmen.
{% endtab %}
{% endtabs %}

## Fehlerbehebung

Das Widget verfügt über zwei Validierungsebenen, um Fehler bei der Platzierung von Komponenten und 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 Sie ungelöste Fehler haben, 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="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-511216419b1ffaa7cf19cda9c94f06eedbbdaabc%2Fb0790ca38faffb4d36e8ed5d551995d0231df77a9958ffb98e857740cd207626.jpg?alt=media" alt="" width="333"><figcaption></figcaption></figure></div>

Erfahren Sie mehr über das Anpassen von Programm-Widgets.

## **Details zu ungelösten Fehlern anzeigen**

1. Wählen Sie **Details** in der Warnmeldung für eine kurze Erklärung, was schiefgelaufen ist.
2. Gehen Sie auf eine der folgenden Arten zur Komponente mit dem Fehler:
   * Durch Auswahl von **Ebenen öffnen**
   * Durch Auswahl der Fehlermeldung
3. Suchen Sie die Komponente mit dem Fehler. Sie wird 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
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/widget-editor-overview.md?ask=<question>&goal=<user_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.