> 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/customize-widgets-and-microsites-with-the-content-editor.md).

# Widgets und Microsites mit dem Content-Editor anpassen

Der Content-Editor ermöglicht es Ihnen, Widgets und Microsites zu erstellen, die nahtlos zur Identität Ihrer Marke passen und Ihren Kundinnen und Kunden ein konsistentes und vertrauenswürdiges Erlebnis bieten. Ein klar markierter Touchpoint ist entscheidend, um hohe Interaktion und die Nutzung des Programms zu fördern.

#### Zentrale Branding-Steuerung

Sie können die zentralen Designelemente Ihrer Marke ganz einfach mit der Widget- oder Microsite-Stiloption finden und aktualisieren. Alle Branding-Einstellungen befinden sich in einem eigenen Branding-Bereich.

Widgets oder Microsites sehen je nach Kontext des Nutzers unterschiedlich aus, zum Beispiel ob er angemeldet ist, einen Fehler erhält oder sie auf einem mobilen Gerät ansieht. Mit unseren Editor-Vorschauen können Sie ganz einfach zwischen allen möglichen Zuständen Ihres Widgets oder Ihrer Microsite wechseln.

{% hint style="info" %}
**Hinweis**: Die Vorschau ist eher für Widgets (z. B. Instant-Access-Widgets) und Komponenten (z. B. Bargeld, Prämienumtausch) geeignet. Um Microsites in der Vorschau anzuzeigen, müssen Sie zu den verschiedenen Microsite-Seiten navigieren, um die Zustände zu sehen.
{% endhint %}

Dadurch entfällt die Notwendigkeit, Aktionen manuell auszuführen, um zu sehen, wie eine Komponente aussehen wird. Sie können nun den Text und das Design für jeden Schritt der Nutzerreise mit Zuversicht bearbeiten, einschließlich:

* Ansichten für angemeldete vs. abgemeldete Nutzer
* Fehler- und Erfolgsmeldungen
* Verschiedene Schritte in einem mehrstufigen Ablauf (wie etwa die Auszahlung per Bargeldprüfung)

So passen Sie Ihren Branding-Stil an:

1. Wählen Sie im linken Navigationsmenü ![](/files/8189ccdb3d6833e64eac05afbd5a6e7ceadce224) **\[Engage] → Inhalt**.
   * Für Widgets wählen Sie **Widgets bearbeiten** und für Microsites wählen Sie **Inhalt bearbeiten**.
