Ideal House
Aller au contenu principal

Intégration développeur de boutique en ligne personnalisée#

Chargez le SDK ideal.house et associez les valeurs de productCode de la boutique en ligne au Catalog.

<!-- DASHBOARD_READINESS -->

Avant de charger le SDK : Ouvrez Dashboard → Paramètres, ajoutez l'origine de votre boutique en ligne à Allowed Origins (CORS), puis cliquez sur Enregistrer. Incluez l'hôte publié et toutes les origines de prévisualisation ou de mise en stade que vous utilisez ; séparez plusieurs origines par des virgules. Consultez étapes de configuration.

1. Chargez le SDK#

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

2. Choisissez un contrat de bouton#

Option A : bouton généré par SDK#

Restituez un conteneur cible. Après validation du produit, le SDK crée son bouton enfant.

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

Option B : bouton créé manuellement#

Restituez et stylez vous-même le bouton. Le SDK conserve le DOM et lie l'éligibilité ainsi que le comportement au clic.

html
<button
  type="button"
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  style="visibility: hidden;"
>
  View in my room
</button>

3. Conservez productCode identique à Catalog#

<PRODUCT_CODE>

  • Le productCode de Catalog et le data-product-code de la boutique en ligne doivent être identiques, y compris pour la casse.
  • Ne régénérez pas productCode à partir d'un nom modifiable à chaque restitution ; mettez à jour Catalog et la boutique en ligne simultanément lorsqu'un changement est nécessaire.

4. Gérez les pages dynamiques et les produits sélectionnés#

Le SDK observe les cibles insérées après le chargement de la page. Votre application doit toujours mettre à jour les attributs de la cible et réinitialiser l'état SDK précédent lorsque le produit sélectionné change.

Mettez à jour un bouton créé manuellement après un changement de sélection#

js
const button = document.querySelector('[data-idealhouse-authored-button]')

function selectProduct(product) {
  button.dataset.productCode = product.productCode
  button.dataset.active = 'false'
  button.style.visibility = 'hidden'

  delete button.dataset.rvProductCode
  delete button.dataset.rvProductType
  delete button.dataset.rvProductId
  delete button.dataset.rvProductIds
}

5. Vérifiez l'intégration#

  1. Le panneau Network affiche sdk.js chargé avec une réponse HTTP 200.
  2. Le data-product-code de la cible correspondante doit être strictement identique à celui de Catalog.
  3. Seuls les produits éligibles affichent un bouton généré ou créé manuellement.
  4. Les changements dynamiques de produit mettent à jour la cible avant que le client ne clique.
  5. Cliquer sur le bouton ouvre le Viewer ideal.house avec le produit sélectionné.
<!-- DASHBOARD_CONFIGURATION -->

Configuration avancée#

Jeton de lancement généré par le serveur#

Utilisez ce mode lorsque votre backend émet des jetons de lancement à durée de vie courte. Client Secret ne doit jamais apparaître dans le JavaScript du navigateur.

html
<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>
bash
# Run on your server. Never expose CLIENT_SECRET in browser JavaScript.
curl -X POST "<IDEALHOUSE_API_URL>/shops/<SHOP_ID>/sdk-launch-token" \
  -H "Content-Type: application/json" \
  -H "x-client-id: <CLIENT_ID>" \
  -H "x-client-secret: <CLIENT_SECRET>" \
  -d '{"origin":"https://your-store.example"}'

Taille de produit personnalisée#

Fournissez la largeur, la hauteur et l'unité en minuscules (ft, in ou cm) ensemble sur l'élément correspondant. Le SDK lit les dernières valeurs au moment du clic.

html
<button
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  data-product-width="8"
  data-product-height="10"
  data-product-size-unit="ft"
  style="visibility: hidden;"
>View in my room</button>