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

# Criar um widget personalizado

Desenvolva ferramentas dinâmicas que capacitem os parceiros a promover sua marca. Widgets personalizados permitem incorporar ferramentas ou páginas hospedadas externamente diretamente na interface do impact.com por meio de um iframe. Use este guia para criar e configurar um widget de conteúdo personalizado que forneça recursos personalizados e uma experiência de marca consistente para seus parceiros.

{% stepper %}
{% step %}

## Acessar o criador de widget personalizado

1. No menu de navegação à esquerda, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage]** → **Conteúdo** → [**Widgets**](https://app.impact.com/secure/advertiser/engage/ads/list-widget-tool-flow.ihtml)**.**
2. No canto superior direito, selecione **Criar widget** → **Personalizado**.
   {% endstep %}

{% step %}

## Insira os detalhes do widget

1. Digite um **Nome** do widget personalizado.
2. Opcionalmente, insira um **Descrição** para o widget personalizado.
3. Opcionalmente, insira um **Rótulo** para o widget personalizado.
4. Se necessário, ![](https://526234278-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) **\[Ativar] Restringir acesso de parceiros** para especificar parceiros individuais e grupos que devem ter acesso ao widget.
   * **Parceiros:** Insira o nome dos parceiros que podem acessar o widget personalizado.
   * **Grupos:** Insira o nome dos grupos que podem acessar o widget personalizado.
     {% endstep %}

{% step %}

## Configurar o widget

1. Selecione como o widget se comporta nas opções de exibição:
   * **Abrir em nova aba:** Abre a URL hospedada em uma aba separada.
   * **Incorporar no impact.com:** Exibe o widget diretamente na interface da plataforma.
2. Opcionalmente, no **Imagem de pré-visualização** , selecione **Escolher arquivo** para enviar uma miniatura. Certifique-se de que o arquivo seja GIF, JPG ou PNG e não exceda 512 KB.
3. No **URL do widget** campo, insira o endereço da web onde seu widget está hospedado.
4. A partir do ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[menu suspenso]**, selecione o protocolo (por exemplo, https\://) que corresponda à segurança do seu site.
5. Opcionalmente, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6282f271b7521383385339243690b303086736d9%2F3b5a585dd2895bdf1c30d1236c72ba590dddd18717863b27074c8d313d05ae20.svg?alt=media) **\[Adicionar] Inserir campos dinâmicos** para expandir a lista de tokens.
6. Localize o token que você deseja usar e selecione **Inserir**. A plataforma adicionará automaticamente o token (por exemplo, {irpid}) ao seu **URL do widget**. Consulte a [Tokens de campos dinâmicos](#dynamic-field-tokens) seção abaixo para uma descrição de cada token.
   {% endstep %}

{% step %}

## Atualizar configurações avançadas

A partir do **Idioma** ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[menu suspenso]**, selecione o idioma no qual este widget será exibido.
{% endstep %}

{% step %}

## Finalizar o widget personalizado

Selecione **Criar** para salvar seu widget. Os parceiros podem encontrar este widget em *Widgets de conteúdo*.
{% endstep %}
{% endstepper %}

<details>

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

| Token                          | Descrição                                                    |
| ------------------------------ | ------------------------------------------------------------ |
| `{click_url_encoded}`          | URL de clique codificada                                     |
| `{click_url}`                  | URL de clique não codificada                                 |
| `{irimpurl}`                   | Nossa URL de impressão                                       |
| `{irpid}`                      | ID do parceiro                                               |
| `{subid1}`                     | SubID 1 do parceiro                                          |
| `{subid2}`                     | SubID 2 do parceiro                                          |
| `{subid3}`                     | SubID 3 do parceiro                                          |
| `{sharedId}`                   | ID Compartilhado                                             |
| `{iradid}`                     | ID do anúncio                                                |
| `{ircid}`                      | ID do programa                                               |
| `{click_url_encoded_deeplink}` | URL de clique codificada com parâmetro de deep link anexado. |

</details>

## Exemplos práticos

{% hint style="info" %}
**Sobre estes exemplos:** Widgets personalizados são criados e hospedados por você — o impact.com apenas incorpora a página hospedada e injeta dados ao vivo do parceiro nela. Copie as implementações de referência abaixo, hospede-as em seu próprio domínio e adapte-as. Os parceiros nunca editam nenhum código; eles apenas abrem o widget finalizado em *Widgets de conteúdo*.
{% endhint %}

### Como os tokens de campos dinâmicos chegam ao seu widget

Quando você adiciona um token de campo dinâmico ao **URL do widget**, o impact.com o substitui pelos valores reais de cada parceiro antes de carregar sua página. Sua página lê esses valores da string de consulta e os usa para criar links rastreáveis.

Por exemplo, se você definir o **URL do widget** para `https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}`, o impact.com carrega o seguinte para um parceiro cujo 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" %}
Passe a URL de clique como `{click_url_encoded}`, não como `{click_url}` — uma URL de clique bruta contém seus próprios caracteres `?` e `&` , que quebram sua string de consulta. Decodifique-a na sua página antes de usar.
{% endhint %}

### Exemplo 1: Widget de pesquisa

Permite que um parceiro pesquise seu catálogo e copie um link rastreável para qualquer produto sem sair do impact.com. Você hospeda a página de pesquisa; o impact.com envia o ID do parceiro e a URL de clique, de modo que cada link de resultado seja atribuído a esse parceiro.

1. Hospede a página de pesquisa em um domínio que você controla, via HTTPS (por exemplo, `https://widgets.yourbrand.com/search`). Substitua o array de demonstração `CATALOG` por uma chamada ao seu próprio catálogo de produtos ou à sua API de pesquisa.
2. Crie o widget personalizado usando as cinco etapas acima. Em **Configurar o widget**, defina o **URL do widget** para sua página com os tokens `{irpid}` e `{click_url_encoded}` (mostrados abaixo).
3. Teste com **Abrir em nova aba**, faça uma pesquisa como parceiro de teste e confirme se os links dos resultados levam ao seu site e registram um clique. Depois, altere o widget para **Incorporar no impact.com**.

**URL do 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>Pesquisa de produtos</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="Pesquisar produtos..." />
    <button id="go">Pesquisar</button>
  </div>
  <div id="results"></div>

  <script>
    // 1. Leia os valores que o impact.com injetou na URL do widget.
    var params    = new URLSearchParams(window.location.search);
    var partnerId = params.get('partner') || '';
    var clickUrl  = decodeURIComponent(params.get('clickurl') || '');

    // 2. Substitua este array de demonstração por uma chamada ao seu próprio catálogo de produtos / API de pesquisa.
    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. Crie um deep link rastreável: a URL de clique do parceiro + a página de destino.
    //    Confirme o formato exato do deep link do seu programa antes de publicar (consulte "Antes de publicar").
    function buildTrackingLink(destinationUrl) {
      if (!clickUrl) return destinationUrl;            // fallback: sem rastreamento se o token estiver ausente
      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>Nenhum produto encontrado.</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 link</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>

### Exemplo 2: Anúncio dinâmico em rich media (widget flutuante de chat)

Um anúncio dinâmico em rich media é qualquer ativo HTML interativo que você hospeda e incorpora como um widget. Neste exemplo, você criará um balão de chat flutuante que se expande em uma mensagem promocional e uma chamada para ação. Quando o visitante selecionar o botão, ele será redirecionado pela URL de clique do parceiro, de modo que o clique seja rastreado e atribuído.

1. Hospede a página em um domínio que você controla, via HTTPS (por exemplo, `https://widgets.yourbrand.com/chat`). Personalize o texto, as cores e a chamada para ação para corresponder à sua campanha.
2. Crie o widget personalizado usando as cinco etapas acima, definindo o **URL do widget** com o `{click_url_encoded}` token (mostrado abaixo).
3. Teste com **Abrir em nova aba** como parceiro de teste, confirme se a chamada para ação abre seu site e registra um clique; depois, altere o widget para **Incorporar no impact.com**.

**URL do widget**

{% code overflow="wrap" %}

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

{% endcode %}

Para enviar visitantes para uma página específica em vez da sua página de destino padrão, use o `{click_url_encoded_deeplink}` token no lugar de `{click_url_encoded}`, ou acrescente o destino em seu próprio código como mostrado no Exemplo 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>Assistente</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>Olá! Procurando nossas ofertas mais recentes? Toque abaixo para comprar e economizar.</p>
    <button id="cta">Compre agora</button>
  </div>

  <script>
    // O impact.com injeta a URL de clique do parceiro nesta 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;
      // Abrir em uma nova aba para que o clique seja rastreado e atribuído ao parceiro.
      window.open(clickUrl, '_blank', 'noopener');
    });
  </script>
</body>
</html>
```

</details>

## Antes de publicar

* Hospede você mesmo, via HTTPS. O impact.com incorpora sua página por meio de um iframe ou a abre em uma nova aba — ele não hospeda seu código. No modo incorporado, sua página é executada dentro de um iframe, então abra os links de destino com `target="_blank"` ou `window.open(...)` em vez de navegar na janela pai.
* Codifique a URL de clique. Passe-a como `{click_url_encoded}` e decodifique-a em sua página para que seus próprios `?` e `&` caracteres não quebrem sua string de consulta.
* Confirme o formato do seu deep link com seu Engenheiro de Integração do impact.com e certifique-se de que os destinos estejam cobertos pelos domínios permitidos para deep linking.

## Recursos adicionais

* [Criar e compartilhar links de rastreamento com parceiros](/brand/pt-br/what-would-you-like-to-learn-about/platform-features/reach-out-to-partners/generate-leads/create-and-share-tracking-links-with-partners.md) — Como criar links de rastreamento e compartilhá-los com seus parceiros.
* [Parâmetros do link de rastreamento explicados](/brand/pt-br/what-would-you-like-to-learn-about/platform-features/tracking/tracking-explained/tracking-link-parameters-explained.md) — A estrutura de um link de rastreamento e os parâmetros que você pode adicionar, como sub IDs, ID compartilhado e deep links.
* [Configurar domínios permitidos para deep linking](/brand/pt-br/what-would-you-like-to-learn-about/account-administration/program-settings/tracking-settings/set-up-permitted-domains-for-deep-linking.md) — Autorize os domínios de destino para os quais os parceiros podem criar deep links no seu site.
* [Introdução aos tipos de ativos](/brand/pt-br/what-would-you-like-to-learn-about/platform-features/ads/create-ads/introduction-to-asset-types.md) — Os tipos de ativos que você pode oferecer aos parceiros, incluindo onde o widget personalizado se encaixa.
* [Rakuten Advertising para impact.com: principais etapas da transição](/brand/pt-br/what-would-you-like-to-learn-about/getting-started/rakuten-advertising-to-impact.com-key-transition-steps.md) — O que muda quando você migra um programa da Rakuten Advertising para o 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/pt-br/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.