Intégrer, personnaliser et facturer Findy

Poser le conteneur à l'endroit où la recherche doit apparaître, charger le script avant</body>, puis appeler Findy.init. Remplacer VOTRE_CLE_WIDGET_FINDY par la clé widget du client.

<div id="findy-search"></div>

<script src="https://findysearch.com/widget-v2/findy-widget.js"></script>
<script>
  Findy.init({
    apiKey: 'VOTRE_CLE_WIDGET_FINDY',
    containerId: 'findy-search',
    apiBaseUrl: 'https://findysearch.com'
  });
</script>

• Récupérer l'URL publique Findy, généralement https://findysearch.com.
• Créer ou récupérer la clé widget du client dans le dashboard.
• Vérifier que le catalogue est connecté ou en cours de synchronisation.
• Tester desktop, mobile, clic produit, ajout panier et remontée analytics.
• Ne jamais exposer de clés WooCommerce, PrestaShop ou API serveur dans le code du site marchand.

Le style du widget est configuré côté Findy et livré au widget via l'API de configuration. Le site marchand garde uniquement le snippet d'intégration; les équipes peuvent donc ajuster le design sans redéployer le thème.

Le compteur Findy est conçu pour refléter les interactions qui ont une valeur produit: recherche, clic et ajout panier. Les appels techniques nécessaires au chargement du widget ne sont pas tous facturés, mais certains vérifient le quota pour éviter de servir une expérience inactive.

Le prix mensuel est la somme de l'abonnement et de la consommation hors forfait. Les requêtes incluses et bonus déjà disponibles ne génèrent pas de coût supplémentaire.

requêtes_disponibles = requêtes_plan_restantes + requêtes_bonus
requêtes_hors_forfait = overageRequestsThisPeriod
coût_hors_forfait = requêtes_hors_forfait x tarif_pay_as_you_go
total_mensuel = abonnement_mensuel + coût_hors_forfait

• Le compteur mensuel d'usage s'appuie sur le compteur interne et les événements du mois en cours.
• Les requêtes bonus sont séparées du quota du plan et consommées en priorité.
• Les dépassements sont comptés dans overageRequestsThisPeriod.
• La date de reset affichée vient de la période d'abonnement Stripe.
• En cas de paiement suspendu sur un plan payant, l'accès peut être bloqué même si des compteurs existent.

Utiliser ce mode pour les sites Next.js, Nuxt, React, Vue, Svelte, les paniers internes ou les frontends découplés. Dans Findy, choisir Site custom / API, renseigner un endpoint catalogue HTTPS, puis valider avec l'équipe Findy comment les produits et le panier sont connectés.

• Exposer un endpoint JSON stable, public côté serveur Findy mais protégé par token.
• Retourner les champs requis: externalId, name, price, url et inStock.
• Utiliser une pagination cursor via nextCursor et hasMore pour les catalogues volumineux.
• Vérifier que productId et variationId correspondent aux identifiants attendus par l'API panier.
• Définir la stratégie des variantes: ajout direct, sélecteur de variante ou redirection fiche produit.
• Sur une SPA, initialiser Findy côté client après le montage du champ cible et éviter les doubles initialisations.

{
  "items": [
    {
      "externalId": "sku-123",
      "sku": "SKU-123",
      "name": "Chaussure de running",
      "description": "Modele leger pour entrainement quotidien",
      "price": 89.9,
      "originalPrice": 109.9,
      "currency": "EUR",
      "imageUrl": "https://boutique.example/products/sku-123.jpg",
      "categories": ["Running", "Chaussures"],
      "brand": "Acme",
      "tags": ["nouveaute", "route"],
      "inStock": true,
      "stockQuantity": 42,
      "url": "https://boutique.example/products/sku-123",
      "addToCartUrl": "https://boutique.example/cart/add?sku=sku-123",
      "variantAttributes": [
        { "name": "Taille", "slug": "taille", "values": ["40", "41"] }
      ],
      "variants": [
        {
          "id": "sku-123-40",
          "sku": "SKU-123-40",
          "name": "Taille 40",
          "price": 89.9,
          "inStock": true,
          "attributes": { "Taille": "40" }
        }
      ]
    }
  ],
  "hasMore": true,
  "nextCursor": "page-2",
  "total": 240
}

<script src="https://findysearch.com/widget-v2/findy-widget.js"></script>
<script>
  Findy.init({
    apiKey: 'VOTRE_CLE_WIDGET_FINDY',
    apiBaseUrl: 'https://findysearch.com',
    triggerSelector: '#site-search, .js-open-search'
  });
</script>

<script src="https://findysearch.com/widget-v2/findy-widget.js"></script>
<script>
  Findy.init({
    apiKey: 'VOTRE_CLE_WIDGET_FINDY',
    apiBaseUrl: 'https://findysearch.com',
    triggerSelector: '#site-search',
    onAddToCart: async function({
      productId,
      variationId,
      quantity,
      selectedAttributes,
      product,
      variant,
      price,
      currency,
      query,
      collectionSlug
    }) {
      var csrfToken = window.CSRF_TOKEN;
      if (!csrfToken) {
        throw new Error('Missing CSRF token');
      }

      var response = await fetch('/api/cart/add', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrfToken
        },
        credentials: 'include',
        body: JSON.stringify({
          productId: productId,
          variationId: variationId || null,
          quantity: quantity || 1,
          selectedAttributes: selectedAttributes || {},
          sku: variant?.sku || product?.sku || null,
          price: price || null,
          currency: currency || 'EUR',
          findyContext: {
            query: query || null,
            collectionSlug: collectionSlug || null
          }
        })
      });

      if (!response.ok) {
        return { success: false };
      }

      var data = await response.json().catch(function() {
        return {};
      });

      return { success: data.success === true };
    }
  });
</script>

<button type="button" id="findy-open-button">Rechercher</button>

<script>
  document.getElementById('findy-open-button')?.addEventListener('click', function() {
    Findy.open();
  });
</script>

• Autoriser le script Findy dans script-src, par exemple https://findysearch.com.
• Autoriser les appels API Findy dans connect-src.
• Charger Findy.init avec un nonce CSP, un hash CSP ou un fichier JavaScript du site déjà autorisé.
• Prévoir style-src pour les styles injectés et fonts.googleapis.com si la police Google configurée est utilisée.
• Prévoir font-src pour fonts.gstatic.com et img-src pour les images produits ou CDN.
• Si une URL versionnée et un attribut integrity sont fournis, les utiliser avec crossorigin="anonymous".

• Le script findy-widget.js se charge sans erreur dans l'onglet Network.
• La console navigateur ne contient pas d'erreur Findy is not defined.
• La barre Findy ou le déclencheur CSS ouvre l'overlay.
• Une recherche affiche des produits synchronisés.
• Les filtres, les tris et la pagination ou le scroll infini fonctionnent.
• Les images produits se chargent.
• Le clic produit ouvre la bonne page produit.
• L'ajout panier fonctionne quand il est activé.
• Les variantes produits se comportent comme prévu.
• Le mini-panier ou le compteur panier se met à jour si le thème le gère.
• Les recherches, clics et ajouts panier remontent dans les analytics Findy après quelques minutes.
• La consommation de requêtes correspond au scénario testé.
• La recherche fonctionne sur mobile.
• Les contraintes CSP sont respectées sans ajouter 'unsafe-inline' dans script-src.