Crie 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 da impact.com por meio de um iframe. Use este guia para criar e configurar um widget de conteúdo personalizado que ofereça recursos personalizados e uma experiência de marca consistente para seus parceiros.

1

Acesse o criador de widgets personalizados

1. No menu de navegação à esquerda, selecione [Engajar] → Conteúdo → Widgets.
2. No canto superior direito, selecione Criar widget → Personalizado.

2

Insira os detalhes do widget

1. Insira um Nome do widget personalizado.
2. Opcionalmente, insira uma Descrição para o widget personalizado.
3. Opcionalmente, insira uma Rótulo para o widget personalizado.
4. Se necessário, [Ativar] Restringir acesso do parceiro para especificar parceiros e grupos individuais 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.

3

Configure 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 na impact.com: Exibe o widget diretamente na interface da plataforma.
2. Opcionalmente, na Imagem de pré-visualização seção, selecione Escolher arquivo para fazer upload de uma miniatura. Verifique se o arquivo é GIF, JPG ou PNG e não excede 512 KB.
3. No campo URL do widget insira o endereço da web onde seu widget está hospedado.
4. No [menu suspenso], selecione o protocolo (por exemplo, https://) que corresponda à segurança do seu site.
5. Opcionalmente, selecione [Adicionar] Inserir campos dinâmicos para expandir a lista de tokens.
6. Localize o token que deseja usar e selecione Inserir. A plataforma anexará automaticamente o token (por exemplo, {irpid}) à sua URL do widget. Consulte a tokens de campos dinâmicos seção abaixo para uma descrição de cada token.

4

Atualizar configurações avançadas

No Idioma [menu suspenso], selecione o idioma em que este widget será exibido.

5

Finalize o widget personalizado

Selecione Criar para salvar seu widget. Os parceiros podem encontrar este widget em Widgets de conteúdo.

tokens de campos dinâmicos

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}	Sub ID do parceiro 1
{subid2}	Sub ID do parceiro 2
{subid3}	Sub ID do parceiro 3
{sharedId}	ID compartilhado
{iradid}	ID do anúncio
{ircid}	ID do programa
{click_url_encoded_deeplink}	URL de clique codificada com o parâmetro de deep link anexado.

Exemplos práticos

Sobre estes exemplos: Widgets personalizados são criados e hospedados por você — a 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.

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

Quando você adiciona um token de campo dinâmico à URL do widget, a 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 URL do widget para https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}, a impact.com carrega o seguinte para um parceiro cujo ID é 123456:

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

Passe a URL de clique como {click_url_encoded}, e não {click_url} — uma URL de clique bruta contém seus próprios ? e & caracteres, que quebram sua string de consulta. Decodifique-a em sua página antes de usar.

Exemplo 1: Widget de busca

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

1. Hospede a página de busca 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 API de busca.
2. Crie o widget personalizado usando as cinco etapas acima. Em Configure o widget, defina o URL do widget para sua página com os {irpid} e {click_url_encoded} tokens (mostrados abaixo).
3. Teste com Abrir em nova aba, faça uma busca como parceiro de teste e confirme se os links de resultado direcionam para o seu site e registram um clique. Depois, altere o widget para Incorporar na impact.com.

URL do 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>Busca 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">Buscar</button>
  </div>
  <div id="results"></div>

  <script>
    // 1. Leia os valores que a 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 busca.
    var CATALOG = [
      { name: 'Tênis Trail Runner',   url: 'https://www.yourbrand.com/products/trail-runner' },
      { name: 'Jaqueta impermeável',   url: 'https://www.yourbrand.com/products/waterproof-jacket' },
      { name: 'Meias de caminhada de lã merino', 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 (veja "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>

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

Um anúncio dinâmico de rich media é qualquer recurso HTML interativo que você hospeda e incorpora como um widget. Neste exemplo, você criará uma bolha de chat flutuante que se expande em uma mensagem promocional e uma chamada para ação. Quando o visitante seleciona o botão, ele é redirecionado pela URL de clique do parceiro, então o clique é 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 na impact.com.

URL do widget

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

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 no seu próprio código, como mostrado no Exemplo 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>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 últimas ofertas? Toque abaixo para comprar e economizar.</p>
    <button id="cta">Comprar agora</button>
  </div>

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

Antes de publicar

• Hospede você mesmo, via HTTPS. A impact.com incorpora sua página por meio de um iframe ou a abre em uma nova aba — ela 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 pela 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 da 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 — Como criar links de rastreamento e compartilhá-los com seus parceiros.
• Parâmetros de links de rastreamento explicados — 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 — Autorize os domínios de destino aos quais os parceiros têm permissão para fazer deep link no seu site.
• Introdução aos tipos de ativos — Os tipos de ativos que você pode oferecer aos parceiros, incluindo onde o widget personalizado se encaixa.
• Rakuten Advertising para impact.com: etapas principais da transição — O que muda quando você migra um programa da Rakuten Advertising para a impact.com.