Créer un widget personnalisé

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

1

Accéder au créateur de widget personnalisé

1. Dans le menu de navigation de gauche, sélectionnez [Engage] → Contenu → Widgets.

2. Dans le coin supérieur droit, sélectionnez Créer le widget → Personnalisé.

2

Saisissez les détails du widget

1. Entrez un Nom du widget personnalisé.

2. Facultativement, saisissez un Description pour le widget personnalisé.

3. Facultativement, saisissez un Libellé pour le widget personnalisé.

4. Si nécessaire, [Activer] Restreindre l'accès des partenaires pour spécifier des partenaires et des 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é.

3

Configurer 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 distinct.

   • Intégrer dans impact.com : Affiche le widget directement dans l'interface de la plateforme.

2. Facultativement, dans le 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 la [Menu déroulant], sélectionnez le protocole (p. ex. https://) qui correspond à la sécurité de votre site.

5. Facultativement, sélectionnez [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 (p. ex. {irpid}) à votre URL du widget. Consultez la Jetons des champs dynamiques section ci-dessous pour obtenir une description de chaque jeton.

4

Mettre à jour les paramètres avancés

Dans la Langue [Menu déroulant], sélectionnez la langue dans laquelle ce widget s'affichera.

5

Finaliser le widget personnalisé

Sélectionnez Créer pour enregistrer votre widget. Les partenaires peuvent trouver ce widget dans Widgets de contenu.

Jetons des champs dynamiques

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 paramètre de lien profond ajouté.

Exemples pratiques

À 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 des 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 le code ; ils ouvrent simplement le widget final depuis Widgets de contenu.

Comment les jetons de champs dynamiques atteignent votre widget

Lorsque vous ajoutez un jeton de champ dynamique au URL du widgetimpact.com le remplace par les vraies valeurs de chaque partenaire avant de charger votre page. Votre page lit ces valeurs depuis sa chaîne de requête et les utilise pour créer des liens traçables.

Par exemple, si vous définissez le URL du widget pour 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:

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

Passez l'URL de clic sous forme de {click_url_encoded}, et non {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.

Exemple 1 : widget de recherche

Permet à un partenaire de rechercher dans votre catalogue et de copier un lien traçable 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 (p. ex., https://widgets.yourbrand.com/search). Remplacez le tableau de démonstration CATALOG par un appel à votre propre catalogue de produits ou API de recherche.

2. Créez le widget personnalisé en suivant les cinq étapes ci-dessus. Dans Configurer le widget, définissez le 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 pointent vers votre site et enregistrent un clic. Puis basculez le widget sur Intégrer dans impact.com.

URL du widget

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

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

Exemple 2 : publicité rich media dynamique (widget de chat flottant)

Une publicité rich media dynamique est tout actif HTML interactif que vous hébergez et intégrez sous forme de widget. Dans cet exemple, vous allez créer une bulle de chat flottante qui s'agrandit en un message promotionnel et un 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 est suivi et attribué.

1. Hébergez la page sur un domaine que vous contrôlez, en HTTPS (p. 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

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

Pour envoyer les visiteurs vers une page spécifique au lieu de votre page d'accueil 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.

chat-widget.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>

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 ; ouvrez donc les liens de destination avec target="_blank" ou window.open(...) plutôt que de naviguer dans la fenêtre parente.

• Encodez l'URL de clic. Passez-la sous forme de {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 lien profond avec votre ingénieur d'intégration impact.com et assurez-vous que les destinations font partie des domaines autorisés pour le deep linking.

Ressources supplémentaires

• Créer et partager des liens de suivi avec les partenaires — Comment créer des liens de suivi et les partager avec vos partenaires.

• Paramètres des liens de suivi expliqués — La structure d'un lien de suivi et les paramètres que vous pouvez ajouter, tels que les sous-ID, l'ID partagé et les liens profonds.

• Configurer les domaines autorisés pour le deep linking — Autorisez les domaines de destination vers lesquels les partenaires sont autorisés à créer des liens profonds sur votre site.

• Introduction aux types de ressources — Les types de ressources que vous pouvez proposer aux partenaires, y compris l'emplacement du widget personnalisé.

• De Rakuten Advertising à impact.com : étapes clés de la transition — Ce qui change lorsque vous migrez un programme de Rakuten Advertising vers impact.com.