Snelstart voor SDK#

Voeg eerst met één voorbereid product een toegangspunt voor productvisualisatie toe aan je webshop voordat je dit voor je hele catalogus uitrolt.

1. De winkel en het product voorbereiden#

Selecteer je winkel in het Beheerpaneel. Verkrijg de bijbehorende Shop ID en Publishable Key. Open Dashboard → Instellingen, voeg de oorsprong van je webshop toe aan Allowed Origins (CORS) en klik op Opslaan. Zorg dat minstens één product gereed is voor visualisatie. Als je via je backend importeert, volg dan de Product Import API en controleer het definitieve taakresultaat.

2. Een platformhandleiding kiezen#

Gebruik Shopify voor Liquid-thema's, WooCommerce voor WooCommerce-webshops of een eigen webshop voor je eigen site. Meer platformhandleidingen staan in het overzicht van SDK.

3. De SDK eenmaal laden#

Laad dit script bij een eigen webshop eenmaal in de pagina die de integratie bevat. Vervang beide tijdelijke waarden door gegevens van dezelfde winkel.

html

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

4. Een overeenkomend doelelement weergeven#

Gebruik de exacte productcode uit je voorbereide catalogus. Dit voorbeeld vraagt de SDK om na productvalidatie de knop aan te maken.

html

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

Een doelelement alleen bewijst niet dat het product geschikt is. Controleer de geselecteerde variant, de gereedheid van het product en de identificatiekoppeling.

5. Het klanttraject testen#

Controleer dat sdk.js correct laadt, de juiste knop verschijnt en een klik de Viewer met het bedoelde product opent. Wijzig varianten, navigeer naar een ander product en herhaal dit op mobiel. Doorloop vóór publicatie de publicatiechecklist.