# 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 zu Ihrem Markenauftritt zu passen. Mithilfe des integrierten HTML-Editors von Advocate können Sie Struktur und Styling hinzufügen und sogar bestimmte Standardkomponenten überschreiben, um tiefere Anpassungen vorzunehmen.

{% 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 Folgendes:

* Die Markenrichtlinien Ihres Unternehmens genauer einhalten
* Layout und Abstände neu formatieren
* Stile anwenden, die über das im Standard-Editor Verfügbare hinausgehen
* Das Styling ausgewählter Widget- oder Microsite-Komponenten überschreiben

{% hint style="warning" %}
**Wichtig**: Unser Support-Team bietet nur begrenzte 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 mithilfe des integrierten HTML-Editors vorzunehmen. Während der HTML-Editor zusätzliche Flexibilität beim Design der Microsite bietet, beachten Sie bitte, dass wir keine Fehlerbehebung für Anpassungen mit benutzerdefiniertem HTML oder CSS durchführen 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 auf der Registerkarte „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 aus.
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 `<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;">Erhalten Sie eine Belohnung, wenn Ihr Freund unser Produkt verwendet</h3> 
   ```
7. Wählen Sie ![](/files/55dcaff95bf8209bd99ad95245000f78953ddb7f) **\[Pinsel]** um Ihre Aktualisierungen in der Vorschau anzuzeigen.
8. Wählen Sie **Entwurf speichern** 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. Während der HTML-Editor zusätzliche Flexibilität beim Widget-Design bietet, beachten Sie bitte, dass wir keine Fehlerbehebung für Anpassungen mit benutzerdefiniertem HTML oder CSS durchführen 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/01985df8949ef108b2c5dbe9afd66f0c7131fa49" alt=""><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
   * Am Anfang 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;">Erhalten Sie eine Belohnung, wenn Ihr Freund unser Produkt verwendet</h3> 
   ```
4. Wählen Sie ![](/files/55dcaff95bf8209bd99ad95245000f78953ddb7f) **\[Pinsel]** um Ihre Aktualisierungen in der Vorschau anzuzeigen.
5. Wählen Sie **Entwurf speichern** zu 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 lassen sich im visuellen Editor nicht vollständig gestalten. In bestimmten Fällen können Sie ihr Erscheinungsbild mithilfe von CSS Parts überschreiben, die eine feinere Steuerung ermöglichen.

Wenn Sie erweiterte Stiländerungen vornehmen möchten, kann das impact.com-Team Sie dazu beraten, was möglich ist, und Ihnen alle relevanten CSS-Part-Selektoren mitteilen. Wenn Sie Komponenten mithilfe von CSS Parts bearbeiten möchten, wenden Sie sich an Ihr Advocate-Implementierungs- oder Post-Launch-Support-Team.


---

# Agent Instructions: 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:

```
GET https://help.impact.com/brand/de/woruber-mochten-sie-mehr-erfahren/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.