# Programm-Widgets anpassen

#### Greifen Sie auf den Widget-Editor zu

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**.
2. Auf der *Widgets* Karte wählen Sie **Widgets bearbeiten.**
3. Wählen Sie im linken Ausklappmenü den Namen des Widgets, das Sie bearbeiten möchten.

   <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%2Fgit-blob-54ffcf92fdcf6527acb6390b421de09f83d5a8f4%2F5d8a0b7afd11abc5f0db04be64b30635a1b0d697f529ce21338b6c8af1fa32df.jpg?alt=media" alt="" width="513"><figcaption></figcaption></figure></div>

#### Passen Sie Ihre Widgets an

{% stepper %}
{% step %}

#### **Schritt 1: Wählen Sie eine Vorlage**

1. Wählen Sie im linken Ausklappmenü unter *Aktuelles Widget*, wählen Sie **Vorlagen**.
2. Wählen **Vorlage anwenden** neben der Vorlage, mit der Sie beginnen möchten.

   <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%2Fgit-blob-23c217eaab5f3d3a6ab40f1fe4282bd44c6ee667%2F225f0149361a6b987d2a69f1c8f8d6e006b237c6fc37f35bb439f5bac468c88a.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**Hinweis:** Wenn Sie eine Vorschau der Vorlage anzeigen möchten, ohne die Änderung zu übernehmen, wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Vorschau]** bevor Sie speichern. Wählen Sie die **Speichern** Schaltfläche nur, wenn Sie bereit sind, die vorgenommenen Änderungen zu übernehmen.
{% endhint %}
{% endstep %}

{% step %}

#### **Schritt 2: Passen Sie den Widget-Inhalt an**

Sie können Komponenten hinzufügen, bearbeiten, verschieben oder entfernen, um den Inhalt zu ändern, den Ihre Kundenadvokaten im Widget sehen.

