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

# Vue d'ensemble de l'intégration

> Un aperçu du processus d'intégration

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <h2>Besoin d'aide avec votre intégration Topsort ?</h2>

        <p className="integrations-card-1a-fr-subtitle">
          Parlez-nous, l'équipe d'ingénierie des intégrations.
        </p>

        <p>
          Contactez-nous via <strong>votre canal de messagerie dédié</strong> ou à{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          Si vous n'êtes pas encore client,{" "}
          <a href="https://www.topsort.com/book-a-demo">planifiez une démo</a> avec notre
          équipe de vente.
        </p>
      </div>
    </>;
};

Il existe des éléments essentiels pour une intégration Topsort réussie. Tout d'abord, obtenez
l'accès à votre sandbox Topsort auprès de votre représentant Topsort. En fonction de votre
accès aux produits, vous pourrez disposer de clés API qui débloqueront les
composants clés suivants d'une intégration de produit :

<Steps>
  <Step title="Accès au sandbox">
    Obtenez les clés API (Marketplace pour low-code, Advanced pour catalogue/CRM) depuis
    votre tableau de bord Topsort.
  </Step>

  <Step title="Choisissez votre parcours">
    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      Topsort propose deux approches d'intégration pour répondre à vos exigences techniques et votre calendrier :
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      * **Intégration low-code ([Ad Platform](/fr/ad-platform))** : Utilisez nos SDK, bibliothèques et plugins préconstruits pour une implémentation rapide
        et un effort de développement minimal. Parfait pour les marketplaces qui veulent se lancer rapidement.
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      * **Intégration API-first ([Ad Server](/fr/ad-server))** : Exploitez notre
        ensemble puissant d'API publiques pour obtenir un contrôle total de votre configuration publicitaire. Idéal pour les entreprises avec des équipes internes et des exigences personnalisées.
    </div>

    <div style={{ marginTop: "2rem", marginBottom: "2rem" }}>
      | Caractéristique             | Ad Platform (Low-Code)                     | Ad Server (API-First)                       |
      | --------------------------- | ------------------------------------------ | ------------------------------------------- |
      | **Temps de Configuration**  | Jours à semaines                           | Semaines à mois                             |
      | **Effort de Développement** | Minimal                                    | Significatif                                |
      | **Personnalisation**        | Fonctionnalités standard uniquement        | Contrôle total sur tous les aspects         |
      | **Public Cible**            | Marketplaces, équipes produit              | Entreprises, équipes techniques             |
      | **Gestion de Campagnes**    | UI et outils préconstruits                 | Construisez votre propre interface          |
      | **Formats Publicitaires**   | Bannières, annonces sponsorisées           | N'importe quel format que vous concevez     |
      | **Idéal Pour**              | Lancement rapide, fonctionnalités standard | Logique personnalisée, intégration profonde |
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      **Choisissez [Ad Platform](/fr/ad-platform) si vous :**

      * Voulez lancer des médias de vente au détail rapidement avec un développement minimal
      * Préférez des outils de gestion de campagnes et des tableaux de bord de rapports préconstruits
      * Avez besoin d'annonces bannières standard et de listes de produits sponsorisés
      * Avez des ressources de développement internes limitées
      * Voulez utiliser des plugins de plateforme (VTEX, Salesforce) pour une intégration facile
    </div>

    <div style={{ textAlign: "justify", marginBottom: "1.5rem" }}>
      **Choisissez [Ad Server](/fr/ad-server) si vous :**

      * Avez besoin d'un contrôle complet sur la logique d'enchères et les algorithmes de classement
      * Avez des équipes d'ingénierie internes pour construire des solutions personnalisées
      * Nécessitez une intégration profonde avec des systèmes propriétaires
      * Voulez implémenter des formats publicitaires personnalisés ou des flux de travail uniques
      * Avez besoin de fonctionnalités avancées comme des modèles d'attribution personnalisés ou des frameworks de tests A/B
    </div>
  </Step>

  <Step title="Tester et valider">
    Utilisez la journalisation intégrée et les environnements de staging pour surveiller les requêtes.
  </Step>

  <Step title="Mise en production">
    Déployez en production et exploitez les analyses de Topsort pour l'optimisation.
  </Step>
</Steps>

<IntegrationsCard1AFr />