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

# Algolia

> Intégrez les résultats d'enchères avec un index Algolia existant

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

Ce guide montre comment intégrer les résultats d'enchères Topsort avec votre index Algolia existant, permettant aux produits organiques et promus d'être listés dans le même flux.

Algolia est un moteur de recherche puissant qui fournit des résultats rapides et pertinents pour naviguer dans les catalogues. En intégrant Algolia avec Topsort, nous pouvons synchroniser votre catalogue directement dans Topsort, sans avoir besoin d'intégrations de catalogue supplémentaires. L'intégration vous permettra également de prioriser les produits promus dans les résultats organiques retournés par Algolia. Consultez l'intégration Proxy de Topsort pour plus de détails.

## Comment ça fonctionne

<Steps>
  <Step title="Prérequis">
    Pour intégrer Topsort avec Algolia, assurez-vous de respecter ces prérequis :

    * Votre catalogue de produits est stocké dans un index Algolia.
    * Vous interrogez Algolia en utilisant le SDK Algolia.
  </Step>

  <Step title="Créer une clé API">
    Créez une clé API Algolia avec les permissions suivantes : search, browse, listIndexes (des permissions supplémentaires comme addObject et deleteObject peuvent être nécessaires selon la façon dont vous gérez les mises à jour de votre index).

    * La permission browse permet le téléchargement de votre catalogue entier.
    * La permission listIndexes permet à Topsort de vérifier la date de dernière modification de l'index pour éviter les mises à jour inutiles
  </Step>

  <Step title="Partager les détails de l'index">
    Contactez le support Topsort et partagez le nom de votre index Algolia. Cela permet à Topsort de configurer et de commencer à importer votre catalogue.
  </Step>

  <Step title="Configurer le Proxy Topsort">
    Mettez à jour la configuration de votre SDK Algolia pour pointer vers le Proxy de Topsort. Cela permettra à Topsort de prioriser les produits promus dans les résultats organiques retournés par Algolia.

    ```javascript theme={null}
    import algoliasearch from 'algoliasearch/lite';

    const client = algoliasearch('YourApplicationID', 'YourWriteAPIKey', {
      hosts: [{ url: 'myslug-sandbox.topsort.workers.dev' }],
    });
    const index = client.initIndex('votre_nom_d_index');
    ```
  </Step>
</Steps>

## Résultats d'enchères et suivi d'événements

Les produits promus priorisés dans la réponse du Proxy de Topsort auront un paramètre resolvedBidId qui identifie de manière unique l'enchère de ce produit. Vous pouvez l'utiliser pour marquer visuellement le produit comme "Promu" pour l'utilisateur final.

Le resolvedBidId est également nécessaire pour identifier le gagnant de l'enchère lors du signalement des événements (impressions, clics, achats). Consultez notre documentation sur le suivi des événements pour plus de détails.

<IntegrationsCard1AFr />