2. Wählen Sie im linken Menü aus, ob Sie die Microsite oder das Widget bearbeiten möchten.
3. Wählen Sie die Seitenvorlage aus, an der Sie Änderungen vornehmen möchten, und wählen Sie dann **Widget-Stil**/**Microsite-Stil**.
4. Wählen Sie Ihre Markenfarbe aus, um die Hauptfarbe zu ändern, die in Ihrem Widget oder Ihrer Microsite angezeigt wird.
5. Wählen Sie als Nächstes den Schriftstil aus, den Sie verwenden möchten.
6. **\[Optional]** Gehen Sie die übrigen Stiloptionen durch, um die Identität Ihrer Marke innerhalb des Widgets oder der Microsite vollständig anzupassen.

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

<details>

<summary>Referenz zu den Elementen des Stil-Editors</summary>

| Stilelement            | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Hauptmarkenfarbe       | <p>Diese Farbe wird in verschiedenen Elementen Ihres Widgets oder Ihrer Microsite verwendet, daher ist es wichtig, diesen Schritt abzuschließen. Wählen Sie Ihre Hauptmarkenfarbe aus.</p><p>Diese Farbe wird weiter unten in den Bearbeitungsoptionen auch in den Abschnitten Primäre Schaltfläche und Sekundäre Schaltfläche verwendet.</p><p><img src="/files/dbc052df20769eb3f781682b54998e7c97c0a6fd" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| Schriftart             | <p>Wählen Sie den Schriftstil aus, den Sie in Ihrem Widget oder Ihrer Microsite anzeigen möchten.</p><p><img src="/files/f81bba5d3fa54e8460833dcee2fcf074644b2a97" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| Farbe                  | <p>Wählen Sie die verschiedenen Farben und Akzente aus, die Sie in Ihrem Widget oder Ihrer Microsite anzeigen möchten:</p><p>• <strong>Hintergrund</strong></p><p>Wählen Sie eine Farbe aus, die der Hintergrund für Ihr Widget oder Ihre Microsite haben soll.</p><p>• <strong>Text</strong></p><p>Sie können die Schriftfarbe sowohl für den Haupttext als auch für den dezenteren Text innerhalb des Widgets oder der Microsite ändern.</p><p>• <strong>Akzentfarbe</strong></p><p>Ändern Sie die Farben Ihrer Akzente. Dazu gehören Elemente wie Tabs oder Symbole innerhalb des Widgets oder der Microsite.</p><p><img src="/files/47f6bd510d03ab0a585bcd488be67ab1906cbbc2" alt="" data-size="original"></p><p>• <strong>Zusätzliche Farben</strong> <img src="/files/62a75895785f5ef5de73c56f40f1f36808a75ade" alt=""></p><p>Sie können Farben und Akzente für jedes Element je nach Widget- oder Microsite-Typ weiter anpassen.</p><p><img src="/files/a973ee193c1ffc638ff40d152993316e76b9ed85" alt="" data-size="original"></p> |
| Primäre Schaltfläche   | <p>Wählen Sie das Farbschema aus, das Ihre primäre oder Hauptschaltfläche haben soll. Sie können außerdem die Pixelanzahl für den Rahmenradius um die Schaltfläche anpassen.</p><p><img src="/files/00ec74aa10ac406d279bffe8a1e739844605e330" alt="" data-size="original"></p><p>Erweitern Sie den <img src="/files/62a75895785f5ef5de73c56f40f1f36808a75ade" alt=""> <strong>Hover-Status</strong> Abschnitt, um die Farbe, in die sich Ihre Schaltfläche ändert, sobald ein Nutzer mit der Schaltfläche hovert oder interagiert, weiter auszuwählen oder zu ändern.</p><p><img src="/files/da027b64b7adf5e37438ace49592f5239a0b2398" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                   |
| Sekundäre Schaltfläche | <p>Wählen Sie das Farbschema aus, das Ihre sekundäre Schaltfläche haben soll. Sie können außerdem die Pixelanzahl für den Rahmenradius um die Schaltfläche anpassen.</p><p><img src="/files/1ba590068d76ac2ba200b0b5766c886d2d4f32e4" alt="" data-size="original"></p><p>Erweitern Sie den <img src="/files/62a75895785f5ef5de73c56f40f1f36808a75ade" alt=""> <strong>Hover-Status</strong> Abschnitt, um die Farbe, in die sich Ihre Schaltfläche ändert, sobald ein Nutzer mit der Schaltfläche hovert oder interagiert, weiter auszuwählen oder zu ändern.</p><p><img src="/files/fc4a22f989ef84cdcb07aac01747fad8bf89f65e" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                           |
| Rahmen                 | <p>Ändern Sie die Farbe und die Rahmenumrandung Ihrer Komponenten, wie etwa Tabellen oder Karten, innerhalb Ihres Widgets oder Ihrer Microsite.</p><p>• <strong>Farbe</strong></p><p>Wählen Sie die Farbe Ihres Rahmens aus.</p><p>• <strong>Dicke</strong></p><p>Geben Sie einen Wert in Pixeln ein, um die Dicke Ihres Rahmens festzulegen.</p><p>• <strong>Rahmenradius</strong></p><p>Geben Sie einen Wert in Pixeln ein, um den Radius Ihres Rahmens festzulegen.</p><p><img src="/files/6d513c4cb31b4244f225bb1fe184741d93c567a9" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| Formularfelder         | <p>Wählen Sie die Farbe aus, die Sie für die verschiedenen Formularfelder innerhalb Ihres Widgets oder Ihrer Microsite möchten. Dazu gehören alle Eingabefelder, die der Nutzer ausfüllt. Sie können auch einen Wert in Pixeln eingeben, um die Größe des Rahmenradius zu ändern.</p><p><img src="/files/661f57a8c28336ac9db3b6caa28f7b799d27f62b" alt="" data-size="original"></p><p>Erweitern Sie den <img src="/files/62a75895785f5ef5de73c56f40f1f36808a75ade" alt=""> <strong>Erweiterte Optionen</strong> Abschnitt, um die Farben des ausgewählten Zustands oder des Hover-Status Ihrer Formularfelder weiter anzupassen.</p><p><img src="/files/1e20f0c865e4beac9ae9f1ba12a74872a4fd1af7" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                        |
| Widget-Größe           | <p>Ändern Sie die Größe Ihrer Widgets innerhalb der Vorlage. Sie können die Abmessungen sowohl für eingebettete als auch für Popup-Widgets anpassen. Wählen Sie eine Mindest- und eine Maximalgröße und wählen Sie in den Dropdown-Optionen die Maßeinheit aus. Entscheiden Sie sich dafür, die Maße in Pixeln oder in Prozent festzulegen.</p><p><img src="/files/7829ba64a7f6a918703b26f26b180892bbd99537" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

</details>


---

# 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/customize-widgets-and-microsites-with-the-content-editor.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.