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

# Crear un widget personalizado

Desarrolla herramientas dinámicas que empoderen a los partners para promocionar tu marca. Los widgets personalizados te permiten incrustar herramientas o páginas alojadas externamente directamente en la interfaz de impact.com mediante un iframe. Usa esta guía para crear y configurar un widget de contenido personalizado que proporcione recursos personalizados y una experiencia de marca coherente para tus partners.

{% stepper %}
{% step %}

## Accede al creador de widgets personalizados

1. En el menú de navegación izquierdo, seleccione ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage]** → **Contenido** → [**Widgets**](https://app.impact.com/secure/advertiser/engage/ads/list-widget-tool-flow.ihtml)**.**
2. En la esquina superior derecha, selecciona **Crear widget** → **Personalizado**.
   {% endstep %}

{% step %}

## Introduce los detalles del widget

1. Introduce un **Nombre** del widget personalizado.
2. Opcionalmente, introduce un **Descripción** para el widget personalizado.
3. Opcionalmente, introduce un **Etiqueta** para el widget personalizado.
4. Si es necesario, ![](https://3147719151-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) **\[Actívalo] Restringir acceso de partners** para especificar los partners y grupos individuales que deben tener acceso al widget.
   * **Partners:** Introduce el nombre de los partners que pueden acceder al widget personalizado.
   * **Grupos:** Introduce el nombre de los grupos que pueden acceder al widget personalizado.
     {% endstep %}

{% step %}

## Configura el widget

1. Selecciona cómo se comporta el widget entre las opciones de visualización:
   * **Abrir en una pestaña nueva:** Abre la URL alojada en una pestaña aparte.
   * **Incrustar en impact.com:** Muestra el widget directamente dentro de la interfaz de la plataforma.
2. Opcionalmente, desde la **Imagen de vista previa** sección, seleccione **Elegir archivo** para subir una miniatura. Asegúrate de que el archivo sea GIF, JPG o PNG y no supere 512 KB.
3. En el **URL del widget** campo, introduce la dirección web donde está alojado tu widget.
4. Desde el ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[Menú desplegable]**, selecciona el protocolo (p. ej., https\://) que coincida con la seguridad de tu sitio.
5. Opcionalmente, selecciona ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6282f271b7521383385339243690b303086736d9%2F3b5a585dd2895bdf1c30d1236c72ba590dddd18717863b27074c8d313d05ae20.svg?alt=media) **\[Añadir] Insertar campos dinámicos** para expandir la lista de tokens.
6. Localiza el token que quieres usar y selecciona **Insertar**. La plataforma añadirá automáticamente el token (p. ej., {irpid}) a tu **URL del widget**. Consulta la [Tokens de campos dinámicos](#dynamic-field-tokens) sección de abajo para una descripción de cada token.
   {% endstep %}

{% step %}

## Actualiza la configuración avanzada

Desde el **Idioma** ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[Menú desplegable]**, selecciona el idioma en el que se mostrará este widget.
{% endstep %}

{% step %}

## Finaliza el widget personalizado

Seleccione **Crear** para guardar tu widget. Los partners pueden encontrar este widget en *Widgets de contenido*.
{% endstep %}
{% endstepper %}

<details>

<summary>Tokens de campos dinámicos</summary>

| Token                          | Descripción                                                         |
| ------------------------------ | ------------------------------------------------------------------- |
| `{click_url_encoded}`          | URL de clic codificada                                              |
| `{click_url}`                  | URL de clic no codificada                                           |
| `{irimpurl}`                   | Nuestra URL de impresión                                            |
| `{irpid}`                      | ID del socio                                                        |
| `{subid1}`                     | Sub ID del partner 1                                                |
| `{subid2}`                     | Sub ID del partner 2                                                |
| `{subid3}`                     | Sub ID del partner 3                                                |
| `{sharedId}`                   | ID compartido                                                       |
| `{iradid}`                     | ID del anuncio                                                      |
| `{ircid}`                      | ID del programa                                                     |
| `{click_url_encoded_deeplink}` | URL de clic codificada con el parámetro de enlace profundo añadido. |

</details>

## Ejemplos prácticos

{% hint style="info" %}
**Acerca de estos ejemplos:** Los widgets personalizados los creas y alojas tú — impact.com solo incrusta la página alojada e inyecta en ella datos en vivo del partner. Copia las implementaciones de referencia de abajo, alójalas en tu propio dominio y adáptalas. Los partners nunca editan ningún código; solo abren el widget terminado desde *Widgets de contenido*.
{% endhint %}

### Cómo llegan los tokens de campos dinámicos a tu widget

Cuando añades un token de campo dinámico a la **URL del widget**, impact.com lo sustituye por los valores reales de cada partner antes de cargar tu página. Tu página lee esos valores de su cadena de consulta y los usa para crear enlaces rastreables.

Por ejemplo, si estableces la **URL del widget** para `https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}`, impact.com carga lo siguiente para un partner cuyo ID es `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" %}
Pasa la URL de clic como `{click_url_encoded}`, no como `{click_url}` — una URL de clic sin procesar contiene sus propios `?` y `&` caracteres, que rompen tu cadena de consulta. Decodifícala en tu página antes de usarla.
{% endhint %}

### Ejemplo 1: Widget de búsqueda

Permite que un partner busque en tu catálogo y copie un enlace rastreable para cualquier producto sin salir de impact.com. Tú alojas la página de búsqueda; impact.com pasa el ID del partner y la URL de clic para que cada enlace de resultado se atribuya a ese partner.

1. Aloja la página de búsqueda en un dominio que controles, mediante HTTPS (p. ej., `https://widgets.yourbrand.com/search`). Sustituye la demo `CATALOG` array por una llamada a tu propio catálogo de productos o API de búsqueda.
2. Crea el widget personalizado usando los cinco pasos anteriores. En **Configura el widget**, configura el **URL del widget** a tu página con los `{irpid}` y `{click_url_encoded}` tokens (mostrados abajo).
3. Prueba con **Abrir en una pestaña nueva**, realiza una búsqueda como partner de prueba y confirma que los enlaces de resultado lleven a tu sitio y registren un clic. Luego cambia el widget a **Incrustar en impact.com**.

**URL del 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>Búsqueda de productos</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="Buscar productos..." />
    <button id="go">Buscar</button>
  </div>
  <div id="results"></div>

  <script>
    // 1. Lee los valores que impact.com inyectó en la URL del widget.
    var params    = new URLSearchParams(window.location.search);
    var partnerId = params.get('partner') || '';
    var clickUrl  = decodeURIComponent(params.get('clickurl') || '');

    // 2. Sustituye este array de demostración por una llamada a tu propio catálogo de productos / API de búsqueda.
    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. Genera un enlace profundo rastreable: la URL de clic del partner + la página de destino.
    //    Confirma el formato exacto de enlace profundo de tu programa antes de publicar (consulta «Antes de publicar»).
    function buildTrackingLink(destinationUrl) {
      if (!clickUrl) return destinationUrl;            // alternativa: sin seguimiento si falta el token
      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>No se encontraron productos.</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 + '">Copiar enlace</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>

### Ejemplo 2: Anuncio dinámico de rich media (widget flotante)

Un anuncio dinámico de rich media es cualquier recurso HTML interactivo que alojas e incrustas como widget. En este ejemplo, crearás una burbuja de chat flotante que se expande en un mensaje promocional y una llamada a la acción. Cuando el visitante selecciona el botón, se le redirige a través de la URL de clic del partner, de modo que el clic se rastrea y se atribuye.

1. Aloja la página en un dominio que controles, mediante HTTPS (p. ej., `https://widgets.yourbrand.com/chat`). Personaliza el texto, los colores y la llamada a la acción para que coincidan con tu campaña.
2. Crea el widget personalizado usando los cinco pasos anteriores, configurando el **URL del widget** con el `{click_url_encoded}` token (mostrado abajo).
3. Prueba con **Abrir en una pestaña nueva** como partner de prueba, confirma que la llamada a la acción abre tu sitio y registra un clic, y luego cambia el widget a **Incrustar en impact.com**.

**URL del widget**

{% code overflow="wrap" %}

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

{% endcode %}

Para enviar a los visitantes a una página específica en lugar de a tu página de destino predeterminada, usa el `{click_url_encoded_deeplink}` token en lugar de `{click_url_encoded}`, o añade el destino en tu propio código como se muestra en el Ejemplo 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>Asistente</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>¡Hola! ¿Buscas nuestras últimas ofertas? Toca abajo para comprar y ahorrar.</p>
    <button id="cta">Comprar ahora</button>
  </div>

  <script>
    // impact.com inyecta la URL de clic del partner en esta página.
    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;
      // Ábrelo en una pestaña nueva para que el clic se rastree y se atribuya al partner.
      window.open(clickUrl, '_blank', 'noopener');
    });
  </script>
</body>
</html>
```

</details>

## Antes de publicar

* Aloja tu contenido tú mismo, mediante HTTPS. impact.com incrusta tu página mediante un iframe o la abre en una pestaña nueva — no aloja tu código. En modo incrustado, tu página se ejecuta dentro de un iframe, así que abre los enlaces de destino con `target="_blank"` o `window.open(...)` en lugar de navegar la ventana principal.
* Codifica la URL de clic. Pásala como `{click_url_encoded}` y decodíficala en tu página para que sus propios `?` y `&` caracteres no rompan tu cadena de consulta.
* Confirma el formato de enlace profundo con tu Integration Engineer de impact.com y asegúrate de que los destinos estén cubiertos por tus dominios permitidos para el deep linking.

## Recursos adicionales

* [Crear y compartir enlaces de seguimiento con partners](/brand/es/what-would-you-like-to-learn-about/platform-features/reach-out-to-partners/generate-leads/create-and-share-tracking-links-with-partners.md) — Cómo crear enlaces de seguimiento y compartirlos con tus partners.
* [Explicación de los parámetros de un enlace de seguimiento](/brand/es/what-would-you-like-to-learn-about/platform-features/tracking/tracking-explained/tracking-link-parameters-explained.md) — La estructura de un enlace de seguimiento y los parámetros que puedes añadir, como sub IDs, ID compartido y enlaces profundos.
* [Configurar dominios permitidos para el deep linking](/brand/es/what-would-you-like-to-learn-about/account-administration/program-settings/tracking-settings/set-up-permitted-domains-for-deep-linking.md) — Autoriza los dominios de destino a los que los partners pueden enlazar en profundidad en tu sitio.
* [Introducción a los tipos de activos](/brand/es/what-would-you-like-to-learn-about/platform-features/ads/create-ads/introduction-to-asset-types.md) — Los tipos de recursos que puedes ofrecer a los partners, incluido dónde encaja el widget personalizado.
* [De Rakuten Advertising a impact.com: pasos clave de transición](/brand/es/what-would-you-like-to-learn-about/getting-started/rakuten-advertising-to-impact.com-key-transition-steps.md) — Qué cambia cuando migras un programa de Rakuten Advertising a 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 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/es/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.