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

> Apprenez à intégrer Topsort avec Banners.js

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

La [bibliothèque publique banner.js de Topsort](https://github.com/Topsort/banners.js/) permet aux marketplaces d'afficher des bannières publicitaires grâce à une intégration low-code. En utilisant une simple balise HTML, la marketplace peut se connecter au serveur publicitaire de Topsort et afficher des bannières provenant de campagnes actives sans intégrations complexes.

## Installation

Vous pouvez installer la bibliothèque en utilisant npm ou yarn, ou charger le SDK directement dans votre fichier HTML en incluant une balise `<script>` :

```html theme={null}
<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"
></script>
<script>
  // Configuration globale pour Topsort
  window.TS = {
    token: "TSE_XXXXXXXXXXXX", // Remplacez par votre clé API Topsort
  };
</script>
```

## Utilisation

Cet exemple montre la configuration minimale requise. L'intégration fonctionne avec HTML et Javascript standard, la rendant compatible avec la plupart des stacks frontend.

Pour le tester, vous avez simplement besoin d'ajouter votre clé API Marketplace et l'ID du slot de bannière, configuré dans la campagne.

```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>
  // Définir la clé API pour les enchères et les événements
  window.TS = {
    token: "TSE_XXXXXXXXXXXX",
  };
  // Un comportement personnalisé peut être configuré pour chaque site.
  window.TS_BANNERS = {
    // gérer le lien de destination
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    // gérer l'état de chargement
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Chargement...";
      return el;
    },
    // gérer les erreurs
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Erreur de chargement de la bannière";
      return el;
    },
  };
</script>
<body>
  <topsort-banner width="600" height="400" id="<votre slot id>"></topsort-banner>
</body>
```

## Attributs de bannière

Voici les attributs disponibles pour le composant `<topsort-banner>`. Ils servent d'entrée à la requête d'enchères, pour récupérer les bons gagnants pour ce contexte.

| Nom                     | Type   | Description                                                  |
| ----------------------- | ------ | ------------------------------------------------------------ |
| width                   | number | Largeur de la bannière                                       |
| height                  | number | Hauteur de la bannière                                       |
| id                      | string | L'ID du slot pour cette bannière, configuré dans la campagne |
| Category-id (optional)  | string | Catégorie contextuelle pour le ciblage                       |
| Search-query (optional) | string | Mot-clé contextuel pour le ciblage                           |

## Comportements de bannière

Voici les attributs disponibles pour le composant `<topsort-banner>`. Ils servent d'entrée à la requête d'enchères, pour récupérer les bons gagnants pour ce contexte.

| Nom               | Type        | Description                                                           |
| ----------------- | ----------- | --------------------------------------------------------------------- |
| getLink(banner)   | string      | URL de destination de la bannière, configurée dans la campagne.       |
| getLoadingElement | HTMLElement | Un élément personnalisé à afficher lors du chargement de la bannière. |
| getErrorElement   | HTMLElement | Un élément personnalisé à afficher lorsqu'une erreur se produit.      |

## Interface de bannière

L'interface de bannière est la structure d'un objet bannière. Chaque bannière contient des métadonnées sur la campagne, et le resolvedBidId, le paramètre nécessaire pour suivre les interactions utilisateur (clics et impressions).

| Nom           | Type                                      | Description                                                                                                                                 |
| ------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| type          | "product" \| "vendor" \| "brand" \| "url" | Le type de l'entité gagnante, représentée par la bannière, configuré dans la campagne.                                                      |
| id            | string                                    | L'ID de l'entité gagnante. Si l'entité est de type URL, c'est l'URL.                                                                        |
| resolvedBidId | string                                    | L'ID d'enchère correspondant de l'entité gagnante, nécessaire pour suivre l'interaction utilisateur (clics, impressions) avec la publicité. |
| asset         | \[\{ url: string }]                       | Un tableau d'urls pointant vers les ressources de la bannière.                                                                              |

<IntegrationsCard1AFr />