> ## 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.

# Exemplo Completo com API

> Exemplo de integração completa com nossas APIs

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>
    </>;
};

Este exemplo demonstra um fluxo completo usando as APIs do Topsort para uma campanha de produto patrocinado com segmentação por categoria. Substitua as chaves de API e IDs pelas suas credenciais e valores reais.

**Etapas:**

<Steps>
  <Step title="Sincronizar catálogo">Sincronize seu catálogo de produtos com o Topsort</Step>
  <Step title="Criar uma campanha">Configure uma campanha de produto patrocinado</Step>
  <Step title="Enviar solicitações de leilão">Solicite vencedores de leilão</Step>
  <Step title="Rastrear eventos">Reporte impressões, cliques e compras</Step>
  <Step title="Obter relatório">Recupere dados de desempenho da campanha</Step>
</Steps>

<Note>
  * Para gerenciar produtos, campanhas e relatórios, use uma Chave de API Avançada
    (TSC\_...). - Para leilões e eventos, use uma Chave de API do Marketplace (TSE\_...).
</Note>

## 1. Sincronizar Catálogo

Um exemplo de produto example-product-coca-cola, da categoria soft-drinks é usado neste exemplo. Lembre-se de usar sua Chave de API Avançada.

```javascript theme={null}
const apikey = "TSC_...";

const body = {
  products: [
    {
      active: true,
      categories: ["soft-drinks"],
      id: "example-product-coca-cola",
      imageURL:
        "https://intl.cokestore.com/media/catalog/product/1/6/16181_squeeze-ko-can-maria-2.png",
      name: "Lata de Coca Cola",
      price: "9.99",
      vendors: ["coca-cola"],
    },
  ],
};

try {
  const response = await fetch(
    "https://api.topsort.com/public/v1/catalog-search-service/catalogs/products",
    {
      method: "PUT",
      mode: "cors",
      headers: {
        Authorization: `Bearer ${apikey}`,
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify(body),
    }
  );
  if (!response.ok) {
    console.error("status inesperado: " + response.status);
  } else {
    console.log("status de sucesso: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

## 2. Criar Campanha

Neste exemplo, uma campanha é criada para promover o produto example-product-coca-cola, tendo um gatilho de palavra-chave (soft drink). Lembre-se de usar sua Chave de API Avançada.

```javascript theme={null}
const apikey = "TSC_...";

const body = {
  bids: [
    {
      target: {
        type: "product",
        id: "example-product-coca-cola",
      },
      triggers: [
        {
          type: "keyword",
          value: {
            matchType: "exact",
            words: ["soft drink"],
          },
        },
      ],
    },
  ],
  budget: {
    type: "daily",
    amount: 10000,
  },
  campaignType: "autobidding",
  isActive: true,
  status: "approved",
  adFormat: "listing",
  name: "Uma campanha de exemplo",
};

try {
  const response = await fetch(
    "https://api.topsort.com/public/v1/campaign-service/campaigns?vendor_id=demo-vendor",
    {
      method: "POST",
      mode: "cors",
      headers: {
        Authorization: `Bearer ${apikey}`,
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify(body),
    }
  );
  if (!response.ok) {
    console.error("status inesperado: " + response.status);
  } else {
    console.log("status de sucesso: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

## 3. Enviar Solicitação de Leilão

Neste exemplo, uma solicitação de leilão é criada para retornar vencedores acionados pelo termo de busca "soft drink". Lembre-se de usar sua Chave de API do Marketplace.

```javascript theme={null}
const apikey = "TSE_...";

const body = {
  auctions: [
    {
      searchQuery: "soft drink",
      slots: 1,
      type: "listings",
    },
  ],
};

try {
  const response = await fetch("https://api.topsort.com/v2/auctions", {
    method: "POST",
    mode: "cors",
    headers: {
      Authorization: `Bearer ${apikey}`,
      "Content-Type": "application/json; charset=utf-8",
    },
    body: JSON.stringify(body),
  });
  if (!response.ok) {
    console.error("status inesperado: " + response.status);
  } else {
    console.log("status de sucesso: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

## 4. Rastreamento de Eventos

Neste exemplo, um clique em um produto promovido é rastreado usando nossa API. O resolvedBidId do vencedor retornado pela chamada de leilões precisa ser enviado no corpo da solicitação, para garantir a atribuição correta de vendas. Lembre-se de usar sua Chave de API do Marketplace.

```javascript theme={null}
const apikey = "TSE_...";

const body = {
  clicks: [
    {
      id: "d0cf3f56-a719-4e02-9c88-625f965ae6e7",
      occurredAt: "2024-07-23T11:49:04+00:00",
      opaqueUserId: "71303ce0-de89-496d-8270-6434589615e2",
      resolvedBidId:
        "ChAGafmNzX5wy4sEaDnXi4iWEhABjxq1RG513IkbvRgIVcd6GhABjmiyW3t2Ur066CLC3jWVIgoKBjExMjYzNBABMPuVDw",
    },
  ],
};

try {
  const response = await fetch("https://api.topsort.com/v2/events", {
    method: "POST",
    mode: "cors",
    headers: {
      Authorization: `Bearer ${apikey}`,
      "Content-Type": "application/json; charset=utf-8",
    },
    body: JSON.stringify(body),
  });

  if (!response.ok) {
    console.error("status inesperado: " + response.status);
  } else {
    console.log("status de sucesso: " + response.status);
  }
} catch (error) {
  console.error(error);
}
```

<IntegrationsCard1APt />