SDK Schnellstart#

Fügen Sie Ihrem Onlineshop zunächst für ein vorbereitetes Produkt einen Einstieg in die Produktvisualisierung hinzu, bevor Sie diese für Ihren gesamten Katalog bereitstellen.

1. Shop und Produkt vorbereiten#

Wählen Sie Ihren Shop in der Verwaltungskonsole aus und rufen Sie dessen Shop ID und Publishable Key ab. Öffnen Sie Dashboard → Einstellungen, fügen Sie den Origin Ihres Onlineshops zu Allowed Origins (CORS) hinzu und klicken Sie auf Speichern. Mindestens ein Produkt muss zur Visualisierung bereit sein. Wenn Sie aus Ihrem Backend importieren, folgen Sie der Product Import API und prüfen Sie das endgültige Auftragsergebnis.

2. Plattformanleitung auswählen#

Verwenden Sie Shopify für Liquid-Themes, WooCommerce für WooCommerce-Storefronts oder benutzerdefinierte Storefront für Ihre eigene Website. Weitere Plattformanleitungen finden Sie in der SDK-Übersicht.

3. Laden Sie das SDK einmal#

Für einen benutzerdefinierten Shop laden Sie dieses Script einmal in der Host-Seite. Ersetzen Sie beide Platzhalter durch Werte aus dem gleichen Shop.

html

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

4. Ein passendes Zielelement rendern#

Verwenden Sie den genauen Produktcode aus Ihrem vorbereiteten Katalog. Dieses Beispiel bittet das SDK, die Schaltfläche nach der Produktvalidierung zu erstellen.

html

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

Ein Zielelement allein belegt nicht, dass das Produkt geeignet ist. Prüfen Sie die ausgewählte Variante, die Einsatzbereitschaft des Produkts und die Zuordnung der Kennungen.

5. Kundenreise testen#

Prüfen Sie, ob sdk.js erfolgreich lädt, die richtige Schaltfläche erscheint und ein Klick den Viewer mit dem beabsichtigten Produkt öffnet. Ändern Sie Varianten, navigieren Sie zu einem anderen Produkt und wiederholen Sie dies auf dem Mobilgerät. Schließen Sie die Launch-Checkliste ab, bevor Sie veröffentlichen.