Zum Hauptinhalt springen

Wie binde ich den Konfigurator auf meiner Webseite oder meinem Shop ein?

Voraussetzungen​

Die Adresse Ihre Konfigurators​

Für die Einbindung benötigen Sie als erstes die Adresse Ihres Konfigurators.

Wenn Sie das Frontend anzeigen lassen und einen Blick in die Adresszeile Ihres Browsers werfen, finden Sie dort eine Adresse wie:

https://k3.objectcode.de/app/?app=141d6e28-2b40-49c3-bd6b-1775b8f9b56a

Diese Adresse sieht ein wenig kryptisch aus. Den letzten Teil können Sie aber einfach in den Optionen Ihres Konfigurators im Feld Code ändern. Sie müssen danach - wie bei jeder weiteren Änderung - erneut veröffentlichen.

Diese Adresse können Sie nutzen, um auf Ihrer Webseite oder in Ihrem Shop einen Link zu setzen oder einen IFrame einzubinden. Sie finden dazu aber unter den Optionen im Tab Einbetten auch ganze Code-Schnipsel, die Sie oder Ihr Entwickler auf Ihrer Webseite oder in Ihrem Shop einbauen können.

Dabei gibt es ein paar Tricks, die wir im folgenden erläutern:

Einbindung als externe Webseite​

Natürlich können Sie auf Ihrer Seite (in Ihrem Shop) einfach auf den Konfigurator verlinken. Dazu setzen Sie einfach einen Link auf die oben bestimmte Adresse.

Der Weg zurück zu Ihrem Shop funktioniert über die Abschluss-Aktionen: Im Konfigurator gibt es die Knöpfe, um die Konfiguration bei Ihnen per Mail anzufragen oder in den Warenkorb zu legen. In letzterem Fall landet der Nutzer wieder in Ihrem Shop.

Ob Sie den Konfigurator in einem neuen Tab öffnen wollen oder ob er Ihre Webseite ersetzen soll, können Sie frei wählen. Ihr Web-Editor wird dazu Optionen anbieten.

Vorteile:

  • die Einbindung ist einfach
  • die Nutzung ist - besonders auch mobil - optimal, da der Konfigurator die gesamte Seite nutzen kann und keine Störungen beim Scroll-Verhalten auftreten.

Nachteil:

  • der Nutzer verlässt gefühlt Ihre Seite
  • die Adresse des Konfigurators wird in der Adresszeile sichtbar

Einbindung per IFrame​

tip

Ein IFrame ist die technische Möglichkeit, eine Webseite innerhalb einer anderen anzuzeigen.

Sie können auf einer Seite Ihres Shops/Ihrer Webpräsenz den Konfigurator anzeigen. Dazu können Sie eine beliebige Seite auswählen oder eine spezielle Seite neu anlegen, z.B. /konfigurator.

Auf der Seite fügen Sie dann den Code ein, der unter Optionen im Tab Einbetten als IFrame angezeigt wird. Das können Sie in Ihrem Web-Editor normalerweise mit einem generischen HTML-Element tun. Der Code sieht etwa so aus:

<iframe id="k3"
    frameBorder="0"
    title="Object Code - iFrame"
    width="100%"
    height="100%"
    allow="fullscreen"
    src="https://k3.objectcode.de/app/?app=2d01a48d-85a4-4f8e-938f-3208b4bd70b9"
    style="border:none;overflow:hidden;">
</iframe>

Die einzelnen Zeilen bedeuten folgendes:

  • <iframe>: Ist der technische Befehl zum Anzeigen einer anderen Webseite.
  • frameBorder="0": Es soll kein Rahmen um den Konfigurator gezeigt werden.
  • title="Object Code - iFrame": Ist optional - der Titel wird nicht angezeigt.
  • width="100%": Der Konfigurator nimmt die gesamte verfügbare Breite ein.
  • height="100%": Der Konfigurator nimmt die gesamte verfügbare Höhe ein.
  • allow="fullscreen": Der Konfigurator darf sich im Vollbild-Modus zeigen.
  • src=...": Das ist die eigentliche Adresse der Konfiguratorseite
  • style="border:none;overflow:hidden": Es wird kein Rahmen gezeigt (neuere Browser). Und alles, was zu groß zum Anzeigen ist, wird versteckt.

Besonderes Augenmerk sollten Sie auf width und height legen. 100% jeweils setzt voraus, dass das umgebende Elemente die Maße vorgibt. Bei der Breite ist das meist kein Problem, bei der Höhe schon: Der Konfigurator ist so gestaltet, dass er den Bildschirm möglichst vollständig ausfüllen sollte. Tut er das nicht, muss der Nutzer evtl Scrollen und gerät dabei in Konflikt mit der 3D-Darstellung. Das führt zu Schwierigkeiten bei der Bedienung und sollte vermieden werden.

Was üblicherweise gewünscht ist, ist eine seitenfüllende Darstellung unterhalb des Seitenheaders. Das können Sie erreichen, indem Sie dem umgebenden Element per CSS diese Höhe geben:

height: calc(100vh - 80px);

100vh ist die Bildschirmhöhe, 80px die Höhe des Headers (das müssen Sie anpassen). Achtung - in manchen Browsern sind die Leerzeichen rund um das - wichtig!

Die können diese Höhe auch direkt dem IFrame geben:

<iframe id="k3"
    frameBorder="0"
    title="Object Code - iFrame"
    width="100%"
    allow="fullscreen"
    src="https://k3.objectcode.de/app/?app=2d01a48d-85a4-4f8e-938f-3208b4bd70b9"
    style="border:none;overflow:hidden;height: calc(100vh - 80px);">
</iframe>

Kontrollieren Sie nach der Einbindung den Pagespeed-Index der Seite. Ein 3D-Konfigurator lädt naturgemäß eine Weile - das beeinflusst die Performance-Messung.

Vorteile:

  • Der Nutzer bleibt auf Ihrer Seite.
  • Die Adresse des Konfigurators ist nicht sichtbar.

Nachteil:

  • Die Anbindung ist technisch ein wenig aufwändiger.
  • Die Ladezeit wird Ihrer Webseite angelastet.