> ## Documentation Index
> Fetch the complete documentation index at: https://docs.topsort.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Banners.js

> Aprenda como integrar o Topsort com Banners.js

export const IntegrationsCard1APt = () => {
  return <>
      <style>{`
        .integrations-card-1a-pt {
          display: flex;
          flex-direction: column;
          background-color: #f0f2f4;
          border: 1px solid rgba(0, 0, 0, 0.08);
          border-radius: 12px;
          padding: 1.25rem 1.5rem;
          gap: 0.25rem;
          color: #25253b;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
          transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
          margin-top: 2rem;
        }

        .integrations-card-1a-pt:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
          border-color: rgba(0, 0, 0, 0.12);
        }

        .dark .integrations-card-1a-pt {
          background-color: #25253b;
          color: #f6f8fa;
          border-color: rgba(255, 255, 255, 0.08);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .dark .integrations-card-1a-pt:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          border-color: rgba(255, 255, 255, 0.12);
        }

        .integrations-card-1a-pt-avatar-row {
          display: flex;
          margin-left: 14px;
          flex-wrap: wrap;
        }

        .integrations-card-1a-pt-avatar {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: 2px solid #f0f2f4;
          margin-left: -14px;
          object-fit: cover;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
          pointer-events: none;
          cursor: default;
        }

        .dark .integrations-card-1a-pt-avatar {
          border-color: #25253b;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .integrations-card-1a-pt h2 {
          margin: 0;
          line-height: 1.25;
          font-size: clamp(1.25rem, calc(0.875rem + 1.25vw), 1.75rem);
          font-weight: 700;
          letter-spacing: -0.025em;
          color: #111827;
        }

        .dark .integrations-card-1a-pt h2 {
          color: #f9fafb;
        }

        .integrations-card-1a-pt-subtitle {
          font-size: 0.9375rem;
          font-weight: 500;
          line-height: 1.5;
          color: #4b5563;
          margin: 0;
        }

        .dark .integrations-card-1a-pt-subtitle {
          color: #d1d5db;
        }

        .integrations-card-1a-pt p {
          margin: 0;
          line-height: 1.5;
          font-size: 0.875rem;
          color: #374151;
        }

        .dark .integrations-card-1a-pt p {
          color: #d1d5db;
        }

        .integrations-card-1a-pt a {
          color: #0500ff;
          text-decoration: none;
          font-weight: 500;
          transition: color 0.15s ease;
        }

        .integrations-card-1a-pt a:hover {
          color: #0400cc;
        }

        .dark .integrations-card-1a-pt a {
          color: #8280ff;
        }

        .dark .integrations-card-1a-pt a:hover {
          color: #a19fff;
        }

        @media (max-width: 640px) {
          .integrations-card-1a-pt-avatar {
            width: 38px;
            height: 38px;
            margin-left: -12px;
          }

          .integrations-card-1a-pt-avatar-row {
            margin-left: 12px;
          }
        }

        @media (min-width: 1280px) {
          .integrations-card-1a-pt p {
            font-size: 0.6875rem;
            line-height: 1.4;
            letter-spacing: -0.01em;
          }

          .integrations-card-1a-pt h2 {
            font-size: clamp(1rem, calc(0.75rem + 1vw), 1.25rem);
          }

          .integrations-card-1a-pt-subtitle {
            font-size: 0.75rem;
          }
        }
      `}</style>
      <div className="integrations-card-1a-pt">
        <div className="integrations-card-1a-pt-avatar-row">
          <img src="/images/integration-team/agustin.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/amelia.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/bernardita.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/borumy.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/felipe.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/gui.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/javiera.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/linn.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/marcio.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/mateus.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/max.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
          <img src="/images/integration-team/rodrigo.webp" alt="" loading="lazy" className="integrations-card-1a-pt-avatar" />
        </div>

        <h2>Precisa de ajuda com sua integração Topsort?</h2>

        <p className="integrations-card-1a-pt-subtitle">
          Fale conosco, a equipe de engenharia de integrações.
        </p>

        <p>
          Entre em contato através do <strong>seu canal de mensagens dedicado</strong> ou em{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          Se você ainda não é cliente,{" "}
          <a href="https://www.topsort.com/book-a-demo">agende uma demo</a> com nossa
          equipe de vendas.
        </p>
      </div>
    </>;
};

A [biblioteca pública banner.js do Topsort](https://github.com/Topsort/banners.js/) permite que marketplaces exibam banners através de uma integração low-code. Usando uma tag HTML simples, o marketplace pode se conectar ao servidor de anúncios do Topsort e renderizar banners de campanhas ativas sem integrações complexas.

## Instalação

Você pode instalar a biblioteca usando npm ou yarn, ou carregar o SDK diretamente no seu arquivo HTML incluindo uma tag `<script>`:

```html theme={null}
<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"
></script>
<script>
  // Configuração global para o Topsort
  window.TS = {
    token: "TSE_XXXXXXXXXXXX", // Substitua pela sua chave de API do Topsort
  };
</script>
```

## Uso

Este exemplo mostra uma configuração mínima necessária para fazer isso. A integração funciona com HTML e Javascript padrão, tornando-a compatível com a maioria dos stacks frontend.

Para testá-la, você só precisa adicionar sua Chave de API do Marketplace e o id do slot do banner, configurado na campanha.

```html theme={null}
<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"
></script>
<script
  async
  type="module"
  src="https://unpkg.com/@topsort/analytics.js/dist/ts.js"
></script>
<script>
  // Define a chave de API para leilões e eventos
  window.TS = {
    token: "TSE_XXXXXXXXXXXX",
  };
  // Comportamento personalizado pode ser configurado para cada site.
  window.TS_BANNERS = {
    // manipular o link de destino
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    // manipular estado de carregamento/busca
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Carregando...";
      return el;
    },
    // manipular erros
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Erro ao carregar banner";
      return el;
    },
  };
</script>
<body>
  <topsort-banner width="600" height="400" id="<your slot id>"></topsort-banner>
</body>
```

## Atributos do Banner

Estes são os atributos disponíveis para o componente `<topsort-banner>`. Eles servem como entrada para a solicitação de leilão, para buscar os vencedores certos para aquele contexto.

| Nome                    | Tipo   | Descrição                                              |
| ----------------------- | ------ | ------------------------------------------------------ |
| width                   | number | Largura do banner                                      |
| height                  | number | Altura do banner                                       |
| id                      | string | O ID do slot para este banner, configurado na campanha |
| Category-id (opcional)  | string | Categoria contextual para segmentação                  |
| Search-query (opcional) | string | Palavra-chave contextual para segmentação              |

## Comportamentos do Banner

Estes são os atributos disponíveis para o componente `<topsort-banner>`. Eles servem como entrada para a solicitação de leilão, para buscar os vencedores certos para aquele contexto.

| Nome              | Tipo        | Descrição                                                                |
| ----------------- | ----------- | ------------------------------------------------------------------------ |
| getLink(banner)   | string      | URL de destino do banner, configurado na campanha.                       |
| getLoadingElement | HTMLElement | Um elemento personalizado a ser exibido quando o banner está carregando. |
| getErrorElement   | HTMLElement | Um elemento personalizado a ser exibido quando ocorre um erro.           |

## Interface do Banner

A interface do banner é a estrutura de um objeto banner. Cada banner contém metadados sobre a campanha e o resolvedBidId, o parâmetro necessário para rastrear interações do usuário (cliques e impressões).

| Nome          | Tipo                                      | Descrição                                                                                                                                |
| ------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| type          | "product" \| "vendor" \| "brand" \| "url" | O tipo da entidade vencedora, representada pelo banner, configurado na campanha.                                                         |
| id            | string                                    | O ID da entidade vencedora. Se a entidade for do tipo URL, este é o URL.                                                                 |
| resolvedBidId | string                                    | O ID de lance correspondente da entidade vencedora, necessário para rastrear a interação do usuário (cliques, impressões) com o anúncio. |
| asset         | \[\{ url: string }]                       | Um array de urls vinculando aos ativos do banner.                                                                                        |

<IntegrationsCard1APt />