> 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/edit-your-widget-or-microsite-html-and-css-for-advocate.md).
# Das HTML und CSS Ihres Widgets oder Ihrer Microsite für Advocate bearbeiten
Sie können Ihre Advocate-Widgets und Ihre Microsite mit zusätzlichem HTML und CSS anpassen, um besser mit dem Look & Feel Ihrer Marke übereinzustimmen. Mit dem integrierten HTML-Editor von Advocate können Sie Struktur und Styling hinzufügen und sogar bestimmte Standardkomponenten überschreiben, um eine tiefere Anpassung zu erreichen.
{% hint style="info" %}
**Hinweis**: Das Bearbeiten von benutzerdefiniertem HTML/CSS ist nur für bestimmte Advocate-Editionen verfügbar. Wenden Sie sich an [Support](mailto:saasquatch-support@impact.com) um Ihr Konto zu aktualisieren und auf diese Funktion zuzugreifen.
{% endhint %}
#### Warum benutzerdefiniertes HTML oder CSS verwenden?
Benutzerdefiniertes HTML und Inline-CSS ermöglichen Ihnen:
* Die Markenrichtlinien Ihres Unternehmens genauer einzuhalten
* Layout und Abstände neu zu formatieren
* Stile anzuwenden, die über das im Standard-Editor Verfügbare hinausgehen
* Das Styling ausgewählter Widget- oder Microsite-Komponenten zu überschreiben
{% hint style="warning" %}
**Wichtig**: Unser Support-Team bietet nur eingeschränkte Unterstützung für Probleme, die durch benutzerdefinierten Code verursacht wurden. Wenn Sie unsicher sind, empfehlen wir, mit Ihrem Advocate-Implementierungs- oder Post-Launch-Team zusammenzuarbeiten.
{% endhint %}
#### HTML oder CSS bearbeiten
{% tabs %}
{% tab title="Ihre Microsite bearbeiten" %}
Sie können das HTML oder CSS bearbeiten, um mithilfe des integrierten HTML-Editors weitere Anpassungen an Ihrer Microsite vorzunehmen. Zwar ermöglicht der HTML-Editor zusätzliche Flexibilität beim Microsite-Design, beachten Sie jedoch, dass wir keine Probleme mit Änderungen durch benutzerdefiniertes HTML oder CSS beheben können.
1. Wählen Sie im linken Navigationsmenü ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Inhalt**.
2. Wählen Sie auf der Microsite-Karte **Inhalt bearbeiten**.
3. Wählen Sie im Tab „Microsite“ das Layout oder die Seite aus, deren Code Sie bearbeiten möchten.
4. Wählen Sie  **\[Code-Ansicht]** in der oberen Menüleiste.
5. Fügen Sie bei Bedarf HTML und CSS hinzu oder ändern Sie diese.
6. CSS kann auf drei Arten hinzugefügt werden:
* Durch Importieren eines externen CSS-Stylesheets
* Am oberen Rand der Seite in einem `
```
* Inline, um einen Stil auf ein bestimmtes HTML-Element anzuwenden:
```programlisting
Erhalten Sie eine Belohnung, wenn Ihr Freund unser Produkt nutzt
```
7. Wählen Sie  **\[Pinsel]** um Ihre Aktualisierungen in der Vorschau anzuzeigen.
8. Wählen Sie **Entwurf speichern** um zu speichern, oder **Veröffentlichen** um Änderungen live zu schalten.
{% endtab %}
{% tab title="Ihr Widget bearbeiten" %}
Sie können das HTML oder CSS bearbeiten, um mithilfe des integrierten HTML-Editors weitere Anpassungen an Ihrem Widget vorzunehmen. Zwar ermöglicht der HTML-Editor zusätzliche Flexibilität beim Widget-Design, beachten Sie jedoch, dass wir keine Probleme mit Änderungen durch benutzerdefiniertes HTML oder CSS beheben können.
1. Wählen Sie im linken Navigationsmenü ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Inhalt**.
2. Auf der *Widgets* Karte auswählen, **Widget bearbeiten**.
3. Unter *Programm-Widgets*, wählen Sie das Widget aus, das Sie bearbeiten möchten.
1. Wählen Sie in der oberen Menüleiste  **\[Klammern]**.
2. Fügen Sie Ihr HTML im Body der Seite hinzu oder bearbeiten Sie es.
3. CSS kann auf drei Arten hinzugefügt werden:
* Durch Importieren eines externen CSS-Stylesheets
* Am oberen Rand der Seite in einem `
```
* Inline, um einen Stil auf ein bestimmtes HTML-Element anzuwenden:
```programlisting
Erhalten Sie eine Belohnung, wenn Ihr Freund unser Produkt nutzt
```
4. Wählen Sie  **\[Pinsel]** um Ihre Aktualisierungen in der Vorschau anzuzeigen.
5. Wählen Sie **Entwurf speichern** um zu speichern, oder **Veröffentlichen** um Änderungen live zu schalten.
{% endtab %}
{% endtabs %}
#### **Komponenten mit CSS-Parts bearbeiten**
Einige integrierte Komponenten in Ihrem Widget oder Ihrer Microsite lassen sich im visuellen Editor nicht vollständig stylen. In bestimmten Fällen können Sie ihr Erscheinungsbild mit CSS-Parts überschreiben, die eine detailliertere Steuerung ermöglichen.
Wenn Sie erweiterte Stiländerungen vornehmen möchten, kann das impact.com-Team Sie darüber beraten, was möglich ist, und alle relevanten CSS-Parts-Selektoren mitteilen. Wenn Sie Komponenten mit CSS-Parts bearbeiten möchten, wenden Sie sich an Ihr Advocate-Implementierungs- oder Post-Launch-Supportteam.
---
# 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/edit-your-widget-or-microsite-html-and-css-for-advocate.md?ask=&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.
