> 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/platform-features/reach-out-to-partners/generate-leads/create-a-custom-widget.md).

# Ein benutzerdefiniertes Widget erstellen

Entwickeln Sie dynamische Tools, die Partner dabei unterstützen, Ihre Marke zu bewerben. Benutzerdefinierte Widgets ermöglichen es Ihnen, extern gehostete Tools oder Seiten über ein iframe direkt in die impact.com-Oberfläche einzubetten. Verwenden Sie diesen Leitfaden, um ein benutzerdefiniertes Content-Widget zu erstellen und zu konfigurieren, das Ihren Partnern personalisierte Ressourcen und ein konsistentes Markenerlebnis bietet.

{% stepper %}
{% step %}

## Auf den Ersteller für benutzerdefinierte Widgets zugreifen

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]** → **Inhalte** → [**Widgets**](https://app.impact.com/secure/advertiser/engage/ads/list-widget-tool-flow.ihtml)**.**
2. Wählen Sie in der oberen rechten Ecke **Widget erstellen** → **Benutzerdefiniert**.
   {% endstep %}

{% step %}

## Widget-Details eingeben

1. Geben Sie einen **Name** des benutzerdefinierten Widgets.
2. Optional können Sie eine **Beschreibung** für das benutzerdefinierte Widget.
3. Optional können Sie eine **Bezeichnung** für das benutzerdefinierte Widget.
4. Falls erforderlich, ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FiZjM1xY8o3v1iR3Zaysd%2FToggle.svg?alt=media\&token=b1550d48-bba9-4e81-8604-bc12370c5caa) **\[Aktivieren] Partnerzugriff einschränken** um einzelne Partner und Gruppen anzugeben, die Zugriff auf das Widget haben sollen.
   * **Partner:** Geben Sie den Namen der Partner ein, die auf das benutzerdefinierte Widget zugreifen können.
   * **Gruppen:** Geben Sie den Namen der Gruppen ein, die auf das benutzerdefinierte Widget zugreifen können.
     {% endstep %}

{% step %}

## Widget konfigurieren

1. Wählen Sie in den Anzeigeoptionen aus, wie sich das Widget verhält:
   * **In neuem Tab öffnen:** Öffnet die gehostete URL in einem separaten Tab.
   * **In impact.com einbetten:** Zeigt das Widget direkt in der Plattformoberfläche an.
