> 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 Mikrosites zu erstellen, die sich nahtlos an die Identität Ihrer Marke anpassen und Ihren Kunden so ein konsistentes und vertrauenswürdiges Erlebnis bieten. Ein gut gebrandeter Kontaktpunkt ist entscheidend, um hohe Interaktion und Programmakzeptanz zu fördern.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FMsFCqNf5XpWg6l0OY9UU%2Fadv-150-5_1.mp4?alt=media&token=ee8653ae-d8ef-4519-a1f7-6b5ec0bc4214>" %}

## Zentrale Branding-Steuerung

Mit der Stiloption für Widgets oder Mikrosites können Sie die zentralen Designelemente Ihrer Marke ganz einfach finden und aktualisieren. Alle Branding-Einstellungen befinden sich in einem eigenen Branding-Bereich.

Widgets oder Mikrosites sehen je nach Kontext des Nutzers unterschiedlich aus, zum Beispiel ob er angemeldet ist, auf einen Fehler stößt oder auf einem mobilen Gerät ansieht. Unsere Editor-Vorschauen ermöglichen es Ihnen, ganz einfach zwischen allen möglichen Zuständen Ihres Widgets oder Ihrer Mikrosite umzuschalten.

{% hint style="success" %}
**Notiz**: Die Vorschau eignet sich eher für Widgets (z. B. Instant-Access-Widgets) und Komponenten (z. B. Barauszahlung, Prämientausch). Um Mikrosites in der Vorschau zu sehen, müssen Sie zu den verschiedenen Mikrosite-Seiten navigieren, um die Zustände anzuzeigen.
{% 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 User Journey mit Zuversicht bearbeiten, einschließlich:

* Ansichten im angemeldeten vs. abgemeldeten Zustand
* Fehler- und Erfolgsmeldungen
* Verschiedene Schritte in einem mehrstufigen Ablauf (z. B. Verifizierung der Barauszahlung)

So passen Sie Ihren Branding-Stil an:

1. Wählen Sie im linken Navigationsmenü ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Inhalt**.
   * Für Widgets wählen Sie **Widgets bearbeiten** und für Mikrosites wählen Sie **Inhalt bearbeiten**.
2. Wählen Sie im linken Menü aus, ob Sie die Mikrosite oder das Widget bearbeiten möchten.
3. Wählen Sie die Seitenvorlage aus, die Sie bearbeiten möchten, und wählen Sie dann **Widget-Stil**/**Mikrosite-Stil**.
4. Wählen Sie Ihre Markenfarbe aus, um die Hauptfarbe in Ihrem Widget oder Ihrer Mikrosite zu ändern.
5. Wählen Sie anschließend den Schriftstil aus, den Sie verwenden möchten.
6. **\[Optional]** Gehen Sie die verbleibenden Stiloptionen durch, um Ihre Markenidentität innerhalb des Widgets oder der Mikrosite vollständig anzupassen.

<div data-with-frame="true"><figure><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FTr3NiEK9I3MXi3u7YWmh%2Fdownload.gif?alt=media&amp;token=6af5544b-ff9a-4201-a363-f13f2b53b099" alt="" width="563"><figcaption></figcaption></figure></div>

<details>

<summary>Referenz der Stileditor-Elemente</summary>

| Stilelement          | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Hauptmarkenfarbe     | <p>Diese Farbe wird in verschiedenen Elementen in Ihrem Widget oder Ihrer Mikrosite verwendet, daher ist es wichtig, diesen Schritt abzuschließen. Wählen Sie Ihre Hauptmarkenfarbe aus.</p><p>Diese Farbe wird auch in den weiter unten in den Bearbeitungsoptionen befindlichen Abschnitten für die Primärschaltfläche und die Sekundärschaltfläche verwendet.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e6c8a0d69bf06ad5a2df6c27d1f09ae0ee432e90%2Fb55c15456cdbd904a6ff8a44d426f93a32958279e057958310f6d52bf4970a4f.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Schrift              | <p>Wählen Sie den Schriftstil aus, der in Ihrem Widget oder Ihrer Mikrosite verwendet werden soll.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ec18fd738390db60d7a39412866bb3698259b14f%2Fcc6e451c17e08331fb9d41c74d5d87453a9ae21e79ea9850f91bab20b49a716a.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| Farbe                | <p>Wählen Sie die verschiedenen Farben und Akzente aus, die in Ihrem Widget oder Ihrer Mikrosite vorhanden sein sollen:</p><p>• <strong>Hintergrund</strong></p><p>Wählen Sie eine Farbe für den Hintergrund Ihres Widgets oder Ihrer Mikrosite aus.</p><p>• <strong>Text</strong></p><p>Sie können die Schriftfarbe sowohl für den Haupttext als auch für den Sekundärtext innerhalb des Widgets oder der Mikrosite ändern.</p><p>• <strong>Akzentfarbe</strong></p><p>Ändern Sie die Farben Ihrer Akzente. Dazu gehören Elemente wie Registerkarten oder Symbole innerhalb des Widgets oder der Mikrosite.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-55be9fef526da2d5ca0fb54102ef83ad55d03e4b%2F81b48cb986ad1a94cbefaf856b0debab102bb11279d654f5e91caf10764718de.jpg?alt=media" alt="" data-size="original"></p><p>• <strong>Zusätzliche Farben</strong> <img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""></p><p>Sie können Farben und Akzente für jedes Element je nach Widget- oder Mikrosite-Typ weiter anpassen.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0bece59f882d11a013783997bb2518dd4777f23c%2F2f4b167c662fe81c1de11e269d7bac69cc0422c2043a2087d21ace33273bee7c.jpg?alt=media" alt="" data-size="original"></p> |
| Primärschaltfläche   | <p>Wählen Sie das Farbschema für Ihre primäre bzw. Hauptschaltfläche aus. Sie können auch den Pixelwert für den Eckenradius der Schaltfläche anpassen.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c761dd03be42d0d41dc16f7a120c4fc2fdc433ac%2Fde0edb9123b43b0ce3a5e5c921ef75bb4f85d62426483bf97e46aacb7becd728.jpg?alt=media" alt="" data-size="original"></p><p>Erweitern Sie den <img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Hover-Zustand</strong> Bereich, um die Farbe auszuwählen oder zu ändern, in die Ihre Schaltfläche wechselt, sobald ein Nutzer mit der Schaltfläche darüberfährt oder mit ihr interagiert.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aa31df8e922e6a978fbe88542452bbbaf929c848%2Ff99838a5337db16b96652353e550fdeb7df6532461e4b0e324d579065c4bc4d7.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                   |
| Sekundärschaltfläche | <p>Wählen Sie das Farbschema für Ihre sekundäre Schaltfläche aus. Sie können auch den Pixelwert für den Eckenradius der Schaltfläche anpassen.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-aba04be238a4411ef008e443e94dc3f15b0b2923%2Fce809941b33f15de27de52cf21ed8d5cf5b4e36991d8fef0b0d70f72f3b8c9ab.jpg?alt=media" alt="" data-size="original"></p><p>Erweitern Sie den <img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Hover-Zustand</strong> Bereich, um die Farbe auszuwählen oder zu ändern, in die Ihre Schaltfläche wechselt, sobald ein Nutzer mit der Schaltfläche darüberfährt oder mit ihr interagiert.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-561ddad6d0fa2db588ba4837bd6cce5275c02b3d%2Fb20584dcfe328bb0cc164b094945aa4bf2c8fb5fe0fb809c83073204fd43798f.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                           |
| Rahmen               | <p>Ändern Sie die Farbe und die Rahmenumrandung Ihrer Komponenten, wie Tabellen oder Karten, in Ihrem Widget oder Ihrer Mikrosite.</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>Eckenradius</strong></p><p>Geben Sie einen Wert in Pixeln ein, um den Radius Ihres Rahmens festzulegen.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ad49b6545fa9d0ffa189127095f15ad904d62b26%2F87161ed257680c7779e29077bc360366c09ef62774fb3917cdc33621b85aa064.jpg?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| Formularfelder       | <p>Wählen Sie die Farbe für die verschiedenen Formularfelder in Ihrem Widget oder Ihrer Mikrosite aus. Dazu gehören alle Eingabefelder, die der Nutzer ausfüllt. Sie können auch einen Wert in Pixeln eingeben, um die Größe des Eckenradius zu ändern.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7ca9a1cbe9bd4d20e58a6a912c70e6b68d69832e%2Fd56db5a066f633dcafa399ca40df9b9a36cb6b8dc116695eedc872746af2a5b4.jpg?alt=media" alt="" data-size="original"></p><p>Erweitern Sie den <img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media" alt=""> <strong>Erweiterte Optionen</strong> Bereich, um die Farben des ausgewählten Zustands oder des Hover-Zustands Ihrer Formularfelder weiter anzupassen.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1316f14f290be578906e018e061c38320ba9daac%2F1c704526ce54eccb73066cd4a924cc7b59fdb9bfb8842b648b385ea28923ea0e.jpg?alt=media" 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 Höchstgröße aus und wählen Sie in den Dropdown-Optionen die Maßeinheit. Legen Sie die Maße wahlweise in Pixeln oder in Prozent fest.</p><p><img src="https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b4d9c97d0dafbbc79cd2782a413fc8eaad21e8d3%2F7109281d478bf7f826b153d935ff7b87f62a1a80c7d6b23aac6d47752c8ae4cb.jpg?alt=media" 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 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/customize-widgets-and-microsites-with-the-content-editor.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.