Ontwikkelaarsintegratie voor een eigen webshop#

Laad de ideal.house SDK en koppel productCode-waarden uit de webshop aan de catalogus.

Voordat je de SDK laadt: Open Dashboard → Instellingen, voeg de oorsprong van je webshop toe aan Allowed Origins (CORS) en klik op Opslaan. Neem de gepubliceerde hostnaam en alle gebruikte oorsprongen van voorbeeld- of testomgevingen op; scheid meerdere oorsprongen met komma's. Zie de configuratiestappen.

1. De SDK laden#

html

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

2. Eén knopcontract kiezen#

Optie A: door de SDK gegenereerde knop#

Geef een doelcontainer weer. Na productvalidatie maakt de SDK daarin de knop aan.

html

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

Optie B: zelfgemaakte knop#

Geef de knop zelf weer en bepaal de stijl. De SDK behoudt de DOM en koppelt de geschiktheidscontrole en het klikgedrag.

html

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

3. productCode gelijk houden aan de catalogus#

<PRODUCT_CODE>

De productCode van de catalogus en data-product-code van de webshop moeten identiek zijn, inclusief hoofdletters en kleine letters.
Genereer productCode niet bij elke weergave opnieuw uit een veranderlijke naam; werk catalogus en webshop samen bij wanneer de code moet veranderen.

4. Dynamische pagina's en geselecteerde producten afhandelen#

De SDK observeert doelelementen die na het laden van de pagina worden ingevoegd. Je toepassing moet nog steeds doelattributen bijwerken en de oude SDK-toestand wissen wanneer het geselecteerde product verandert.

Een zelfgemaakte knop na selectiewijzigingen bijwerken#

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. De integratie controleren#

Het netwerkpaneel toont dat sdk.js is geladen met HTTP 200.
De data-product-code van het gekoppelde doelelement komt exact overeen met de catalogus.
Alleen geschikte producten tonen een gegenereerde of zelfgemaakte knop.
Dynamische productwijzigingen werken het doelelement bij voordat de klant klikt.
Een klik op de knop opent de ideal.house Viewer met het geselecteerde product.

Geavanceerde configuratie#

Door de server gegenereerd starttoken#

Gebruik deze modus wanneer je backend kort geldige starttokens uitgeeft. Client Secret mag nooit in browser-JavaScript staan.

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"}'

Aangepaste productafmetingen#

Geef breedte, hoogte en eenheid in kleine letters (ft, in of cm) samen op het gekoppelde element op. De SDK leest de nieuwste waarden op het moment van klikken.

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>