> 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/fr/what-would-you-like-to-learn-about/platform-features/reach-out-to-partners/generate-leads/create-a-custom-widget.md).

# Créer un widget personnalisé

Développez des outils dynamiques qui permettent à vos partenaires de promouvoir votre marque. Les widgets personnalisés vous permettent d’intégrer directement dans l’interface impact.com des outils ou des pages hébergés à l’extérieur via une iframe. Utilisez ce guide pour créer et configurer un widget de contenu personnalisé qui fournit des ressources personnalisées et une expérience de marque cohérente à vos partenaires.

{% stepper %}
{% step %}

## Accédez au créateur de widget personnalisé

1. Dans le menu de navigation de gauche, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage]** → **Contenu** → [**Widgets**](https://app.impact.com/secure/advertiser/engage/ads/list-widget-tool-flow.ihtml)**.**
2. Dans le coin supérieur droit, sélectionnez **Créer un widget** → **Personnalisé**.
   {% endstep %}

{% step %}

## Saisissez les détails du widget

1. Saisissez un **Nom** du widget personnalisé.
2. Vous pouvez également saisir une **Description** pour le widget personnalisé.
3. Vous pouvez également saisir une **Libellé** pour le widget personnalisé.
4. Si nécessaire, ![](https://57104473-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) **\[Activer] Restreindre l'accès des partenaires** pour définir les partenaires et groupes individuels qui doivent avoir accès au widget.
   * **Partenaires :** Saisissez le nom des partenaires qui peuvent accéder au widget personnalisé.
   * **Groupes :** Saisissez le nom des groupes qui peuvent accéder au widget personnalisé.
     {% endstep %}

{% step %}

## Configurez le widget

1. Sélectionnez le comportement du widget parmi les options d'affichage :
   * **Ouvrir dans un nouvel onglet :** Ouvre l'URL hébergée dans un onglet séparé.
   * **Intégrer dans impact.com :** Affiche le widget directement dans l'interface de la plateforme.
2. Vous pouvez également, dans la **Image d'aperçu** section, sélectionnez **Choisir un fichier** pour téléverser une miniature. Assurez-vous que le fichier est au format GIF, JPG ou PNG et qu'il ne dépasse pas 512 Ko.
3. Dans le **URL du widget** champ, saisissez l'adresse Web où votre widget est hébergé.
4. Dans le ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[menu déroulant]**, sélectionnez le protocole (par ex., https\://) qui correspond à la sécurité de votre site.
5. Vous pouvez également sélectionner ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6282f271b7521383385339243690b303086736d9%2F3b5a585dd2895bdf1c30d1236c72ba590dddd18717863b27074c8d313d05ae20.svg?alt=media) **\[Ajouter] Insérer des champs dynamiques** pour développer la liste des jetons.
6. Localisez le jeton que vous souhaitez utiliser et sélectionnez **Insérer**. La plateforme ajoutera automatiquement le jeton (par ex., {irpid}) à votre **URL du widget**. Consultez la [Jetons de champ dynamique](#dynamic-field-tokens) section ci-dessous pour une description de chaque jeton.
   {% endstep %}

{% step %}

## Mettre à jour les paramètres avancés

Dans le **Langue** ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[menu déroulant]**, sélectionnez la langue dans laquelle ce widget sera affiché.
{% endstep %}

{% step %}

## Finalisez le widget personnalisé

Sélectionnez **Créer** pour enregistrer votre widget. Les partenaires peuvent trouver ce widget dans *Widgets de contenu*.
{% endstep %}
{% endstepper %}

<details>

<summary>Jetons de champ dynamique</summary>

| Jeton                          | Description                                                   |
| ------------------------------ | ------------------------------------------------------------- |
| `{click_url_encoded}`          | URL de clic encodée                                           |
| `{click_url}`                  | URL de clic non encodée                                       |
| `{irimpurl}`                   | Notre URL d'impression                                        |
| `{irpid}`                      | ID du partenaire                                              |
| `{subid1}`                     | Sous-ID partenaire 1                                          |
| `{subid2}`                     | Sous-ID partenaire 2                                          |
| `{subid3}`                     | Sous-ID partenaire 3                                          |
| `{sharedId}`                   | ID partagé                                                    |
| `{iradid}`                     | ID de l'annonce                                               |
| `{ircid}`                      | ID du programme                                               |
| `{click_url_encoded_deeplink}` | URL de clic encodée avec le paramètre de lien profond ajouté. |

</details>

## Exemples pratiques

{% hint style="info" %}
**À propos de ces exemples :** Les widgets personnalisés sont créés et hébergés par vous — impact.com se contente d'intégrer la page hébergée et d'y injecter les données partenaires en direct. Copiez les implémentations de référence ci-dessous, hébergez-les sur votre propre domaine et adaptez-les. Les partenaires ne modifient jamais de code ; ils ouvrent simplement le widget terminé depuis *Widgets de contenu*.
{% endhint %}

### Comment les jetons de champ dynamique atteignent votre widget

Lorsque vous ajoutez un jeton de champ dynamique à la **URL du widget**, impact.com le remplace par les valeurs réelles de chaque partenaire avant de charger votre page. Votre page lit ces valeurs dans sa chaîne de requête et les utilise pour créer des liens de suivi.

Par exemple, si vous définissez **URL du widget** sur `https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}`, impact.com charge ce qui suit pour un partenaire dont l'ID est `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" %}
Passez l'URL de clic sous la forme `{click_url_encoded}`, pas `{click_url}` — une URL de clic brute contient ses propres `?` et `&` caractères, qui cassent votre chaîne de requête. Décodez-la dans votre page avant utilisation.
{% endhint %}

### Exemple 1 : widget de recherche

Permet à un partenaire de rechercher dans votre catalogue et de copier un lien de suivi pour n'importe quel produit sans quitter impact.com. Vous hébergez la page de recherche ; impact.com transmet l'ID du partenaire et l'URL de clic afin que chaque lien de résultat soit attribué à ce partenaire.

1. Hébergez la page de recherche sur un domaine que vous contrôlez, en HTTPS (par ex., `https://widgets.yourbrand.com/search`). Remplacez le tableau de démonstration `CATALOG` par un appel à votre propre catalogue de produits ou à votre API de recherche.
2. Créez le widget personnalisé en suivant les cinq étapes ci-dessus. Dans **Configurez le widget**, définissez **URL du widget** sur votre page avec les `{irpid}` et `{click_url_encoded}` jetons (indiqués ci-dessous).
3. Testez avec **Ouvrir dans un nouvel onglet**, effectuez une recherche en tant que partenaire de test et confirmez que les liens de résultat renvoient vers votre site et enregistrent un clic. Ensuite, basculez le widget sur **Intégrer dans impact.com**.

**URL du widget**

{% 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>Recherche de produits</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="Rechercher des produits..." />
    <button id="go">Rechercher</button>
  </div>
  <div id="results"></div>

  <script>
    // 1. Lisez les valeurs qu'impact.com a injectées dans l'URL du widget.
    var params    = new URLSearchParams(window.location.search);
    var partnerId = params.get('partner') || '';
    var clickUrl  = decodeURIComponent(params.get('clickurl') || '');

    // 2. Remplacez ce tableau de démonstration par un appel à votre propre catalogue de produits / API de recherche.
    var CATALOG = [
      { name: 'Chaussure de trail running',   url: 'https://www.yourbrand.com/products/trail-runner' },
      { name: 'Veste imperméable',   url: 'https://www.yourbrand.com/products/waterproof-jacket' },
      { name: 'Chaussettes de randonnée en mérinos', url: 'https://www.yourbrand.com/products/merino-socks' }
    ];

    // 3. Créez un lien profond traçable : l'URL de clic du partenaire + la page de destination.
    //    Confirmez le format exact de votre programme de lien profond avant publication (voir « Avant de publier »).
    function buildTrackingLink(destinationUrl) {
      if (!clickUrl) return destinationUrl;            // solution de repli : aucun suivi si le jeton est manquant
      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>Aucun produit trouvé.</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 + '">Copier le lien</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>

### Exemple 2 : annonce média riche dynamique (widget de chat flottant)

Une annonce média riche dynamique est tout élément HTML interactif que vous hébergez et intégrez comme widget. Dans cet exemple, vous allez créer une bulle de chat flottante qui se déploie en message promotionnel et en appel à l'action. Lorsque le visiteur sélectionne le bouton, il est redirigé via l'URL de clic du partenaire, de sorte que le clic soit suivi et attribué.

1. Hébergez la page sur un domaine que vous contrôlez, en HTTPS (par ex., `https://widgets.yourbrand.com/chat`). Personnalisez le texte, les couleurs et l'appel à l'action pour qu'ils correspondent à votre campagne.
2. Créez le widget personnalisé en suivant les cinq étapes ci-dessus, en définissant le **URL du widget** avec le `{click_url_encoded}` jeton (indiqué ci-dessous).
3. Testez avec **Ouvrir dans un nouvel onglet** en tant que partenaire de test, confirmez que l'appel à l'action ouvre votre site et enregistre un clic, puis basculez le widget sur **Intégrer dans impact.com**.

**URL du widget**

{% code overflow="wrap" %}

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

{% endcode %}

Pour envoyer les visiteurs vers une page spécifique au lieu de votre page d'atterrissage par défaut, utilisez le `{click_url_encoded_deeplink}` jeton à la place de `{click_url_encoded}`, ou ajoutez la destination dans votre propre code comme indiqué dans l'exemple 1.

<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>Assistant</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>Bonjour ! Vous cherchez nos dernières offres ? Appuyez ci-dessous pour acheter et économiser.</p>
    <button id="cta">Acheter maintenant</button>
  </div>

  <script>
    // impact.com injecte l'URL de clic du partenaire dans cette page.
    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;
      // Ouvrez dans un nouvel onglet afin que le clic soit suivi et attribué au partenaire.
      window.open(clickUrl, '_blank', 'noopener');
    });
  </script>
</body>
</html>
```

</details>

## Avant de publier

* Hébergez-le vous-même, en HTTPS. impact.com intègre votre page via une iframe ou l'ouvre dans un nouvel onglet — la plateforme n'héberge pas votre code. En mode intégré, votre page s'exécute dans une iframe, donc ouvrez les liens de destination avec `target="_blank"` ou `window.open(...)` plutôt que de naviguer dans la fenêtre parente.
* Codez l'URL de clic. Passez-la sous la forme `{click_url_encoded}` et décodez-la dans votre page afin que ses propres `?` et `&` caractères ne cassent pas votre chaîne de requête.
* Confirmez le format de votre lien profond avec votre ingénieur d'intégration impact.com, et assurez-vous que les destinations sont couvertes par vos domaines autorisés pour les liens profonds.

## Ressources supplémentaires

* [Créer et partager des liens de suivi avec les partenaires](/brand/fr/what-would-you-like-to-learn-about/platform-features/reach-out-to-partners/generate-leads/create-and-share-tracking-links-with-partners.md) — Comment créer des liens de suivi et les partager avec vos partenaires.
* [Explication des paramètres des liens de suivi](/brand/fr/what-would-you-like-to-learn-about/platform-features/tracking/tracking-explained/tracking-link-parameters-explained.md) — La structure d'un lien de suivi et les paramètres que vous pouvez ajouter, comme les sous-ID, l'ID partagé et les liens profonds.
* [Configurer les domaines autorisés pour les liens profonds](/brand/fr/what-would-you-like-to-learn-about/account-administration/program-settings/tracking-settings/set-up-permitted-domains-for-deep-linking.md) — Autorisez les domaines de destination vers lesquels les partenaires sont autorisés à créer des liens profonds sur votre site.
* [Introduction aux types d'assets](/brand/fr/what-would-you-like-to-learn-about/platform-features/ads/create-ads/introduction-to-asset-types.md) — Les types d'assets que vous pouvez proposer aux partenaires, y compris l'endroit où se situe le widget personnalisé.
* [De Rakuten Advertising à impact.com : étapes clés de la transition](/brand/fr/what-would-you-like-to-learn-about/getting-started/rakuten-advertising-to-impact.com-key-transition-steps.md) — Ce qui change lorsque vous migrez un programme de Rakuten Advertising vers impact.com.


---

# 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/fr/what-would-you-like-to-learn-about/platform-features/reach-out-to-partners/generate-leads/create-a-custom-widget.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.