Démarrage rapide du SDK#

Ajoutez un point d'entrée de visualisation de produit à une boutique en ligne avec un seul produit préparé avant de déployer sur tout votre catalogue.

1. Préparer la boutique et le produit#

Sélectionnez votre boutique dans le Tableau de bord. Obtenez son Shop ID et sa Publishable Key. Ouvrez Tableau de bord → Paramètres, ajoutez l'origine de votre boutique en ligne à Allowed Origins (CORS) et cliquez sur Enregistrer. Assurez-vous qu'au moins un produit est prêt pour la visualisation. Si vous importez depuis votre backend, suivez la Product Import API et inspectez le résultat final de la tâche.

2. Choisir le guide de plateforme#

Utilisez Shopify pour les thèmes Liquid, WooCommerce pour les boutiques en ligne WooCommerce, ou boutique en ligne personnalisée pour votre propre site. D'autres guides de plateforme figurent sur la vue d'ensemble du SDK.

3. Charger le SDK une seule fois#

Pour une boutique en ligne personnalisée, chargez ce script une seule fois dans la page hôte. Remplacez les deux espaces réservés par des valeurs provenant de la même boutique.

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="YOUR_SHOP_ID"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  async
></script>

4. Rendre une cible correspondante#

Utilisez le code produit exact de votre catalogue préparé. Cet exemple demande au SDK de créer le bouton après la validation du produit.

html

<div data-idealhouse-button-container data-product-code="YOUR_PRODUCT_CODE"></div>

Une cible seule ne prouve pas que le produit est éligible. Confirmez la variante sélectionnée, la préparation du produit et le correspondance des identifiants.

5. Tester le parcours client#

Vérifiez que sdk.js se charge correctement, que le bon bouton apparaît et qu'un clic ouvre le Viewer avec le produit prévu. Changez de variantes, naviguez vers un autre produit et répétez sur mobile. Terminez la liste de vérification avant lancement avant la publication.