2. Optional, unter **Vorschaubild** Abschnitt, wählen Sie **Datei auswählen** um ein Vorschaubild hochzuladen. Stellen Sie sicher, dass die Datei ein GIF, JPG oder PNG ist und 512 KB nicht überschreitet.
3. Im **Widget-URL** geben Sie die Webadresse ein, unter der Ihr Widget gehostet wird.
4. In der ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[Dropdown-Menü]**, wählen Sie das Protokoll (z. B. https\://) aus, das zur Sicherheit Ihrer Website passt.
5. Optional wählen Sie ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6282f271b7521383385339243690b303086736d9%2F3b5a585dd2895bdf1c30d1236c72ba590dddd18717863b27074c8d313d05ae20.svg?alt=media) **\[Hinzufügen] Dynamische Felder einfügen** um die Token-Liste zu erweitern.
6. Suchen Sie den Token, den Sie verwenden möchten, und wählen Sie **Einfügen**. Die Plattform hängt den Token (z. B. {irpid}) automatisch an Ihre **Widget-URL**. Lesen Sie den [Token für dynamische Felder](#dynamic-field-tokens) unten für eine Beschreibung jedes Tokens.
   {% endstep %}

{% step %}

## Erweiterte Einstellungen aktualisieren

In der **Sprache** ![](https://1698965099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[Dropdown-Menü]**, wählen Sie die Sprache aus, in der dieses Widget angezeigt wird.
{% endstep %}

{% step %}

## Benutzerdefiniertes Widget abschließen

Wählen Sie **Erstellen** um Ihr Widget zu speichern. Partner finden dieses Widget unter *Content-Widgets*.
{% endstep %}
{% endstepper %}

<details>

<summary>Token für dynamische Felder</summary>

| Token                          | Beschreibung                                            |
| ------------------------------ | ------------------------------------------------------- |
| `{click_url_encoded}`          | Kodierte Klick-URL                                      |
| `{click_url}`                  | Nicht kodierte Klick-URL                                |
| `{irimpurl}`                   | Unsere Impression-URL                                   |
| `{irpid}`                      | Partner-ID                                              |
| `{subid1}`                     | Partner-Sub-ID 1                                        |
| `{subid2}`                     | Partner-Sub-ID 2                                        |
| `{subid3}`                     | Partner-Sub-ID 3                                        |
| `{sharedId}`                   | Geteilte ID                                             |
| `{iradid}`                     | Anzeige-ID                                              |
| `{ircid}`                      | Programm-ID                                             |
| `{click_url_encoded_deeplink}` | Kodierte Klick-URL mit angehängtem Deep-Link-Parameter. |

</details>

## Praxisbeispiele

{% hint style="info" %}
**Zu diesen Beispielen:** Benutzerdefinierte Widgets werden von Ihnen erstellt und gehostet — impact.com bettet nur die gehostete Seite ein und fügt Live-Partnerdaten ein. Kopieren Sie die untenstehenden Referenzimplementierungen, hosten Sie sie auf Ihrer eigenen Domain und passen Sie sie an. Partner bearbeiten niemals Code; sie öffnen einfach das fertige Widget aus *Content-Widgets*.
{% endhint %}

### Wie dynamische Feld-Token in Ihr Widget gelangen

Wenn Sie einen dynamischen Feld-Token zu dem **Widget-URL**, ersetzt impact.com ihn vor dem Laden Ihrer Seite durch die tatsächlichen Werte jedes Partners. Ihre Seite liest diese Werte aus ihrer Query-String und verwendet sie, um nachverfolgbare Links zu erstellen.

Wenn Sie beispielsweise die **Widget-URL** um `https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}`, lädt impact.com für einen Partner, dessen ID `123456`:

{% code overflow="wrap" %}

```
https://widgets.yourbrand.com/search?partner=123456&clickurl=https%3A%2F%2Facme.sjv.io%2Fc%2F123456%2F789012%2F3456
```

{% endcode %}

{% hint style="warning" %}
Übergeben Sie die Klick-URL als `{click_url_encoded}`, nicht `{click_url}` — eine rohe Klick-URL enthält ihre eigenen `?` und `&` Zeichen, die Ihren Query-String beschädigen. Dekodieren Sie sie auf Ihrer Seite vor der Verwendung.
{% endhint %}

### Beispiel 1: Such-Widget

Ermöglicht es einem Partner, Ihren Katalog zu durchsuchen und einen nachverfolgbaren Link für jedes Produkt zu kopieren, ohne impact.com zu verlassen. Sie hosten die Suchseite; impact.com übergibt die Partner-ID und die Klick-URL, sodass jeder Ergebnislink diesem Partner zugeordnet wird.

1. Hosten Sie die Suchseite auf einer Domain, die Sie kontrollieren, über HTTPS (z. B., `https://widgets.yourbrand.com/search`). Ersetzen Sie das Demo- `CATALOG` Array durch einen Aufruf Ihres eigenen Produktkatalogs oder Ihrer Such-API.
2. Erstellen Sie das benutzerdefinierte Widget anhand der fünf obigen Schritte. In **Widget konfigurieren**, setzen Sie die **Widget-URL** zu Ihrer Seite mit den `{irpid}` und `{click_url_encoded}` Token (unten dargestellt).
3. Testen Sie mit **In neuem Tab öffnen**, führen Sie eine Suche als Testpartner aus und bestätigen Sie, dass Ergebnislinks auf Ihre Website verweisen und einen Klick erfassen. Wechseln Sie das Widget dann zu **In impact.com einbetten**.

**Widget-URL**

{% code overflow="wrap" %}

```
https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}
```

{% endcode %}

<details>

<summary>search-widget.html</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Produktsuche</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 16px; }
    .search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
    .search-bar input { flex: 1; padding: 10px; font-size: 16px; }
    .search-bar button { padding: 10px 16px; font-size: 16px; cursor: pointer; }
    .result { padding: 12px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 8px; }
    .result a { text-decoration: none; font-weight: bold; }
    .copy { margin-left: 8px; font-size: 13px; color: #2b6cb0; cursor: pointer; }
  </style>
</head>
<body>
  <div class="search-bar">
    <input id="q" type="text" placeholder="Produkte suchen..." />
    <button id="go">Suchen</button>
  </div>
  <div id="results"></div>

  <script>
    // 1. Lesen Sie die Werte, die impact.com in die Widget-URL eingefügt hat.
    var params    = new URLSearchParams(window.location.search);
    var partnerId = params.get('partner') || '';
    var clickUrl  = decodeURIComponent(params.get('clickurl') || '');

    // 2. Ersetzen Sie dieses Demo-Array durch einen Aufruf Ihres eigenen Produktkatalogs oder Ihrer Such-API.
    var CATALOG = [
      { name: 'Trail Runner Shoe',   url: 'https://www.yourbrand.com/products/trail-runner' },
      { name: 'Waterproof Jacket',   url: 'https://www.yourbrand.com/products/waterproof-jacket' },
      { name: 'Merino Hiking Socks', url: 'https://www.yourbrand.com/products/merino-socks' }
    ];

    // 3. Erstellen Sie einen nachverfolgbaren Deep Link: die Klick-URL des Partners + die Zielseite.
    //    Bestätigen Sie vor der Veröffentlichung das genaue Deep-Link-Format Ihres Programms (siehe „Bevor Sie veröffentlichen“).
    function buildTrackingLink(destinationUrl) {
      if (!clickUrl) return destinationUrl;            // Fallback: keine Nachverfolgung, wenn der Token fehlt
      return clickUrl + encodeURIComponent(destinationUrl);
    }

    function search() {
      var term = document.getElementById('q').value.toLowerCase();
      var matches = CATALOG.filter(function (p) {
        return p.name.toLowerCase().indexOf(term) !== -1;
      });
      var container = document.getElementById('results');
      container.innerHTML = matches.length ? '' : '<p>Keine Produkte gefunden.</p>';
      matches.forEach(function (p) {
        var link = buildTrackingLink(p.url);
        var row = document.createElement('div');
        row.className = 'result';
        row.innerHTML =
          '<a href="' + link + '" target="_blank" rel="noopener">' + p.name + '</a>' +
          '<span class="copy" data-link="' + link + '">Link kopieren</span>';
        container.appendChild(row);
      });
    }

    document.getElementById('go').addEventListener('click', search);
    document.getElementById('q').addEventListener('keyup', function (e) {
      if (e.key === 'Enter') search();
    });
    document.addEventListener('click', function (e) {
      if (e.target.classList.contains('copy')) {
        navigator.clipboard.writeText(e.target.getAttribute('data-link'));
      }
    });
  </script>
</body>
</html>
```

</details>

### Beispiel 2: Dynamische Rich-Media-Anzeige (schwebendes Chat-Widget)

Eine dynamische Rich-Media-Anzeige ist jedes interaktive HTML-Asset, das Sie hosten und als Widget einbetten. In diesem Beispiel erstellen Sie eine schwebende Chat-Sprechblase, die sich zu einer Promo-Nachricht und einem Call-to-Action erweitert. Wenn der Besucher die Schaltfläche auswählt, wird er über die Klick-URL des Partners weitergeleitet, sodass der Klick erfasst und zugeordnet wird.

1. Hosten Sie die Seite auf einer Domain, die Sie kontrollieren, über HTTPS (z. B., `https://widgets.yourbrand.com/chat`). Passen Sie den Text, die Farben und den Call-to-Action an Ihre Kampagne an.
2. Erstellen Sie das benutzerdefinierte Widget anhand der fünf obigen Schritte und setzen Sie dabei die **Widget-URL** mit dem `{click_url_encoded}` Token (unten dargestellt).
3. Testen Sie mit **In neuem Tab öffnen** Als Testpartner bestätigen Sie, dass der Call-to-Action Ihre Website öffnet und einen Klick erfasst, und wechseln Sie das Widget dann zu **In impact.com einbetten**.

**Widget-URL**

{% code overflow="wrap" %}

```
https://widgets.yourbrand.com/chat?clickurl={click_url_encoded}
```

{% endcode %}

Wenn Sie Besucher statt auf Ihre Standard-Landingpage auf eine bestimmte Seite senden möchten, verwenden Sie den `{click_url_encoded_deeplink}` Token anstelle von `{click_url_encoded}`, oder hängen Sie das Ziel in Ihrem eigenen Code an, wie in Beispiel 1 gezeigt.

<details>

<summary>chat-widget.html</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Assistent</title>
  <style>
    html, body { margin: 0; height: 100%; background: transparent; font-family: Arial, sans-serif; }
    #bubble {
      position: fixed; bottom: 20px; right: 20px;
      width: 60px; height: 60px; border-radius: 50%;
      background: #2b6cb0; color: #fff; font-size: 26px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25);
    }
    #panel {
      position: fixed; bottom: 90px; right: 20px; width: 260px;
      background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2);
      padding: 16px; display: none;
    }
    #panel.open { display: block; }
    #panel p { margin: 0 0 12px; font-size: 14px; color: #333; }
    #cta {
      display: block; width: 100%; padding: 10px; border: none; border-radius: 6px;
      background: #2b6cb0; color: #fff; font-size: 15px; cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="bubble">&#128172;</div>
  <div id="panel">
    <p>Hallo! Suchen Sie nach unseren neuesten Angeboten? Tippen Sie unten, um zu shoppen und zu sparen.</p>
    <button id="cta">Jetzt shoppen</button>
  </div>

  <script>
    // impact.com fügt die Klick-URL des Partners in diese Seite ein.
    var params   = new URLSearchParams(window.location.search);
    var clickUrl = decodeURIComponent(params.get('clickurl') || '');

    var bubble = document.getElementById('bubble');
    var panel  = document.getElementById('panel');
    bubble.addEventListener('click', function () {
      panel.classList.toggle('open');
    });

    document.getElementById('cta').addEventListener('click', function () {
      if (!clickUrl) return;
      // Öffnen Sie es in einem neuen Tab, damit der Klick erfasst und dem Partner zugeordnet wird.
      window.open(clickUrl, '_blank', 'noopener');
    });
  </script>
