> 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 Erscheinungsbild Ihrer Marke übereinzustimmen. Mit dem integrierten HTML-Editor von Advocate können Sie Struktur und Styling hinzufügen und sogar bestimmte Standardkomponenten für eine tiefere Anpassung überschreiben.
{% hint style="info" %}
**Hinweis**: Die Bearbeitung von benutzerdefiniertem HTML/CSS ist nur für bestimmte Advocate-Editionen verfügbar. Kontaktieren Sie [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 einhalten
* Layout und Abstände neu formatieren
* Stile anwenden, die über das im Standard-Editor verfügbare hinausgehen
* Ausgewählte Widget- oder Microsite-Komponentengestaltung überschreiben
{% hint style="warning" %}
**Wichtig**: Unser Support-Team bietet nur eingeschränkte Hilfe bei Problemen, die durch benutzerdefinierten Code verursacht wurden. Wenn Sie unsicher sind, empfehlen wir die Zusammenarbeit mit Ihrem Advocate-Implementierungs- oder Post-Launch-Team.
{% 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. Während der HTML-Editor zusätzliche Flexibilität beim Microsite-Design ermöglicht, beachten Sie bitte, dass wir keine Fehlerbehebung für Anpassungen mit benutzerdefiniertem HTML oder CSS vornehmen 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 Microsite-Karte wählen Sie **Inhalt bearbeiten**.
3. Wählen Sie auf der Registerkarte „Microsite“ das Layout oder die Seite aus, deren Code Sie bearbeiten möchten.
4. Wählen Sie  **\[Codeansicht]** 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 Anfang der Seite in einem `
```
* Inline, um einen Stil auf ein bestimmtes HTML-Element anzuwenden:
```programlisting
Erhalten Sie eine Belohnung, wenn Ihr Freund unser Produkt verwendet
```
7. Wählen Sie  **\[Pinsel]** um Ihre Änderungen in der Vorschau anzuzeigen.
8. Wählen Sie **Entwurf speichern** zum Speichern oder **Veröffentlichen** um Änderungen live zu schalten.
{% endtab %}
{% tab title="Widget bearbeiten" %}
Sie können das HTML oder CSS bearbeiten, um mithilfe des integrierten HTML-Editors weitere Anpassungen an Ihrem Widget vorzunehmen. Während der HTML-Editor zusätzliche Flexibilität beim Widget-Design ermöglicht, beachten Sie bitte, dass wir keine Fehlerbehebung für Anpassungen mit benutzerdefiniertem HTML oder CSS vornehmen 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, wählen Sie **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 Anfang der Seite in einem `
```
* Inline, um einen Stil auf ein bestimmtes HTML-Element anzuwenden:
```programlisting
Erhalten Sie eine Belohnung, wenn Ihr Freund unser Produkt verwendet
```
4. Wählen Sie  **\[Pinsel]** um Ihre Änderungen in der Vorschau anzuzeigen.
5. Wählen Sie **Entwurf speichern** zum 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 mit dem visuellen Editor nicht vollständig gestalten. In bestimmten Fällen können Sie ihr Erscheinungsbild mithilfe von CSS Parts überschreiben, was eine feinere Steuerung ermöglicht.
Wenn Sie fortgeschrittene Stilaktualisierungen vornehmen möchten, kann das impact.com-Team Sie darüber beraten, was möglich ist, und Ihnen alle relevanten CSS-Part-Selektoren mitteilen. Wenn Sie daran interessiert sind, Komponenten mit CSS Parts zu bearbeiten, wenden Sie sich an Ihr Advocate-Implementierungs- oder Post-Launch-Support-Team.
---
# 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/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 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.