{% hint style="info" %}
**Hinweis:** Für eine Erklärung der verschiedenen Elemente des Widget-Editors verweisen Sie auf [Übersicht zum Widget-Editor](https://help.impact.com/brand/de/was-mochten-sie-lernen/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview).
{% endhint %}

{% tabs %}
{% tab title="Hinzufügen" %}

1. Auf der rechten Seite der Seite, im *Komponenten* Menü- **Hinzufügen** Register, wählen Sie eine Komponentengruppe.
   * Erfahren Sie mehr über die [verfügbaren Komponenten](https://help.impact.com/brand/de/was-mochten-sie-lernen/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained) und wie sie gruppiert sind.
2. Wählen Sie die passende Komponente.
3. Wählen Sie die blaue **Zu** hinzufügen Schaltfläche an der Stelle, an der die Komponente auf der Leinwand erscheinen soll.

   <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%2Fgit-blob-faf3362b50a4598aeacff4ca831e5dcef8c7ef6e%2F346370cdced07562b504cd2b9bf6bf08b51539060e9551f784f029d4899ffa12.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Bearbeiten" %}
Die Eigenschaften, die Sie bearbeiten können, hängen davon ab, welchen Komponententyp Sie ausgewählt haben. Wenn Sie beispielsweise die *Hero Image* Komponente auswählen, können Sie ein neues Bild auswählen und die Hintergrundfarbe ändern. Wenn Sie ein rein textbasiertes Element wie eine Überschrift auswählen, können Sie Schriftart, Textfarbe und Textinhalt ändern.

1. Wählen Sie die Komponente, die Sie bearbeiten möchten.
2. Verwenden Sie die Optionen im *Komponenten* Menü- **Bearbeiten** Register, um deren Eigenschaften zu ändern.

   * Wenn Sie in eine Textkomponente einen Link einfügen möchten, können Sie [dies tun, indem Sie das HTML des Widgets bearbeiten](https://help.impact.com/brand/de/was-mochten-sie-lernen/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate).

   <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%2Fgit-blob-3e26ab9dbdff4f8e5d3d3e078d965672ade44d45%2F026f0ef0af7421ecfab6535433ea587862ec12c5223e8b393ef1db1228676e1f.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Verschieben" %}

1. Wählen Sie innerhalb der Leinwand die Komponente aus, die Sie verschieben möchten.
2. Wählen ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Verschieben]**.
   * Einige Komponenten können nicht verschoben werden. Die ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Verschieben]** Option erscheint nur, wenn es eine andere gültige Position auf der Leinwand gibt, zu der die Komponente verschoben werden kann.
3. Wählen Sie die blaue **Verschieben zu** Schaltfläche, an die Sie die Komponente platzieren möchten.

   * Anstatt einer Drag-and-Drop-Methode müssen Sie die Schaltfläche auswählen und dann das Ziel auswählen.

   <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%2Fgit-blob-7bd9887e9f359c787f834a8344a181d7bb186dd3%2Faadaf737882c59604dcaa6bbed1857c867a32cad8c3dd8ea7975c047c04e6a3f.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Entfernen" %}

1. Wählen Sie die Komponente, die Sie in der Leinwand entfernen möchten.
2. Wählen ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[Entfernen]**.

   <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%2Fgit-blob-030ab8fb2f678027aa57af859245968daee6f736%2F987319390fa75c5fb85f94d2d6e0a951fbf4511a72dbd91af4e55c8f39317301.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### **Schritt 3: Passen Sie das Erscheinungsbild und das Thema des Widgets an**

**Bilder oder Logos hinzufügen**

1. Wählen Sie rechts aus dem *Komponenten* Menü- **Hinzufügen** Register die **Gemeinsame Komponenten** Kategorie.
2. Wählen Sie entweder:
   * **Overlay Hero Image** (ein Bild mit überlagertem, bearbeitbarem Text)
   * **Bild** (ein einfaches Bild ohne Text darüber)
3. Fügen Sie das Bild zur Leinwand hinzu.
4. Im *Komponentenmenü* **Bearbeiten** Register die **Datei wählen** Button unter der *Bild* Überschrift.

   <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%2Fgit-blob-564558169dbd2a3efe25c902610d7278c257626b%2F47c2ef7ef4780763f8648b19a1a580e43f68104b6205f5de72c51bf8ae9d8a1c.jpg?alt=media" alt="" width="353"><figcaption></figcaption></figure></div>

**Bilder oder Logos ersetzen**

1. Wählen Sie in der Leinwand das Foto aus, das Sie ändern möchten.
2. Im **Bearbeiten** Menü wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[Entfernen]** und dann wählen Sie **Datei wählen** um ein neues Bild erneut hochzuladen.

   <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%2Fgit-blob-30ee95734c8150b1983dea767f0e729e157df91e%2F65602249ec03ef7f267348ae795f32755c8ca109ed253d98bab523b584b27f3e.jpg?alt=media" alt="" width="351"><figcaption></figcaption></figure></div>
3. Laden Sie das Bild mit einer der folgenden Methoden hoch:
   * Ziehen Sie das Bild per Drag & Drop
   * Suchen Sie eine Datei auf Ihrem Computer
   * Im *Webadresse* Registerkarte, fügen Sie die öffentliche URL der Datei ein
4. Wählen **Fertig**.

**Anpassen, welche Freigabe-Schaltflächen angezeigt werden**

Sie können vorhandene Freigabe-Schaltflächen über das **Bearbeiten** Menü bearbeiten.

1. Wählen Sie die Freigabe-Schaltfläche, die Sie auf der Leinwand bearbeiten möchten.
2. Im **Bearbeiten** Register, wählen Sie den Namen der Site oder des Dienstes unter dem *Freigabemedium* Überschrift.

   <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%2Fgit-blob-329fb56148698f747349956ce5d6d95859a7bc3a%2Fcb6384644531cbcceed4a4f72bac70c0883e383f8619f6e03f304e4e281919b2.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

Fügen Sie eine neue Freigabe-Schaltfläche hinzu, indem Sie die **Hinzufügen** Menü bearbeiten.

1. Im **Hinzufügen** Registerkarte verwenden, wählen Sie **Freigabe**.

   <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%2Fgit-blob-e8ffcffaec4bcabee098c5811ceca22f74c38e9e%2F349cee3ff230764af0891ae493ab5b8af34a592711ec5a7b027a3fc5b77a02ef.jpg?alt=media" alt="" width="339"><figcaption></figcaption></figure></div>
2. Wählen Sie die entsprechende Karte.
3. Wählen Sie die blaue **Zu** Schaltfläche, um die Komponente auf der Leinwand zu platzieren.
   {% endstep %}

{% step %}

#### **Schritt 4: Vorschau und speichern**

1. Sehen Sie eine Vorschau, wie das Widget Ihren Teilnehmern angezeigt wird, indem Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Vorschau]** aus der oberen Menüleiste auswählen.
   * Sie können zwischen einer Vorschau der Erfahrung für ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ae8027a26340e35a4d47f2a067cfadc9fc78113f%2F286f2a6c1251052ae82b73cd1c52b622b18f5203ba9cc10fde4d74292ac28d34.png?alt=media) **\[Desktop]**, ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-deeb14b0e398d5dbb2dfb280d3fd7d8e9411b26e%2F74c7be4be7f1d77a3793767c29c5bd878acceacf1d2533055231d5110b12dd61.png?alt=media) **\[Tablet]**, oder ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6156958cf5fc18498276161791a0514d9005d7cf%2F906c40a4da5b9c02a51450974f61a71761acc07baff3052b53f708d5b768a9be.png?alt=media) **\[Mobil]** Benutzer wechseln, indem Sie das jeweilige Gerätesymbol auswählen.
