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

# Visão Geral da Integração

> Uma visão geral do processo de integração

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

Existem elementos centrais para uma integração bem-sucedida com o Topsort. Primeiro, obtenha
acesso ao seu sandbox do Topsort através do seu representante Topsort. Com base no seu
acesso ao produto, você poderá ter chaves de API que desbloquearão os
seguintes componentes-chave de uma integração de produto:

<Steps>
  <Step title="Acesso ao Sandbox">
    Obtenha chaves de API (Marketplace para low-code, Avançada para catálogo/CRM) do
    seu painel Topsort.
  </Step>

  <Step title="Escolha seu caminho">
    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      O Topsort oferece duas abordagens de integração para atender seus requisitos técnicos e cronograma:
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      * **Integração low-code ([Plataforma de Anúncios](/pt/ad-platform))**: Use nossos SDKs, bibliotecas e plugins pré-construídos para implementação rápida
        e esforço mínimo de desenvolvimento. Perfeito para marketplaces que querem lançar rapidamente.
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      * **Integração API-first ([Servidor de Anúncios](/pt/ad-server))**: Aproveite nosso
        poderoso conjunto de APIs públicas para obter controle total da sua configuração de anúncios. Ideal para empresas com equipes internas e requisitos personalizados.
    </div>

    <div style={{ marginTop: "2rem", marginBottom: "2rem" }}>
      | Característica                 | Plataforma de Anúncios (Low-Code)  | Servidor de Anúncios (API-First)          |
      | ------------------------------ | ---------------------------------- | ----------------------------------------- |
      | **Tempo de Configuração**      | Dias a semanas                     | Semanas a meses                           |
      | **Esforço de Desenvolvimento** | Mínimo                             | Significativo                             |
      | **Personalização**             | Apenas recursos padrão             | Controle total sobre todos os aspectos    |
      | **Público-Alvo**               | Marketplaces, equipes de produto   | Empresas, equipes técnicas                |
      | **Gestão de Campanhas**        | UI e ferramentas pré-construídas   | Construa sua própria interface            |
      | **Formatos de Anúncios**       | Banners, listagens patrocinadas    | Qualquer formato que você projetar        |
      | **Melhor Para**                | Lançamento rápido, recursos padrão | Lógica personalizada, integração profunda |
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      **Escolha a [Plataforma de Anúncios](/pt/ad-platform) se você:**

      * Quer lançar mídia de varejo rapidamente com desenvolvimento mínimo
      * Prefere ferramentas de gestão de campanhas e painéis de relatórios pré-construídos
      * Precisa de anúncios banner padrão e listagens de produtos patrocinados
      * Tem recursos de desenvolvimento internos limitados
      * Quer usar plugins de plataforma (VTEX, Salesforce) para integração fácil
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      **Escolha o [Servidor de Anúncios](/pt/ad-server) se você:**

      * Precisa de controle completo sobre lógica de leilões e algoritmos de classificação
      * Tem equipes de engenharia internas para construir soluções personalizadas
      * Requer integração profunda com sistemas proprietários
      * Quer implementar formatos de anúncios personalizados ou fluxos de trabalho únicos
      * Precisa de recursos avançados como modelos de atribuição personalizados ou frameworks de testes A/B
    </div>
  </Step>

  <Step title="Testar e Validar">
    Use logging integrado e ambientes de staging para monitorar solicitações.
  </Step>

  <Step title="Entre em Produção">
    Implante em produção e aproveite as análises do Topsort para otimização.
  </Step>
</Steps>

<IntegrationsCard1APt />