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

# Integration Overview

> An overview to the integration process

export const IntegrationsCard1A = () => {
  return <>
      <style>{`
        .integrations-card-1a {
          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:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
          border-color: rgba(0, 0, 0, 0.12);
        }

        .dark .integrations-card-1a {
          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:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          border-color: rgba(255, 255, 255, 0.12);
        }

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

        .integrations-card-1a-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-avatar {
          border-color: #25253b;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .integrations-card-1a 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 h2 {
          color: #f9fafb;
        }

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

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

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

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

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

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

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

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

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

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

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

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

          .integrations-card-1a-subtitle {
            font-size: 0.75rem;
          }
        }
      `}</style>
      <div className="integrations-card-1a">
        <div className="integrations-card-1a-avatar-row">
          <img src="/images/integration-team/agustin.webp" alt="Agustin - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/amelia.webp" alt="Amelia - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/bernardita.webp" alt="Bernardita - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/borumy.webp" alt="Borumy - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/felipe.webp" alt="Felipe - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/gui.webp" alt="Gui - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/javiera.webp" alt="Javiera - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/linn.webp" alt="Linn - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/marcio.webp" alt="Marcio - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/mateus.webp" alt="Mateus - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/max.webp" alt="Max - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
          <img src="/images/integration-team/rodrigo.webp" alt="Rodrigo - Integrations Team Member" loading="lazy" className="integrations-card-1a-avatar" />
        </div>

        <h2>Need help with your Topsort integration?</h2>

        <p className="integrations-card-1a-subtitle">
          Talk to us, the integrations engineering team.
        </p>

        <p>
          Reach us via <strong>your dedicated messaging channel</strong> or at{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          If you're not a customer yet,{" "}
          <a href="https://www.topsort.com/book-a-demo">book a demo</a> with our
          sales team instead.
        </p>
      </div>
    </>;
};

There are core elements of a successful Topsort integration. First, gain
access to your Topsort sandbox from your Topsort representative. Based on your
product access, you will be able to have API keys that will unlock the
following key components of a product integration:

<Steps>
  <Step title="Sandbox Access">
    Obtain API keys (Marketplace for low-code, Advanced for catalog/CRM) from
    your Topsort dashboard.
  </Step>

  <Step title="Choose your path">
    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      Topsort offers two integration approaches to fit your technical requirements and timeline:
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      * **Low-code integration ([Ad Platform](/en/ad-platform))**: Use our pre-built SDKs, libraries, and plugins for fast implementation
        and minimal development effort. Perfect for marketplaces that want to launch quickly.
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      * **API-first integration ([Ad Server](/en/ad-server))**: Leverage our
        powerful set of public APIs to gain full control of your ad setup. Ideal for enterprises with in-house teams and custom requirements.
    </div>

    <div style={{ marginTop: "2rem", marginBottom: "2rem" }}>
      | Feature                 | Ad Platform (Low-Code)          | Ad Server (API-First)          |
      | ----------------------- | ------------------------------- | ------------------------------ |
      | **Setup Time**          | Days to weeks                   | Weeks to months                |
      | **Development Effort**  | Minimal                         | Significant                    |
      | **Customization**       | Standard features only          | Full control over all aspects  |
      | **Target Audience**     | Marketplaces, product teams     | Enterprises, technical teams   |
      | **Campaign Management** | Pre-built UI and tools          | Build your own interface       |
      | **Ad Formats**          | Banners, sponsored listings     | Any format you design          |
      | **Best For**            | Quick launch, standard features | Custom logic, deep integration |
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      **Choose [Ad Platform](/en/ad-platform) if you:**

      * Want to launch retail media quickly with minimal development
      * Prefer pre-built campaign management tools and reporting dashboards
      * Need standard banner ads and sponsored product listings
      * Have limited in-house development resources
      * Want to use platform plugins (VTEX, Salesforce) for easy integration
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      **Choose [Ad Server](/en/ad-server) if you:**

      * Need complete control over auction logic and ranking algorithms
      * Have in-house engineering teams to build custom solutions
      * Require deep integration with proprietary systems
      * Want to implement custom ad formats or unique workflows
      * Need advanced features like custom attribution models or A/B testing frameworks
    </div>
  </Step>

  <Step title="Test & Validate">
    Use built-in logging and staging environments to monitor requests.
  </Step>

  <Step title="Go Live">
    Deploy to production and leverage Topsort's analytics for optimization.
  </Step>
</Steps>

<IntegrationsCard1A />