2. Um zur Bearbeitungsoberfläche zurückzukehren, wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Bearbeiten]** aus der oberen Menüleiste auswählen.

   <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%2Fgit-blob-cebcc495d7dcfd7f7e3a77ab7061913c92b9dcf2%2F0138d6f68eff457694e6f8a5120f0165ae55112510f8928f35fc9771e5a97646.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>
3. **Speichern** Ihre Änderungen.

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>Warnung:</strong> Der Widget-Editor speichert Ihre Änderungen nicht automatisch. Klicken Sie <strong>Speichern</strong> häufig, um sicherzustellen, dass Sie Ihre Arbeit nicht verlieren.</p></div>

Wenn Sie auswählen **Speichern**, werden die Änderungen zu Ihrem [Programmentwurf](https://help.impact.com/brand/de/was-mochten-sie-lernen/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate).
{% endstep %}
{% endstepper %}

#### Erweiterte Anpassungsoptionen

Erweiterte Komponenten ermöglichen es Ihnen, bedingte Inhalte einzufügen, die auf der *E-Mail*, *Segment*, oder *Benutzerdefiniertes Feld*. Beispielsweise, wenn Sie eine Bestenliste nur für Teilnehmer anzeigen möchten, die Gold-Abonnenten sind, ermöglicht Ihnen die **bedingte Abschnitt auf Segment** Komponente dies zu tun.

Sie können erweiterte Komponenten aus der **Hinzufügen** Registerkarte hinzufügen. Die Einrichtung erfordert etwas mehr Aufwand, da Sie einen [JSONata-Ausdruck](http://docs.jsonata.org/overview.html) in das *Bedingung* Feld eingeben müssen, das die Logik definiert, wann die Bedingung erfüllt ist. Wenden Sie sich an unser [Support-Team](mailto:saasquatch-support@impact.com) wenn Sie Hilfe benötigen.

#### Erfahren Sie mehr

* [Bearbeiten Sie Ihr Widget- oder Microsite-HTML für Advocate](#access-the-widget-editor-0-0)
* [Installieren Sie benutzerdefinierte NPM-Pakete für Advocate](https://help.impact.com/brand/de/was-mochten-sie-lernen/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate)
