> 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).

# Den HTML- und CSS-Code 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 sie besser an das Erscheinungsbild Ihrer Marke anzupassen. Mit dem integrierten HTML-Editor von Advocate können Sie Struktur und Styling hinzufügen und sogar bestimmte Standardkomponenten für eine tiefergehende Anpassung überschreiben.

{% hint style="info" %}
**Hinweis**: Das Bearbeiten von benutzerdefiniertem HTML/CSS ist nur für bestimmte Advocate-Editionen verfügbar. Wenden Sie sich an [den Support](mailto:saasquatch-support@impact.com) um Ihr Konto zu upgraden und auf diese Funktion zuzugreifen.
{% endhint %}

#### Warum benutzerdefiniertes HTML oder CSS verwenden?

Benutzerdefiniertes HTML und Inline-CSS ermöglichen Ihnen Folgendes:

* Die Markenrichtlinien Ihres Unternehmens genauer einhalten
* Layout und Abstände neu formatieren
* Stile anwenden, die über das hinausgehen, was im Standard-Editor verfügbar ist
* Das Styling ausgewählter Widget- oder Microsite-Komponenten ü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 Ihnen, mit Ihrem Advocate-Implementierungs- oder Post-Launch-Team zusammenzuarbeiten.
{% endhint %}

#### Das HTML oder CSS bearbeiten

{% tabs %}
{% tab title="Ihre Microsite bearbeiten" %}
Sie können das HTML oder CSS bearbeiten, um weitere Anpassungen an Ihrer Microsite mit dem integrierten HTML-Editor vorzunehmen. Während der HTML-Editor zusätzliche Flexibilität bei der Gestaltung der Microsite bietet, 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. 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 ![](/files/df8a01682d771d85812c5332c635482d17e86311)![](/files/2c7ff88f52809439196fc5c42a874190068460c8) **\[Codeansicht]** in der oberen Menüleiste.
5. Fügen Sie bei Bedarf HTML und CSS hinzu oder ändern Sie sie.
6. CSS kann auf drei Arten hinzugefügt werden:

   * Durch Importieren eines externen CSS-Stylesheets
   * Oben auf der Seite in einem `<style>` Tag:

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * Inline, um einen Stil auf ein bestimmtes HTML-Element anzuwenden:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Erhalte eine Belohnung, wenn dein Freund unser Produkt nutzt</h3> 
   ```
7. Wählen Sie ![](/files/55dcaff95bf8209bd99ad95245000f78953ddb7f) **\[Pinsel]** um Ihre Aktualisierungen in der Vorschau anzuzeigen.
8. Wählen Sie **Entwurf speichern** zum Speichern oder **Veröffentlichen** um Änderungen live zu schalten.
   {% endtab %}

{% tab title="Ihr Widget bearbeiten" %}
Sie können das HTML oder CSS bearbeiten, um weitere Anpassungen an Ihrem Widget mit dem integrierten HTML-Editor vorzunehmen. Während der HTML-Editor zusätzliche Flexibilität bei der Widget-Gestaltung bietet, 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.

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

1. Wählen Sie in der oberen Menüleiste ![](/files/df8a01682d771d85812c5332c635482d17e86311)![](/files/2c7ff88f52809439196fc5c42a874190068460c8) **\[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
   * Oben auf der Seite in einem `<style>` Tag:

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * Inline, um einen Stil auf ein bestimmtes HTML-Element anzuwenden:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Erhalte eine Belohnung, wenn dein Freund unser Produkt nutzt</h3> 
   ```
4. Wählen Sie ![](/files/55dcaff95bf8209bd99ad95245000f78953ddb7f) **\[Pinsel]** um Ihre Aktualisierungen in der Vorschau anzuzeigen.
5. Wählen Sie **Entwurf speichern** zum Speichern oder **Veröffentlichen** um Änderungen live zu schalten.
   {% endtab %}
   {% endtabs %}

#### **Komponenten mithilfe von CSS Parts bearbeiten**

Einige integrierte Komponenten in Ihrem Widget oder Ihrer Microsite können über den visuellen Editor nicht vollständig gestaltet werden. In bestimmten Fällen können Sie ihr Erscheinungsbild mithilfe von CSS Parts überschreiben, die eine feinere Steuerung ermöglichen.

Wenn Sie fortgeschrittene Stilaktualisierungen vornehmen möchten, kann Ihnen das impact.com-Team dazu beraten, was möglich ist, und Ihnen gegebenenfalls relevante CSS-Part-Selektoren mitteilen. Wenn Sie Komponenten mit CSS Parts bearbeiten möchten, 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=<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.