</body>
</html>
```

</details>

## Bevor Sie veröffentlichen

* Hosten Sie es selbst, über HTTPS. impact.com bettet Ihre Seite per iframe ein oder öffnet sie in einem neuen Tab — es hostet Ihren Code nicht. Im eingebetteten Modus läuft Ihre Seite in einem iframe, öffnen Sie Ziel-Links daher mit `target="_blank"` oder `window.open(...)` statt das übergeordnete Fenster zu navigieren.
* Kodieren Sie die Klick-URL. Übergeben Sie sie als `{click_url_encoded}` und dekodieren Sie sie auf Ihrer Seite, damit ihre eigenen `?` und `&` Zeichen Ihren Query-String nicht beschädigen.
* Bestätigen Sie das Deep-Link-Format mit Ihrem impact.com Integration Engineer und stellen Sie sicher, dass Ziele durch Ihre zulässigen Domains für Deep Linking abgedeckt sind.

## Zusätzliche Ressourcen

* [Tracking-Links mit Partnern erstellen und teilen](/brand/de/what-would-you-like-to-learn-about/platform-features/reach-out-to-partners/generate-leads/create-and-share-tracking-links-with-partners.md) — So erstellen Sie Tracking-Links und teilen sie mit Ihren Partnern.
* [Tracking-Link-Parameter erklärt](/brand/de/what-would-you-like-to-learn-about/platform-features/tracking/tracking-explained/tracking-link-parameters-explained.md) — Die Struktur eines Tracking-Links und die Parameter, die Sie hinzufügen können, z. B. Sub-IDs, geteilte ID und Deep Links.
* [Zulässige Domains für Deep Linking einrichten](/brand/de/what-would-you-like-to-learn-about/account-administration/program-settings/tracking-settings/set-up-permitted-domains-for-deep-linking.md) — Autorisieren Sie die Ziel-Domains, zu denen Partner auf Ihrer Website per Deep Link verlinken dürfen.
* [Einführung in Asset-Typen](/brand/de/what-would-you-like-to-learn-about/platform-features/ads/create-ads/introduction-to-asset-types.md) — Die Asset-Typen, die Sie Partnern anbieten können, einschließlich der Position des benutzerdefinierten Widgets.
* [Rakuten Advertising zu impact.com: Wichtige Migrationsschritte](/brand/de/what-would-you-like-to-learn-about/getting-started/rakuten-advertising-to-impact.com-key-transition-steps.md) — Was sich ändert, wenn Sie ein Programm von Rakuten Advertising zu impact.com migrieren.


---

# 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/platform-features/reach-out-to-partners/generate-leads/create-a-custom-widget.md?ask=<question>&goal=<user_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.